Building Mobile Apps with HTML5

Transcription

1 Building Mobile Apps with HTML5 Jeff Garbers, CTO, Rover Apps 2012 Rover Apps, LLC

2 Topics What s unique about mobility Web vs. naave apps Factors to consider Architectural opaons PlaForms and tools Techniques

3 What s unique about mobility?

4 What s unique about mobility?

5 What s unique about mobility?

6 Web vs. Native

7 Factors to consider ApplicaAon domain User experience Business issues PlaForm issues Infrastructure LimitaAons

8 Application domain Games / casual Personal producavity Social MarkeAng VerAcal B2B Internal / line of business

9 User experience CompeAng based on UI quality? Heavy use of animaaon / media? SupporAng widely varying screen sizes?

10 Business issues Does it need to be in App Stores? How important is security? How frequently will the app change? What skills do we have and what do we want?

11 Platform issues Does it need features that are unavailable through device browsers? How important are plaforms beyond ios and Android? How important is compaability across plaforms and versions?

12 Infrastructure Are back- end services used by the app mature and stable? Does the app need to work offline? Is there a significant investment in HTML- based assets and code?

13 Web limitations Access to local resources Compute- intensive tasks Security PlaForm- specific interfaces

14 Architectural options Mobile- friendly Web site Extended browser Site- specific browser Bundled Web HTML fragments Parallel apps

15 Architectural options Mobile- friendly Web site Mobile- friendly Web site Extended browser Site- specific browser Bundled Web HTML fragments Parallel apps

16 Architectural options Mobile- friendly Web site Mobile- friendly Web site Extended browser Site- specific browser Bundled Web HTML fragments Parallel apps

17 Architectural options Extended browser Mobile- friendly Web site Extended browser Site- specific browser Bundled Web HTML fragments Parallel apps

18 Architectural options Site- specific browser Mobile- friendly Web site Extended browser Site- specific browser Bundled Web HTML fragments Parallel apps

19 Architectural options Site- specific browser Mobile- friendly Web site Extended browser 2.12 Apps that are not very useful, are simply web sites bundled as apps, or Site- specific browser do not provide any lasting Bundled Web entertainment value may be rejected HTML fragments 12.3 Apps that are simply web Parallel apps clippings, content aggregators, or a collection of links, may be rejected

20 Architectural options Mobile- friendly Web site Extended browser Site- specific browser Bundled Web HTML fragments Parallel apps

21 Architectural options Mobile- friendly Web site Extended browser Site- specific browser Bundled Web HTML fragments Parallel apps

22 Architectural options Mobile- friendly Web site Extended browser Site- specific browser Bundled Web HTML fragments Parallel apps

23 Platforms, frameworks, and toolsets Wrapping & deployment Access to device features UI / applicaaon framework Development environment

24 PhoneGap / Cordova

25 jquery Mobile

26 jquery Mobile

27 jquery Mobile

28 jquery Mobile

29 jquery Mobile

30 jquery Mobile

31 Sencha Touch

32 Sencha Touch

33 Rover Apps

34 Rover Apps

35 Rover Apps

36 AppMobi

37 Appcelerator Titanium

38 App-o-matic tools

39 Technologies to learn At least one JS framework HTML5 cache manifest Local storage (key/value and SQL) Cache control headers Graphics compression JS / CSS minimizers Special (WebKit) meta tags and CSS

40 Cache manifest Tricky Unforgiving Totally worth it

41 Cache manifest

42 Cache manifest

43 Cache manifest ModificaAon tag Keep these for offline Never cache Use these if you re offline

44 Audience experience

45 @roverapps

46 roverapps.com