The Mobile Web - HTML5 on mobile devices
-
Upload
wesleyhales -
Category
Technology
-
view
1.727 -
download
5
description
Transcript of The Mobile Web - HTML5 on mobile devices
![Page 1: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/1.jpg)
The Mobile Web - HTML5 on mobile devicesHTML5 User Group - AtlantaBy: Wesley Hales@wesleyhales
![Page 2: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/2.jpg)
• Senior Developer at Red Hat
• W3C Member
• JSR 301/329 Rep.
• HTML5 User Group Founder
• html5rocks.com, DZone Refcard, and author of many other articles around the web.
Wesley Hales@wesleyhales
![Page 3: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/3.jpg)
Mobile Web Apps Live (or DIE) by the UI
![Page 4: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/4.jpg)
![Page 5: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/5.jpg)
Top 5 Best Practices1) 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 apps5) HTML5 Form attributes and input styles (paceholder, pattern, etc...)
When working with HTML5
![Page 6: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/6.jpg)
Device & Feature Detection
![Page 7: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/7.jpg)
• MobileESP (server-side)
• Modernizr (client-side)
• CSS3 Media Queries
Device & Feature Detection
![Page 8: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/8.jpg)
• Parsing the USER_AGENT
• WURFL APIs
Device Detection
![Page 9: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/9.jpg)
WURFLWireless Universal Resource File
• Up to date list of all mobile devices
• Available as XML file
• Wrappers for most languages
![Page 10: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/10.jpg)
• <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">
Modernizr
Feature Detection
![Page 11: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/11.jpg)
• Adds classnames of available features to DOM
• Allows use of browser features with fallback options
• shiv & polyfills
Modernizr
Feature Detection
![Page 12: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/12.jpg)
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;}
![Page 13: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/13.jpg)
The Mobile Web
![Page 14: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/14.jpg)
Mobile Platforms
Mobile Frameworks
And many more...
![Page 15: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/15.jpg)
Todays Focus
![Page 16: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/16.jpg)
Mobile Basics
• Hardware Acceleration
• Page Transitions: Sliding, Flipping, and Rotating
• Fetching and Caching
• Network Detection
• Debugging & Profiling
![Page 17: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/17.jpg)
Hardware Acceleration
• Page Layout
• Memory allocation (Compositing)
• Power Consumption
• Conflicts
![Page 18: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/18.jpg)
Hardware AccelerationDemo
![Page 19: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/19.jpg)
Hardware AccelerationUnderstanding Page Layout
![Page 20: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/20.jpg)
Hardware AccelerationUnderstanding Page Layout
![Page 21: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/21.jpg)
Hardware AccelerationSliding and Staging
![Page 22: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/22.jpg)
Hardware AccelerationBased on device
![Page 23: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/23.jpg)
Hardware AccelerationCompositing Visuals
• Safari Command Line Flags
• Chrome about:flags
![Page 24: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/24.jpg)
Hardware AccelerationCompositing Visuals
• Safari/WebKit Command Line Flags$> export CA_COLOR_OPAQUE=1$> export CA_LOG_MEMORY_USAGE=1$> /Applications/Safari.app/Contents/MacOS/Safari
![Page 25: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/25.jpg)
Hardware AccelerationCompositing Visuals - WebKit CoreAnimation
![Page 26: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/26.jpg)
Hardware AccelerationCompositing Visuals
• Chrome about:flags
![Page 27: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/27.jpg)
Hardware AccelerationKeep In Mind
• Don’t composite every DOM element
• When you make use of the GPU, you’realso using the battery
• Beware of overlapping acceleration
![Page 28: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/28.jpg)
DemoFetching and Caching
![Page 29: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/29.jpg)
Fetching and Caching
• Pre-fetch content for smooth transitions
• Setup for offline capability
• Concurrent Ajax
![Page 30: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/30.jpg)
Caching
appCache unlimited 10MB
Web Storage 5MB 5MB
by device
![Page 31: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/31.jpg)
Fetching and Caching
Fetching content and parsing the DOM
![Page 32: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/32.jpg)
Fetching and Caching
Fetching content and parsing the DOM
![Page 33: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/33.jpg)
Fetching and Caching
External page parsed via AJAX call:
![Page 34: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/34.jpg)
Fetching and CachinglocalStorage used within the AJAX call:
![Page 35: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/35.jpg)
innerHTML()
![Page 36: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/36.jpg)
Douglas Crockford - Javascript The Good Parts
“If the HTML text contains a <script> tag or its equivalent, then an evil script will run. ..
![Page 37: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/37.jpg)
Java 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...
Not only is innerHTML() bad...
![Page 38: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/38.jpg)
Java Mobile Web Settings
• Stops working randomly
• It’s a 4 year old problem in Safari
• there are hacks to workaround
• setTimeout(‘yuck’)
Beware of innerHTML on
![Page 39: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/39.jpg)
Java Mobile Web Settings• get the xhr.responseText
• send it to an automatically generated HTML5 sandbox iframe
• pull from the iframe DOM and use document.adoptNode
The Solution
![Page 40: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/40.jpg)
Java Mobile Web SettingsThe 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;}
![Page 41: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/41.jpg)
Java Mobile Web SettingsThe Solution
var frame = getFrame();frame.write(responseText);
![Page 42: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/42.jpg)
Java Mobile Web SettingsThe Solution
document.getElementById(elementId).appendChild(document.adoptNode(incomingElements));
![Page 43: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/43.jpg)
Fetching and CachingRecap
• 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()
![Page 44: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/44.jpg)
Demo
Network Detection and Handling
![Page 45: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/45.jpg)
• Offline access through applicationCache
• Offline/Online events
• Content fetching based on network speed
Network Detection and Handling
![Page 46: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/46.jpg)
applicationCache
appCache unlimited 10MB
by device
![Page 47: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/47.jpg)
Offline AccessappCache Mime Mappings
<mime-mapping> <extension>appcache</extension> <mime-type>text/cache-manifest</mime-type></mime-mapping>
web.xml
Apache config
![Page 48: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/48.jpg)
applicationCachedemo.appcache
![Page 49: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/49.jpg)
applicationCachePage usage
Updating the cache
![Page 50: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/50.jpg)
Offline & Online eventsevent listeners
![Page 51: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/51.jpg)
Offline & Online eventsappCache error event
![Page 52: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/52.jpg)
Fetching based on network speednavigator.connection (The Network Information API)
![Page 53: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/53.jpg)
Fetching based on network speed
WIFI (Asynchronous) Request Timeline
Edge (Synchronous) Request Timeline
![Page 54: The Mobile Web - HTML5 on mobile devices](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bbb9db4c90594278b4d50/html5/thumbnails/54.jpg)
Questions?@wesleyhales
#atlhtml5
Note - All code and demos presented here will be available on October 4, 2011 www.html5rocks.com/en/mobile/optimization-and-performance.html