Is HTML5 Ready for Mobile Cross-Platform App Development?

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

Is HTML5 Ready for Mobile Cross-Platform App Development?

WorkLight Webinar Series

Worklight Introduction

2

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

3

Strategy: Mobile Vendors Committed to HTML5

4

"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

"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 whole belief is that the entire experience is going to go to HTML5."Phil McKinney, CTO for personal systems group at HP, Jun 2011

“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

Strategy: Active HTML5 Standardization Efforts

5

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 object-fit/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

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

querySelector/querySelectorAll MathML

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

Presentation

Data Semantics

Storage

Comms

UI

Media

Development

Working DraftCandidate

Recommendation

Strategy: Active HTML5 Standardization Efforts

6

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 object-fit/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

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

querySelector/querySelectorAll MathML

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

Presentation

Data Semantics

Storage

Comms

UI

Media

Development

Not implementedImplemented

Strategy: Growing Mobile HTML5 Ecosystem

7

Libraries

Frameworks

Tools

Knowledge Bases

Native Wrapper

Strategy: Distribution Options

8

HTML Codebase

Mobile Browser

Web Server

HTML Codebase

Mobile Device

App Store

Uploaded to App Store

Downloaded to Device

Downloaded to Device

Benefits: Cross-platform Compatibility

9

iOS

BlackBerry

WebOSWindows

Phone

Android

HTML5

Benefits: Form Factor Adjustment

10

Benefits: Cross-device Compatibility

11

The HTC Sense (and standard Android) tab bar

The Samsung Touchwiz tab bar

The Sony Ericsson Timescape tab bar

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>

12

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

}]

});

Benefits: Graphics Toolkits

13

Benefits: Rapid Application Development Tools

14

Benefits: Debuggers and Emulators

15

Benefits: Delivering HTML5 Apps as Mobile Web Apps

16

Mobile Web App

App store presence Only in web app stores

App store approval None

Upgrade flexibility High

Installation user experience

Via mobile browser, QR code

Branded on-device presence

Yes

Offline availability Yes

Monetization No app store fees

Crawl-ability Possible

1

2

3

Benefits: Delivering HTML5 Apps as Hybrid Apps

Mobile Web App Hybrid App

App store presence Only in web app stores In leading app stores

App store approval None Required

Upgrade flexibility HighDirect update requires proprietary mechanism

Installation user experience

Via mobile browser, QR code

Downloaded from app store

Branded on-device presence

Yes Yes

Offline availability Yes Yes

Monetization No app store fees App store fees apply

Crawl-ability Possible Not possible

17

Core HTML5 Features: UI Elements

18

Core HTML5 Features: CSS3

19

Core HTML5 Features: Non-UI Features

2

0

Geo-location Web SocketsWeb Storage

Challenges: Device-specific HTML5 Implementations

Browser-specific CSS prefix

Web Sockets

Video formats

Positioned:fixed

Cache size

21

.border9 {border-radius: 9px;-webkit-border-radius: 9px;-moz-border-radius: 9px;-khtml-border-radius: 9px;}

Challenges: Proprietary Android UI Layers

22

Correct edit box styling

Edit box style reset by HTC Sense

Challenges: Browser Memory Management

23

Heavy and repeated jQuery animation

Frequent loading and releasing DOM fragments

Frequent handling complex Ajax responses

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

26

Resource Location

30-day Software Trial www.worklight.com/download

Online Training www.worklight.com/resources/training-modules

Documentation www.worklight.com/resources/product-documentation

Whitepapers www.worklight.com/resources/datasheets-and-whitepapers

Webinars www.worklight.com/resources/webinars-and-tools

Additional Info info@worklight.com