Building Mobile Apps with HTML5 - Meetupfiles.meetup.com/2350421/rover-html5-mobile-slides.pdf · ©2012RoverApps,LLC Building Mobile Apps with HTML5 JeﬀGarbers,CTO,RoverApps Monday,

©2012 Rover Apps, LLC

Building Mobile Appswith HTML5

Jeff Garbers, CTO, Rover Apps

Monday, July 23, 12

©2011 Rover Apps, LLC©2012 Rover Apps, LLC

Topics

•What’s unique about mobility

•Web “vs.” naAve apps

• Factors to consider• Architectural opAons• PlaForms and tools

• Techniques

Monday, July 23, 12


What’s unique about mobility?

Monday, July 23, 12



Monday, July 23, 12



Monday, July 23, 12


Web vs. Native

Monday, July 23, 12


Factors to consider

• ApplicaAon domain

• User experience• Business issues• PlaForm issues

• Infrastructure• LimitaAons

Monday, July 23, 12


Application domain

• Games / casual

• Personal producAvity• Social•MarkeAng

• VerAcal• B2B• Internal / line of business

Monday, July 23, 12


User experience

• CompeAng based on UI quality?

• Heavy use of animaAon / media?

• SupporAng widely varying screen sizes?

Monday, July 23, 12


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?

Monday, July 23, 12


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?

Monday, July 23, 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?

Monday, July 23, 12


Web limitations

• Access to local resources• Compute-‐intensive tasks

• Security• PlaForm-‐specific interfaces

Monday, July 23, 12


Architectural options

•Mobile-‐friendly Web site

• Extended browser• Site-‐specific browser• Bundled Web

• HTML fragments

• Parallel apps

Monday, July 23, 12





• HTML fragments

• Parallel apps

Mobile-‐friendly Web site

Monday, July 23, 12





• HTML fragments

• Parallel apps

Mobile-‐friendly Web site

Monday, July 23, 12





• HTML fragments

• Parallel apps

Extended browser

Monday, July 23, 12





• HTML fragments

• Parallel apps

Site-‐specific browser

Monday, July 23, 12





• HTML fragments

• Parallel apps

2.12 Apps that are not very useful, are simply web sites bundled as apps, or do not provide any lasting entertainment value may be rejected

12.3 Apps that are simply web clippings, content aggregators, or a collection of links, may be rejected

Site-‐specific browser

Monday, July 23, 12





• HTML fragments

• Parallel apps

Bundled Web

Monday, July 23, 12





• HTML fragments

• Parallel appsHTML fragments

Monday, July 23, 12





• HTML fragments

• Parallel appsParallel apps

Monday, July 23, 12


Platforms, frameworks, and toolsets

•Wrapping & deployment

• Access to device features• UI / applicaAon framework

• Development environment

Monday, July 23, 12


PhoneGap / Cordova

Monday, July 23, 12


jQuery Mobile

Monday, July 23, 12


jQuery Mobile

Monday, July 23, 12


jQuery Mobile

Monday, July 23, 12


jQuery Mobile

Monday, July 23, 12


jQuery Mobile

Monday, July 23, 12


jQuery Mobile

Monday, July 23, 12


Sencha Touch

Monday, July 23, 12


Sencha Touch

Monday, July 23, 12


Rover Apps

Monday, July 23, 12


Rover Apps

Monday, July 23, 12


Rover Apps

Monday, July 23, 12


AppMobi

Monday, July 23, 12


Appcelerator Titanium

Monday, July 23, 12


“App-o-matic” tools

Monday, July 23, 12


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

Monday, July 23, 12


Cache manifest

• Tricky• Unforgiving• Totally worth it

Monday, July 23, 12


Cache manifest

Monday, July 23, 12


Cache manifest

Monday, July 23, 12


Cache manifest

Keep these for offline

Never cache

Use these if you’re offline

ModificaAon tag

Monday, July 23, 12


Audience experience

Monday, July 23, 12


Thanks!

[email protected]

@jgarbers

@roverapps

Monday, July 23, 12

mailto:[email protected]







[email protected]

Monday, July 23, 12

Documents

Building Mobile Apps with HTML5 - Meetupfiles.meetup.com/2350421/rover-html5-mobile-slides.pdf · ©2012RoverApps,LLC Building Mobile Apps with HTML5 JeﬀGarbers,CTO,RoverApps Monday,