0
The Mobile Web - HTML5 on mobile devicesHTML5 User Group - AtlantaBy: Wesley Hales@wesleyhales
Wesley Hales• Senior Developer at Red Hat           @w                                          esle• W3C Member          ...
Mobile Web Apps Live (or DIE) by the UI
Top 5 Best Practices          When working with HTML51) Use client side DBs instead of server round trips 2) Use CSS trans...
Device & Feature Detection
Device & Feature Detection • MobileESP (server-side) • Modernizr (client-side) • CSS3 Media Queries
Device Detection• Parsing the USER_AGENT• WURFL APIs
WURFL               Wireless Universal Resource File• Up to date list of all mobile devices• Available as XML file• Wrapper...
Feature Detection Modernizr• <html class="js canvas canvastext  no-geolocation rgba hsla  multiplebgs borderimage  borderr...
Feature Detection  Modernizr• Adds classnames of available  features to DOM• Allows use of browser features with  fallback...
Feature Detection“Cascading” the detection:#nice {    background: url(background-one.png) top left repeat-x;    background...
The Mobile Web
Mobile PlatformsMobile Frameworks And many more...
Todays Focus
Mobile                   Basics• Hardware Acceleration• Page Transitions: Sliding, Flipping, and Rotating• Fetching and Ca...
Hardware Acceleration• Page Layout• Memory allocation (Compositing)• Power Consumption• Conflicts
Hardware Acceleration         Demo
Hardware Acceleration    Understanding Page Layout
Hardware Acceleration    Understanding Page Layout
Hardware Acceleration      Sliding and Staging
Hardware Acceleration      Based on device
Hardware Acceleration                 Compositing Visuals• Safari Command Line Flags• Chrome about:flags
Hardware Acceleration                     Compositing Visuals• Safari/WebKit Command Line Flags$> export CA_COLOR_OPAQUE=1...
Hardware AccelerationCompositing Visuals - WebKit CoreAnimation
Hardware Acceleration                Compositing Visuals• Chrome about:flags
Hardware Acceleration                      Keep In Mind• Don’t composite every DOM element• When you make use of the GPU, ...
Fetching and Caching       Demo
Fetching and Caching• Pre-fetch content for smooth transitions• Setup for offline capability• Concurrent Ajax
Caching                by device appCache     unlimited     10MBWeb Storage     5MB         5MB
Fetching and CachingFetching content and parsing the DOM
Fetching and CachingFetching content and parsing the DOM
Fetching and CachingExternal page parsed via AJAX call:
Fetching and CachinglocalStorage used within the AJAX call:
innerHTML()
“If the HTML text contains a <script> tag or itsequivalent, then an evil script will run. ..                     Douglas C...
Java only is innerHTML() bad... Not Mobile Web Settings• Causes browser memory leaks• You don’t get a reference to the ele...
Java Mobile Web SettingsBeware of innerHTML on• Stops working randomly• It’s a 4 year old problem in Safari• there are hac...
Java Mobile Web Settings      The   Solution • get the xhr.responseText • send it to an automatically generated   HTML5 sa...
Java Mobile Web Settings      The   Solutionfunction getFrame() {    var frame = document.getElementById("temp-frame");   ...
Java Mobile Web Settings      The   Solution var frame = getFrame(); frame.write(responseText);
Java Mobile Web Settings        The   Solutiondocument.getElementById(elementId).appendChild(document.adoptNode(incomingEl...
Fetching and Caching                       Recap• Get all fetchable links on the parent page• Concurrently get the externa...
Network Detection and Handling            Demo
Network Detection and Handling • Offline access through applicationCache • Offline/Online events • Content fetching based ...
applicationCache             by deviceappCache   unlimited     10MB
Offline Access           appCache Mime Mappingsweb.xml<mime-mapping>  <extension>appcache</extension>  <mime-type>text/cac...
applicationCachedemo.appcache
applicationCachePage usageUpdating the cache
Offline & Online eventsevent listeners
Offline & Online eventsappCache error event
Fetching based on network speednavigator.connection (The Network Information API)
Fetching based on network speedWIFI (Asynchronous) Request TimelineEdge (Synchronous) Request Timeline
#atlhtml5                     Questions?                         @wesleyhalesNote - All code and demos presented here will...
The Mobile Web - HTML5 on mobile devices
Upcoming SlideShare
Loading in...5
×

The Mobile Web - HTML5 on mobile devices

1,726

Published on

This presentation was given to the Atlanta HTML5 User Group on Sept 22, 2011 (http://www.meetup.com/AtlantaHTML5/events/29823121/).

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,726
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "The Mobile Web - HTML5 on mobile devices"

  1. 1. The Mobile Web - HTML5 on mobile devicesHTML5 User Group - AtlantaBy: Wesley Hales@wesleyhales
  2. 2. Wesley Hales• Senior Developer 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. 3. Mobile Web Apps Live (or DIE) by the UI
  4. 4. Top 5 Best Practices When working with HTML51) 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 "forloops")4) Use cache manifests for live sites, not just offline apps5) HTML5 Form attributes and input styles (paceholder,pattern, etc...)
  5. 5. Device & Feature Detection
  6. 6. Device & Feature Detection • MobileESP (server-side) • Modernizr (client-side) • CSS3 Media Queries
  7. 7. Device Detection• Parsing the USER_AGENT• WURFL APIs
  8. 8. WURFL Wireless Universal Resource File• Up to date list of all mobile devices• Available as XML file• Wrappers for most languages
  9. 9. 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">
  10. 10. Feature Detection Modernizr• Adds classnames of available features to DOM• Allows use of browser features with fallback options• shiv & polyfills
  11. 11. Feature Detection“Cascading” the detection:#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;}
  12. 12. The Mobile Web
  13. 13. Mobile PlatformsMobile Frameworks And many more...
  14. 14. Todays Focus
  15. 15. Mobile Basics• Hardware Acceleration• Page Transitions: Sliding, Flipping, and Rotating• Fetching and Caching• Network Detection• Debugging & Profiling
  16. 16. Hardware Acceleration• Page Layout• Memory allocation (Compositing)• Power Consumption• Conflicts
  17. 17. Hardware Acceleration Demo
  18. 18. Hardware Acceleration Understanding Page Layout
  19. 19. Hardware Acceleration Understanding Page Layout
  20. 20. Hardware Acceleration Sliding and Staging
  21. 21. Hardware Acceleration Based on device
  22. 22. Hardware Acceleration Compositing Visuals• Safari Command Line Flags• Chrome about:flags
  23. 23. 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
  24. 24. Hardware AccelerationCompositing Visuals - WebKit CoreAnimation
  25. 25. Hardware Acceleration Compositing Visuals• Chrome about:flags
  26. 26. 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
  27. 27. Fetching and Caching Demo
  28. 28. Fetching and Caching• Pre-fetch content for smooth transitions• Setup for offline capability• Concurrent Ajax
  29. 29. Caching by device appCache unlimited 10MBWeb Storage 5MB 5MB
  30. 30. Fetching and CachingFetching content and parsing the DOM
  31. 31. Fetching and CachingFetching content and parsing the DOM
  32. 32. Fetching and CachingExternal page parsed via AJAX call:
  33. 33. Fetching and CachinglocalStorage used within the AJAX call:
  34. 34. innerHTML()
  35. 35. “If the HTML text contains a <script> tag or itsequivalent, then an evil script will run. .. Douglas Crockford - Javascript The Good Parts
  36. 36. Java only is innerHTML() 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...
  37. 37. Java Mobile Web SettingsBeware of innerHTML on• Stops working randomly• It’s a 4 year old problem in Safari• there are hacks to workaround • setTimeout(‘yuck’)
  38. 38. Java Mobile Web Settings The Solution • get the xhr.responseText • send it to an automatically generated HTML5 sandbox iframe • pull from the iframe DOM and use document.adoptNode
  39. 39. Java Mobile Web Settings The Solutionfunction 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;}
  40. 40. Java Mobile Web Settings The Solution var frame = getFrame(); frame.write(responseText);
  41. 41. Java Mobile Web Settings The Solutiondocument.getElementById(elementId).appendChild(document.adoptNode(incomingElements));
  42. 42. 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()
  43. 43. Network Detection and Handling Demo
  44. 44. Network Detection and Handling • Offline access through applicationCache • Offline/Online events • Content fetching based on network speed
  45. 45. applicationCache by deviceappCache unlimited 10MB
  46. 46. Offline Access appCache Mime Mappingsweb.xml<mime-mapping> <extension>appcache</extension> <mime-type>text/cache-manifest</mime-type></mime-mapping>Apache config
  47. 47. applicationCachedemo.appcache
  48. 48. applicationCachePage usageUpdating the cache
  49. 49. Offline & Online eventsevent listeners
  50. 50. Offline & Online eventsappCache error event
  51. 51. Fetching based on network speednavigator.connection (The Network Information API)
  52. 52. Fetching based on network speedWIFI (Asynchronous) Request TimelineEdge (Synchronous) Request Timeline
  53. 53. #atlhtml5 Questions? @wesleyhalesNote - All code and demos presented here will be available on October 4, 2011 www.html5rocks.com/en/mobile/optimization-and-performance.html
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×