HTML5 and the dawn of rich mobile web applications
27 likes30,594 views
The document discusses the evolution of mobile web applications, emphasizing the potential of HTML5 and web technologies as viable alternatives to native app development. It covers the performance, browser support, and frameworks available for creating mobile applications, such as jQT, jQuery Mobile, and Sencha Touch. The document also highlights the importance of user experience, discoverability, and adaptation to the diverse range of mobile devices.
HTML5 and the dawn of rich mobile web applications
- 2. James Pearce Director, Developer Relations @ jamespearce [email protected]
- 3. HTML5 and the dawn of rich mobile web applications
- 4. or
- 5. Everything I know about HTML5 I learned from
- 7. 2008
- 8. We must have an iPhone App!
- 11. 2010
- 12. We must have an Android App!
- 15. 2011
- 16. omfg
- 17. JS C# Palm J2ME Microsoft RIM RIM Android Apple Apple Air Microsoft Palm Obj-C Java C++ Android Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
- 18. J2ME C# RIM C Microsoft Nokia Python Apple Java Android Android Nokia Microsoft C++ RIM Lua Obj-C Apple ... Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010 http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
- 21. Device diversity
- 22. App Stores Updates
- 23. The Promise of Web Technologies
- 24. The Web Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood ... Mobile: the next era of the web as we know it
- 27. The mobile web is not a 320px web
- 32. The Web Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood ... But wait! Werenāt we talking about apps?
- 33. Hypothesis: Web technologies are a viable alternative to native development
- 34. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
- 37. -webkit accelerometer @page localStorage CSS Text @media manifest transform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
- 41. this is uncanny
- 42. A New Mobile App Stack WebFonts Video Audio Graphics Device Access Server & Services Camera CSS Styling & Layout HTTP Location AJAX Javascript Contacts Events SMS Semantic HTML Sockets Orientation SSL File Systems Worker x-App Gyro DBs Parallel More... Messaging App Cache Processing
- 43. Rich Media & StylingO RM TF LA Full Resource PP P Access A RN ParallelDProcessing E O M Communication Inter-AppTE LE P O ine Capability C Full OM
- 47. Web technologies are a viable alternative to native development
- 48. Caveats? Performance Browser support Device access All less of a issue than you might think Discoverability Monetization App āexperienceā
- 50. assumption HTML JS CSS progressive enhancement app doc vs assumption HTML JS CSS app
- 51. State of the Art: Mobile HTML5
- 52. Environments ?
- 53. Browsers WebKit FOEs
- 54. HTML5 support IE 9 PR Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2 @font-face Canvas HTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow: opacity: Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB
- 55. Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com
- 57. Why use a framework? Provide user interface components Smooth browser inconsistencies Mimic native or server paradigms Create consistent application architectures ...and more
- 59. Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
- 60. jQTouch UI layer on top of jQuery Declarative HTML Library progressively enhances Browsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsers http://jQTouch.com
- 61. jQTouch Scripts & stylesheets CSS classes for semantics & conļ¬g
- 62. jQuery Mobile (alpha) UI layer on top of jQuery Declarative HTML Library progressively enhances Browsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOS http://jquerymobile.com
- 63. jQuery Mobile Scripts & stylesheet data-* for semantics & conļ¬g
- 64. Sencha Touch Self-contained library Programmatic Javascript Standalone MVC applications Browsers: iOS (iPhone/iPad) Android BlackBerry v6 & QNX Bada, MeeGo & other WebKit Windows Phone 7* http://sencha.com/touch * to come
- 65. Sencha Touch Data model & records Programmatically create toolbar & list
- 66. Whatās in a good framework? Layouts & components Theming & icons Orientation & animation Touch events & scroller Data package MVC framework
- 67. Components Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & ļ¬elds Toolbars & buttons HTML5 - Audio - Video - GeoLocation
- 68. Theming Use CSS3 & SASS - Flexible themes - Highly optimized
- 69. Forms
- 70. Scrolling Momentum/bounce physics Hardware accelerated Throughout all components: - Lists - Carousel - Pickers
- 71. Touch Events Built on native events Abstracted for performance Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop
- 72. Data Package Models, Stores, and Proxies - Associations - Validation - Local & server storage Easily consume web services - JSON/P - XML - YQL
- 73. āThe Kitchen Sinkā http://sencha.com/x/5e
- 74. Implementing Mobile Web Sites|Apps
- 75. Evolving sites for mobile Views HTML, CSS... Controllers Models
- 76. Evolving sites for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
- 77. Mobile detection class ApplicationController < ActionController::Base has_mobile_fu end *.mobile.erb is_mobile_device? in_mobile_view? https://github.com/brendanlim/mobile-fu
- 78. Smart detection & user choice āSwitch to our desktop siteā
- 80. Thematic consistency w3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123
- 82. Then to an app... Desktop Switchers Mobile REST Controllers JSO N Models
- 83. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
- 84. The stack of the present req/res User interface Rendering Business logic Storage
- 85. The stack of the future User interface sync Security Business logic Storage Storage The return of the thick client!
- 86. Do we have time for some code?
- 88. Getting help from the cloud http://i.tinysrc.mobi/http://mysite.com/myimage.png http://tinysrc.net/
- 89. Mobile devices are di erent Geolocation Telephony Camera Messaging And mobile users are different too!
- 90. Going Hybrid
- 91. PhoneGap A platform that allows you to author native applications with web technologies and get access to device APIs http://phonegap.com
- 92. +
- 93. Full API list: Accelerometer File Camera Geolocation Compass Media Contacts Network Device Notiļ¬cation Events Storage http://docs.phonegap.com http://www.sencha.com/learn/ Tutorial:Sencha_Touch_PhoneGap
- 94. PhoneGap Build
- 95. A word about app stores (pssst: theyāre an admission of defeat)
- 96. Doing mobile right Everyone loves apps - but native development sucks This is the year of the mobile web - but caveats apply Web technologies are a viable alternative to native apps
- 97. built with Apps vs Web technology
- 98. James Pearce Director, Developer Relations @ jamespearce [email protected]