The Mobile Web - HTML5 on mobile devices

The Mobile Web - HTML5 on mobile devices
HTML5 User Group - Atlanta
By: Wesley Hales
@wesleyhales

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.

Mobile Web Apps Live (or DIE) by the UI

Top 5 Best Practices
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...)

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 ﬁle
• Wrappers for most languages

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">

Feature Detection
Modernizr
• Adds classnames of available
features to DOM

• Allows use of browser features with
fallback options

• shiv & polyﬁlls

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;
}

Mobile Platforms

Mobile Frameworks

And many more...

Mobile Basics

• Hardware Acceleration
• Page Transitions: Sliding, Flipping, and Rotating
• Fetching and Caching
• Network Detection
• Debugging & Proﬁling

Hardware Acceleration

• Page Layout
• Memory allocation (Compositing)
• Power Consumption
• Conﬂicts

Demo

Understanding Page Layout

Sliding and Staging

Based on device

Compositing Visuals

• Safari Command Line Flags
• Chrome about:ﬂags

Compositing Visuals

• Safari/WebKit Command Line Flags
$> export CA_COLOR_OPAQUE=1
$> export CA_LOG_MEMORY_USAGE=1
$> /Applications/Safari.app/Contents/MacOS/Safari

Compositing Visuals - WebKit CoreAnimation

Compositing Visuals

• Chrome about:ﬂags

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

Fetching and Caching
Demo


• Pre-fetch content for smooth transitions
• Setup for offline capability
• Concurrent Ajax

Caching
by device

appCache unlimited 10MB

Web Storage 5MB 5MB


Fetching content and parsing the DOM

External page parsed via AJAX call:

localStorage used within the AJAX call:

“If the HTML text contains a <script> tag or its
equivalent, then an evil script will run. ..

Douglas Crockford - Javascript The Good Parts

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...

Java Mobile Web Settings
Beware of innerHTML on

• Stops working randomly
• It’s a 4 year old problem in Safari
• there are hacks to workaround
• setTimeout(‘yuck’)

The Solution

• get the xhr.responseText
• send it to an automatically generated
HTML5 sandbox iframe

• pull from the iframe DOM and use
document.adoptNode

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;
}

The Solution

var frame = getFrame();
frame.write(responseText);

The Solution
document.
getElementById(elementId).
appendChild(document.adoptNode
(incomingElements));

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()

Network Detection and Handling
Demo

Network Detection and Handling

• Offline access through applicationCache
• Offline/Online events
• Content fetching based on network speed

applicationCache
by device

appCache unlimited 10MB

Offline Access
appCache Mime Mappings
web.xml
<mime-mapping>
<extension>appcache</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

Apache conﬁg

applicationCache
demo.appcache

applicationCache
Page usage

Updating the cache

Offline & Online events
event listeners

Offline & Online events
appCache error event

Fetching based on network speed
navigator.connection (The Network Information API)

Fetching based on network speed

WIFI (Asynchronous) Request Timeline

Edge (Synchronous) Request Timeline

#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

The Mobile Web - HTML5 on mobile devices

Recommended

More Related Content

What's hot (20)

Similar to The Mobile Web - HTML5 on mobile devices (20)

More from Wesley Hales (6)

Recently uploaded (20)

The Mobile Web - HTML5 on mobile devices