building mobile apps with html5 - meetupfiles.meetup.com/2350421/rover-html5-mobile-slides.pdf ·...
TRANSCRIPT
©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
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
What’s unique about mobility?
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
What’s unique about mobility?
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
What’s unique about mobility?
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Web vs. Native
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Factors to consider
• ApplicaAon domain
• User experience• Business issues• PlaForm issues
• Infrastructure• LimitaAons
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Application domain
• Games / casual
• Personal producAvity• Social•MarkeAng
• VerAcal• B2B• Internal / line of business
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
User experience
• CompeAng based on UI quality?
• Heavy use of animaAon / media?
• SupporAng widely varying screen sizes?
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
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
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
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
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
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
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Web limitations
• Access to local resources• Compute-‐intensive tasks
• Security• PlaForm-‐specific interfaces
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Architectural options
•Mobile-‐friendly Web site
• Extended browser• Site-‐specific browser• Bundled Web
• HTML fragments
• Parallel apps
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Architectural options
•Mobile-‐friendly Web site
• Extended browser• Site-‐specific browser• Bundled Web
• HTML fragments
• Parallel apps
Mobile-‐friendly Web site
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Architectural options
•Mobile-‐friendly Web site
• Extended browser• Site-‐specific browser• Bundled Web
• HTML fragments
• Parallel apps
Mobile-‐friendly Web site
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Architectural options
•Mobile-‐friendly Web site
• Extended browser• Site-‐specific browser• Bundled Web
• HTML fragments
• Parallel apps
Extended browser
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Architectural options
•Mobile-‐friendly Web site
• Extended browser• Site-‐specific browser• Bundled Web
• HTML fragments
• Parallel apps
Site-‐specific browser
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Architectural options
•Mobile-‐friendly Web site
• Extended browser• Site-‐specific browser• Bundled Web
• 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
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Architectural options
•Mobile-‐friendly Web site
• Extended browser• Site-‐specific browser• Bundled Web
• HTML fragments
• Parallel apps
Bundled Web
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Architectural options
•Mobile-‐friendly Web site
• Extended browser• Site-‐specific browser• Bundled Web
• HTML fragments
• Parallel appsHTML fragments
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Architectural options
•Mobile-‐friendly Web site
• Extended browser• Site-‐specific browser• Bundled Web
• HTML fragments
• Parallel appsParallel apps
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Platforms, frameworks, and toolsets
•Wrapping & deployment
• Access to device features• UI / applicaAon framework
• Development environment
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
PhoneGap / Cordova
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
jQuery Mobile
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
jQuery Mobile
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
jQuery Mobile
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
jQuery Mobile
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
jQuery Mobile
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
jQuery Mobile
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Sencha Touch
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Sencha Touch
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Rover Apps
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Rover Apps
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Rover Apps
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
AppMobi
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Appcelerator Titanium
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
“App-o-matic” tools
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
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
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Cache manifest
• Tricky• Unforgiving• Totally worth it
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Cache manifest
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Cache manifest
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Cache manifest
Keep these for offline
Never cache
Use these if you’re offline
ModificaAon tag
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Audience experience
Monday, July 23, 12
©2011 Rover Apps, LLC©2012 Rover Apps, LLC
Thanks!
@jgarbers
@roverapps
Monday, July 23, 12