Post on 08-May-2015
description
transcript
The Mobile Web - HTML5 on mobile devicesHTML5 User Group - AtlantaBy: Wesley Hales@wesleyhales
• 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
Mobile Web Apps Live (or DIE) by the UI
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
Device & Feature Detection
• MobileESP (server-side)
• Modernizr (client-side)
• CSS3 Media Queries
Device & Feature Detection
• Parsing the USER_AGENT
• WURFL APIs
Device Detection
WURFLWireless Universal Resource File
• Up to date list of all mobile devices
• Available as XML file
• Wrappers for most languages
• <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
• Adds classnames of available features to DOM
• Allows use of browser features with fallback options
• shiv & polyfills
Modernizr
Feature Detection
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;}
The Mobile Web
Mobile Platforms
Mobile Frameworks
And many more...
Todays Focus
Mobile Basics
• Hardware Acceleration
• Page Transitions: Sliding, Flipping, and Rotating
• Fetching and Caching
• Network Detection
• Debugging & Profiling
Hardware Acceleration
• Page Layout
• Memory allocation (Compositing)
• Power Consumption
• Conflicts
Hardware AccelerationDemo
Hardware AccelerationUnderstanding Page Layout
Hardware AccelerationUnderstanding Page Layout
Hardware AccelerationSliding and Staging
Hardware AccelerationBased on device
Hardware AccelerationCompositing Visuals
• Safari Command Line Flags
• Chrome about:flags
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
Hardware AccelerationCompositing Visuals - WebKit CoreAnimation
Hardware AccelerationCompositing Visuals
• Chrome about:flags
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
DemoFetching and Caching
Fetching and Caching
• Pre-fetch content for smooth transitions
• Setup for offline capability
• Concurrent Ajax
Caching
appCache unlimited 10MB
Web Storage 5MB 5MB
by device
Fetching and Caching
Fetching content and parsing the DOM
Fetching and Caching
Fetching content and parsing the DOM
Fetching and Caching
External page parsed via AJAX call:
Fetching and CachinglocalStorage used within the AJAX call:
innerHTML()
Douglas Crockford - Javascript The Good Parts
“If the HTML text contains a <script> tag or its equivalent, then an evil script will run. ..
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...
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
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
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;}
Java Mobile Web SettingsThe Solution
var frame = getFrame();frame.write(responseText);
Java Mobile Web SettingsThe Solution
document.getElementById(elementId).appendChild(document.adoptNode(incomingElements));
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()
Demo
Network Detection and Handling
• Offline access through applicationCache
• Offline/Online events
• Content fetching based on network speed
Network Detection and Handling
applicationCache
appCache unlimited 10MB
by device
Offline AccessappCache Mime Mappings
<mime-mapping> <extension>appcache</extension> <mime-type>text/cache-manifest</mime-type></mime-mapping>
web.xml
Apache config
applicationCachedemo.appcache
applicationCachePage usage
Updating 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 speed
WIFI (Asynchronous) Request Timeline
Edge (Synchronous) Request Timeline
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