Building Mobile Apps with HTML5

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

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

What s unique about mobility?

Web vs. Native

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

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

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

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?

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?

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?

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

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

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

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

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

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

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

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

PhoneGap / Cordova

jquery Mobile

Sencha Touch

Rover Apps

AppMobi

Appcelerator Titanium

App-o-matic tools

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

Cache manifest Tricky Unforgiving Totally worth it

Cache manifest

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

Audience experience

Thanks! jgarbers@roverapps.com @jgarbers @roverapps

roverapps.com info@roverapps.com