Is HTML5 Ready for Mobile CrossPlatform App Development?

WorkLight Webinar Series

2011 Worklight, Inc. All rights reserved. The information contained herein is the proprietary and confidential information of Worklight.

Worklight Introduction
Worklight mobile app platform and tools enable the development, integration and management of HTML5, hybrid and native applications for smartphones and tablets.

Agenda
Strategic Considerations HTML5 in the Enterprise Key Benefits for Mobile App Initiatives Useful HTML5 Mobile Features Challenges in Cross-platform App Development Future Directions for HTML5 in Mobile

Strategy: Mobile Vendors Committed to HTML5

Apple created WebKit, a complete open-source HTML5 rendering engine that is the heart of the Safari web browser used in all our products New open standards created in

the mobile era, such as HTML5, will win on mobile devices

Steve Jobs, Apple CEO, Apr 2010

"It looks to me like HTML5 will eventually become a way almost all applications are built, including those on new phones.
Eric Schmidt, Google Chairman, Feb 2011

"Our commitment to supporting HTML5 and Adobe AIR development has resonated and spurred developers to create fun and innovative applications for
BlackBerry PlayBook users"
David Yach, CTO for software at RIM, Apr 2010

"IE9 is a great example of bringing assets together from across Microsoft to improve the Windows Phone experience. We need to give people the full web, the full internet

like they expect with the PC."

Steve Ballmer, Microsoft, Feb 2011

Our whole belief is that the entire experience is going to go to HTML5."

Phil McKinney, CTO for personal systems group at HP, Jun 2011

Strategy: Active HTML5 Standardization Efforts

Presentation

Working Draft Candidate Recommendation

CSS3 Word-wrap, contenteditable attribute (basic support), @font-face Web fonts, Canvas (basic support), CSS3 Transforms, Text API for Canvas, rem (root em) units, CSS3 Text-shadow, Flexible Box Layout Module, SVG effects for HTML, CSS Gradients, WOFF - Web Open Font Format, Ruby annotation, SVG in HTML img element, CSS3 Transitions, Inline SVG in HTML5, CSS3 Animation, calc() as CSS unit value, CSS3 3D Transforms, CSS3 objectfit/object-position, CSS Grid Layout, TTF/OTF - TrueType and OpenType font support, WebGL - 3D Canvas graphics CSS3 Box-sizing, CSS3 Media Queries, CSS3 selectors, CSS3 Border-radius (rounded corners), CSS3 Box-shadow, CSS3 Multiple backgrounds, CSS3 Background-image options, CSS3 Multiple column layout, SVG in CSS backgrounds, CSS3 Border images CSS position:fixed, CSS3 opacity, CSS3 Colors, SVG (basic support), SVG filters, SVG SMIL animation, SVG fonts

Data Semantics

Cross-document messaging, dataset & data-* attributes, getElementsByClassName, New semantic elements, classList (DOMTokenList), Form validation, JSON Parsing, Data URLs querySelector/querySelectorAll MathML

Storage Comms

Web Storage - name/value pairs, Offline web applications, File API, IndexedDB Hashchange event, Cross-Origin Resource Sharing, XMLHttpRequest 2, Web Sockets, Web Notifications WAI-ARIA Accessibility features, Geolocation, Drag and Drop, Progress & Meter, Datalist element, Touch events, Details & Summary elements, HTML5 form features, Toolbar/context menu Video element, Audio element, Ogg/Theora video format, WebM/VP8 video format, MPEG-4/H.264 video format web workers, Session history management, Server-sent DOM events

UI
Media Development
5

Strategy: Active HTML5 Standardization Efforts

Presentation

Not implemented Implemented

CSS3 Word-wrap, contenteditable attribute (basic support), @font-face Web fonts, Canvas (basic support), CSS3 Transforms, Text API for Canvas, rem (root em) units, CSS3 Text-shadow, Flexible Box Layout Module, SVG effects for HTML, CSS Gradients, WOFF - Web Open Font Format, Ruby annotation, SVG in HTML img element, CSS3 Transitions, Inline SVG in HTML5, CSS3 Animation, calc() as CSS unit value, CSS3 3D Transforms, CSS3 objectfit/object-position, CSS Grid Layout, TTF/OTF - TrueType and OpenType font support, WebGL - 3D Canvas graphics CSS3 Box-sizing, CSS3 Media Queries, CSS3 selectors, CSS3 Border-radius (rounded corners), CSS3 Box-shadow, CSS3 Multiple backgrounds, CSS3 Background-image options, CSS3 Multiple column layout, SVG in CSS backgrounds, CSS3 Border images CSS position:fixed, CSS3 opacity, CSS3 Colors, SVG (basic support), SVG filters, SVG SMIL animation, SVG fonts

