Download as PDF, PPTX
Uploaded byWesley Hales
The Mobile Web - HTML5 on mobile devices
Wesley Hales discusses best practices for developing HTML5 mobile applications, emphasizing the importance of performance and user interface design. Key recommendations include using client-side databases, CSS transitions, and modern detection techniques for devices and features. The presentation covers hardware acceleration, caching strategies, and network detection for optimizing mobile web experiences.
The Mobile Web - HTML5 on mobile devices
- 1. The Mobile Web- HTML5 on mobile devices HTML5 User Group - Atlanta By: Wesley Hales @wesleyhales
- 2. Wesley Hales • SeniorDeveloper at Red Hat @w esle • W3C Member yha les • JSR 301/329 Rep. • HTML5 User Group Founder • html5rocks.com, DZone Refcard, and author of many other articles around the web.
- 3. Mobile Web AppsLive (or DIE) by the UI
- 5. Top 5 BestPractices When working with HTML5 1) Use client side DBs instead of server round trips 2) Use CSS transitions instead of JavaScript animations (Enable hardware acceleration) 3) Boost performance with JavaScript 1.6 (no more "for loops") 4) Use cache manifests for live sites, not just offline apps 5) HTML5 Form attributes and input styles (paceholder, pattern, etc...)
- 6. Device & FeatureDetection
- 7. Device & FeatureDetection • MobileESP (server-side) • Modernizr (client-side) • CSS3 Media Queries
- 8. Device Detection • Parsingthe USER_AGENT • WURFL APIs
- 9. WURFL Wireless Universal Resource File • Up to date list of all mobile devices • Available as XML file • Wrappers for most languages
- 10. Feature Detection Modernizr •<html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface">
- 11. Feature Detection Modernizr • Adds classnames of available features to DOM • Allows use of browser features with fallback options • shiv & polyfills
- 12. Feature Detection “Cascading” thedetection: #nice { background: url(background-one.png) top left repeat-x; background: url(background-one.png) top left repeat-x, url(background-two.png) bottom left repeat-x; } Using Modernizr: #nice { background: url(background-one.png) top left repeat-x; } .multiplebgs #nice { background: url(background-one.png) top left repeat-x, url(background-two.png) bottom left repeat-x; }
- 13.
- 14. Mobile Platforms Mobile Frameworks And many more...
- 15.
- 16. Mobile Basics • Hardware Acceleration • Page Transitions: Sliding, Flipping, and Rotating • Fetching and Caching • Network Detection • Debugging & Profiling
- 17. Hardware Acceleration • PageLayout • Memory allocation (Compositing) • Power Consumption • Conflicts
- 18.
- 19. Hardware Acceleration Understanding Page Layout
- 20. Hardware Acceleration Understanding Page Layout
- 21. Hardware Acceleration Sliding and Staging
- 22. Hardware Acceleration Based on device
- 23. Hardware Acceleration Compositing Visuals • Safari Command Line Flags • Chrome about:flags
- 24. Hardware Acceleration Compositing Visuals • Safari/WebKit Command Line Flags $> export CA_COLOR_OPAQUE=1 $> export CA_LOG_MEMORY_USAGE=1 $> /Applications/Safari.app/Contents/MacOS/Safari
- 25. Hardware Acceleration Compositing Visuals- WebKit CoreAnimation
- 26. Hardware Acceleration Compositing Visuals • Chrome about:flags
- 27. Hardware Acceleration Keep In Mind • Don’t composite every DOM element • When you make use of the GPU, you’re also using the battery • Beware of overlapping acceleration
- 28. Fetching and Caching Demo
- 29. Fetching and Caching •Pre-fetch content for smooth transitions • Setup for offline capability • Concurrent Ajax
- 30. Caching by device appCache unlimited 10MB Web Storage 5MB 5MB
- 31. Fetching and Caching Fetchingcontent and parsing the DOM
- 32. Fetching and Caching Fetchingcontent and parsing the DOM
- 33. Fetching and Caching Externalpage parsed via AJAX call:
- 34. Fetching and Caching localStorageused within the AJAX call:
- 35.
- 36. “If the HTMLtext contains a <script> tag or its equivalent, then an evil script will run. .. Douglas Crockford - Javascript The Good Parts
- 37. Java only isinnerHTML() bad... Not Mobile Web Settings • Causes browser memory leaks • You don’t get a reference to the element you just created • Problems with some elements setting their innerHTML • And it fails on iOS...
- 38. Java Mobile WebSettings Beware of innerHTML on • Stops working randomly • It’s a 4 year old problem in Safari • there are hacks to workaround • setTimeout(‘yuck’)
- 39. Java Mobile WebSettings The Solution • get the xhr.responseText • send it to an automatically generated HTML5 sandbox iframe • pull from the iframe DOM and use document.adoptNode
- 40. Java Mobile WebSettings The Solution function getFrame() { var frame = document.getElementById("temp-frame"); if (!frame) { // create frame frame = document.createElement("iframe"); frame.setAttribute("id", "temp-frame"); frame.setAttribute("name", "temp-frame"); frame.setAttribute("seamless", ""); frame.setAttribute("sandbox", ""); frame.style.display = 'none'; document.documentElement.appendChild(frame); } return frame.contentDocument; }
- 41. Java Mobile WebSettings The Solution var frame = getFrame(); frame.write(responseText);
- 42. Java Mobile WebSettings The Solution document. getElementById(elementId). appendChild(document.adoptNode (incomingElements));
- 43. Fetching and Caching Recap • Get all fetchable links on the parent page • Concurrently get the external pages • Cache pages with localStorage • Do not use innerHTML • Write fetched content into iframe • Place it into parent using adoptNode()
- 44. Network Detection andHandling Demo
- 45. Network Detection andHandling • Offline access through applicationCache • Offline/Online events • Content fetching based on network speed
- 46. applicationCache by device appCache unlimited 10MB
- 47. Offline Access appCache Mime Mappings web.xml <mime-mapping> <extension>appcache</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping> Apache config
- 48.
- 49.
- 50. Offline & Onlineevents event listeners
- 51. Offline & Onlineevents appCache error event
- 52. Fetching based onnetwork speed navigator.connection (The Network Information API)
- 53. Fetching based onnetwork speed WIFI (Asynchronous) Request Timeline Edge (Synchronous) Request Timeline
- 54. #atlhtml5 Questions? @wesleyhales Note - All code and demos presented here will be available on October 4, 2011 www.html5rocks.com/en/mobile/optimization-and-performance.html