The HTML5 Solution to Ajax Pitfalls on Mobile Devices.AT&T Mobile App Hackathon - AtlantaSpeaker: Wesley Hales@wesleyhales

Saturday, September 10, 2011

• Senior Developer at Red Hat

• W3C Member

• HTML5 User Group Founder

• html5rocks.com, DZone Refcard, and author of many other articles around the web.

Wesley Hales@wesleyhales

Saturday, September 10, 2011

Saturday, September 10, 2011

innerHTML()

Saturday, September 10, 2011

Douglas Crockford - Javascript The Good Parts

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

Saturday, September 10, 2011

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

Saturday, September 10, 2011

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

Saturday, September 10, 2011

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

Saturday, September 10, 2011

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

Saturday, September 10, 2011

Java Mobile Web SettingsThe Solution

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

Saturday, September 10, 2011

Java Mobile Web SettingsThe Solution

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

Saturday, September 10, 2011

Mobile Web Apps Live (or DIE) by the UIQuestions?

Saturday, September 10, 2011