Data Semantics

Cross-document messaging, dataset & data-* attributes, getElementsByClassName, New semantic elements, classList (DOMTokenList), Form validation, JSON Parsing, Data URLs querySelector/querySelectorAll MathML

Storage Comms

Web Storage - name/value pairs, Offline web applications, File API, IndexedDB Hashchange event, Cross-Origin Resource Sharing, XMLHttpRequest 2, Web Sockets, Web Notifications WAI-ARIA Accessibility features, Geolocation, Drag and Drop, Progress & Meter, Datalist element, Touch events, Details & Summary elements, HTML5 form features, Toolbar/context menu Video element, Audio element, Ogg/Theora video format, WebM/VP8 video format, MPEG-4/H.264 video format web workers, Session history management, Server-sent DOM events

UI
Media Development
6

Strategy: Growing Mobile HTML5 Ecosystem

Libraries

Frameworks

Tools

Knowledge Bases

Strategy: Distribution Options

HTML Codebase
Web Server

HTML Codebase
Native Wrapper

Uploaded to App Store Downloaded to Device

App Store

Downloaded to Device
Mobile Browser
Mobile Device

Benefits: Cross-platform Compatibility

iOS BlackBerry

Android

HTML5
Windows Phone
9

WebOS

Benefits: Form Factor Adjustment

10

Benefits: Cross-device Compatibility

The HTC Sense (and standard Android) tab bar The Samsung Touchwiz tab bar The Sony Ericsson Timescape tab bar

11

Benefits: Development Tools

<ul data-role="listview"> <li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">France</a> <span class="ui-li-count">4</span></li> <li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Germany</a> <span class="ui-li-count">4</span></li> </ul>

var listStore = { data: [ {firstName: 'Alana', lastName: 'Wiersma'}, ]} var myList = new Ext.Container({ items: [{ height: 500, xtype: 'list', store: listStore, itemTpl: '<div class="contact"> {firstName} {lastName} </div>', grouped: true, indexBar: true }] });

12

Benefits: Graphics Toolkits

13

Benefits: Rapid Application Development Tools

14

Benefits: Debuggers and Emulators

15

Benefits: Delivering HTML5 Apps as Mobile Web Apps

Mobile Web App
1 App store presence App store approval Upgrade flexibility Installation user experience Branded on-device presence Offline availability Monetization Crawl-ability Only in web app stores None High 2 Via mobile browser, QR code Yes Yes No app store fees Possible 3

16

Benefits: Delivering HTML5 Apps as Hybrid Apps

Mobile Web App
App store presence App store approval Upgrade flexibility Installation user experience Branded on-device presence Offline availability Monetization Crawl-ability Only in web app stores None High Via mobile browser, QR code Yes Yes No app store fees Possible

Hybrid App
In leading app stores Required Direct update requires proprietary mechanism Downloaded from app store Yes Yes App store fees apply Not possible

17

Core HTML5 Features: UI Elements

18

Core HTML5 Features: CSS3

19

Core HTML5 Features: Non-UI Features

Geo-location Web Storage Web Sockets

2 0

Challenges: Device-specific HTML5 Implementations

Browser-specific CSS prefix Web Sockets Video formats Positioned:fixed Cache size
.border9 { border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px; -khtml-border-radius: 9px; }

21

Challenges: Proprietary Android UI Layers

Correct edit box styling

Edit box style reset by HTC Sense

22

Challenges: Browser Memory Management

Heavy and repeated jQuery animation

Frequent loading and releasing DOM fragments

Frequent handling complex Ajax responses

23

Future Directions of HTML5 in Mobile

WebGL IndexedDB Web Workers Push Notifications Camera and Device Access

24

Is HTML5 Ready for Mobile Cross-platform?

25

For More Information

Resource Location

30-day Software Trial Online Training Documentation Whitepapers

Webinars Additional Info

www.worklight.com/download www.worklight.com/resources/training-modules www.worklight.com/resources/product-documentation www.worklight.com/resources/datasheets-and-whitepapers

www.worklight.com/resources/webinars-and-tools info@worklight.com

26