Is HTML5 Ready for Mobile Cross-Platform App Development?

Is HTML5 Ready for Mobile Cross- Platform 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.2

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 Mobile3

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 20114

Working Draft Candidate Strategy: Active HTML5 Standardization Efforts Recommendation Presentation 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 Data Cross-document messaging, dataset & data-* attributes, getElementsByClassName, New semantic elements, Semantics classList (DOMTokenList), Form validation, JSON Parsing, Data URLs querySelector/querySelectorAll MathML Storage Web Storage - name/value pairs, Offline web applications, File API, IndexedDB Comms Hashchange event, Cross-Origin Resource Sharing, XMLHttpRequest 2, Web Sockets, Web Notifications UI WAI-ARIA Accessibility features, Geolocation, Drag and Drop, Progress & Meter, Datalist element, Touch events, Details & Summary elements, HTML5 form features, Toolbar/context menu Media Video element, Audio element, Ogg/Theora video format, WebM/VP8 video format, MPEG-4/H.264 video format Development web workers, Session history management, Server-sent DOM events5

Not implemented Strategy: Active HTML5 Standardization Efforts Implemented Presentation 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 Data Cross-document messaging, dataset & data-* attributes, getElementsByClassName, New semantic elements, Semantics classList (DOMTokenList), Form validation, JSON Parsing, Data URLs querySelector/querySelectorAll MathML Storage Web Storage - name/value pairs, Offline web applications, File API, IndexedDB Comms Hashchange event, Cross-Origin Resource Sharing, XMLHttpRequest 2, Web Sockets, Web Notifications UI WAI-ARIA Accessibility features, Geolocation, Drag and Drop, Progress & Meter, Datalist element, Touch events, Details & Summary elements, HTML5 form features, Toolbar/context menu Media Video element, Audio element, Ogg/Theora video format, WebM/VP8 video format, MPEG-4/H.264 video format Development web workers, Session history management, Server-sent DOM events6

Strategy: Growing Mobile HTML5 Ecosystem Libraries Frameworks Tools Knowledge Bases7

Strategy: Distribution Options HTML HTML Codebase Codebase Native Wrapper Web Server Uploaded to App Store Downloaded to Device App Store Downloaded to Device Mobile Mobile Device Browser8

Benefits: Cross-platform Compatibility iOS Android BlackBerry HTML5 Windows Phone WebOS9

Benefits: Form Factor Adjustment10

Benefits: Cross-device Compatibility The HTC Sense (and The Samsung The Sony Ericsson standard Android) tab bar Touchwiz tab bar Timescape tab bar11

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 Toolkits13

Benefits: Rapid Application Development Tools14

Benefits: Debuggers and Emulators15

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

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 Direct update requires Upgrade flexibility High proprietary mechanism Installation user Via mobile browser, Downloaded from app experience QR code store Branded on-device Yes Yes presence Offline availability Yes Yes Monetization No app store fees App store fees apply Crawl-ability Possible Not possible17

Core HTML5 Features: UI Elements18

Core HTML5 Features: CSS319

Core HTML5 Features: Non-UI Features Geo-location Web Storage Web Sockets20

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 Sense22

Challenges: Browser Memory Management Heavy and repeated jQuery animation Frequent loading and releasing DOM fragments Frequent handling complex Ajax responses23

Future Directions of HTML5 in Mobile WebGL IndexedDB Web Workers Push Notifications Camera and Device Access24

Is HTML5 Ready for Mobile Cross-platform?25

For More Information 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.com26

Is HTML5 Ready for Mobile Cross-Platform App Development?

by Worklight on Aug 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Is HTML5 Ready for Mobile Cross-Platform App Development? — Presentation Transcript