Is HTML5 Ready for Mobile Cross-Platform App Development?
description
Transcript of Is HTML5 Ready for Mobile Cross-Platform App Development?
![Page 1: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/1.jpg)
© 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
![Page 2: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/2.jpg)
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.
![Page 3: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/3.jpg)
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
![Page 4: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/4.jpg)
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
![Page 5: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/5.jpg)
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
![Page 6: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/6.jpg)
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
![Page 7: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/7.jpg)
Strategy: Growing Mobile HTML5 Ecosystem
7
Libraries
Frameworks
Tools
Knowledge Bases
![Page 8: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/8.jpg)
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
![Page 9: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/9.jpg)
Benefits: Cross-platform Compatibility
9
iOS
BlackBerry
WebOSWindows
Phone
Android
HTML5
![Page 10: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/10.jpg)
Benefits: Form Factor Adjustment
10
![Page 11: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/11.jpg)
Benefits: Cross-device Compatibility
11
The HTC Sense (and standard Android) tab bar
The Samsung Touchwiz tab bar
The Sony Ericsson Timescape tab bar
![Page 12: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/12.jpg)
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
}]
});
![Page 13: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/13.jpg)
Benefits: Graphics Toolkits
13
![Page 14: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/14.jpg)
Benefits: Rapid Application Development Tools
14
![Page 15: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/15.jpg)
Benefits: Debuggers and Emulators
15
![Page 16: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/16.jpg)
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
![Page 17: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/17.jpg)
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
![Page 18: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/18.jpg)
Core HTML5 Features: UI Elements
18
![Page 19: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/19.jpg)
Core HTML5 Features: CSS3
19
![Page 20: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/20.jpg)
Core HTML5 Features: Non-UI Features
2
0
Geo-location Web SocketsWeb Storage
![Page 21: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/21.jpg)
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;}
![Page 22: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/22.jpg)
Challenges: Proprietary Android UI Layers
22
Correct edit box styling
Edit box style reset by HTC Sense
![Page 23: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/23.jpg)
Challenges: Browser Memory Management
23
Heavy and repeated jQuery animation
Frequent loading and releasing DOM fragments
Frequent handling complex Ajax responses
![Page 24: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/24.jpg)
Future Directions of HTML5 in Mobile
WebGL
IndexedDB
Web Workers
Push Notifications
Camera and Device Access
24
![Page 25: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/25.jpg)
Is HTML5 Ready for Mobile Cross-platform?
25
![Page 26: Is HTML5 Ready for Mobile Cross-Platform App Development?](https://reader034.fdocuments.us/reader034/viewer/2022042714/54fc15f84a7959434c8b5591/html5/thumbnails/26.jpg)
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 [email protected]