1

HTML5The road to more devices…

Kui HuangApril, 2011oppokui@gmail.com

Topics

Background– Flex– Devices/OS/Browsers– Direction

HTML5/JavaScript Architecture Prototype TODO

2

Mobile OSNative 2006 2007 2008 2009 2010 2011 2012 2015

Symbian 67 63.5 52.4 46.9 37.6 19.2 5.2 0.1

RIM Java 7 9.6 16.6 19.9 16.0 13.4 12.6 11.1

Windows Mobile

C++/C# 14 12.0 11.8 8.7 4.2 5.6 10.8 19.5

iOS Objective-C 0 2.7 8.2 14.4 15.7 19.4 18.9 17.2

Linux 6 9.6 7.6 4.7

Palm OS 5 1.4 1.8

Android Java 0.5 3.9 22.7 38.5 49.2 48.8

WebOS HTML5/C++ 0.7

Others 1 1.2 1.1 0.8 3.8 3.9 3.4 3.3

3

Smartphone Operating System Market Share Percentage

No single operating system has more than 50 percent market share. The future promises more operating system fragmentation, not less…

Tablet2010 2011 2012 2015

iOS 83.9 68.7 63.5 47.1

Android 14.2 19.9 24.4 38.6

MeeGo 0.6 1.1 1.2 1.0

WebOS 0.0 4.0 3.9 3.0

QNX 0.0 5.6 6.6 10.0

Others 1.3 0.7 0.4 0.3

Total market(Thousands of

Units)

17,610 69,780 108,211 294,093

4

Tablet Operating System Market Share Percentage

Source: Gartner (April 2011)

Platform Development EnvironmentPlatform Language IDE Cross platform deployment License

Airplay SDK C, C++ Visual Studio, XCode All native: Android, BREW, iOS (iPhone), Maemo, webOS, Samsung bada, Symbian, Windows Mobile 6.x and desktop, OSX

Commercial licenses; free for Indies to target iPhone

aicheMo Java VS, Eclipse, XCode Android, BREW, iOS (iPhone), Windows Mobile Commercial licenses

Titanium JavaScript Internal SDK Android, iPhone; BlackBerry planned Apache 2.0, commercial

Metismo Java Eclipse Java ME, Android, BREW, BlackBerry, DS, iOS (iPhone), webOS, PSP, Samsung bada, Symbian, Windows Mobile, Windows Phone 7

Commercial licenses

FeedHenry HTML, CSS, JavaScript

Studio includes full IDE and Eclipse Plug-in

Apple iPhone & iPad, Android, Windows Phone 7, Blackberry, Nokia WRT.

Free, Professional and Enterprise Plans available

JMango JMango JMango Flash IDE Java ME, Android, Bada, BlackBerry, iPhone, Windows Mobile 6, Windows Phone 7 available

Free

Mosync SDK C, C++, Lua Eclipse, Visual Studio 2005 and later, MoBuild

Android, Java ME, Moblin, iOS (iPhone), Smartphone 2003, Symbian, Windows Mobile, Blackberry

Free, GPL 2.0; commercial licenses

OpenPlug ActionScript, XML

OpenPlug plugin for Flex Builder

Android, iOS (iPad, iPhone, iPod Touch), Symbian, Windows Mobile

Free & commercial licenses

PhoneGap HTML,CSS, JS

No, 3rd party tools iPhone, Android, BlackBerry, Symbian, Palm MIT license

5

• OS vendors support IDE only for themselves, not list here.• For more, visit http://en.wikipedia.org/wiki/Mobile_application_development

Native app support

Most of them are based on ARM architecture (compile). Advantages:

Many tools support; Use native resources, better performance; Suitable for games, tools, etc.

Disadvantages: The cost to deliver/update the application (App Store approval); Difficult to maintain product version for all customers;

6

Mobile browsers

Mobile browser Engine HTML5

Mobile Safari WebKit Yes

Android Chrome WebKit Yes

Blackberry 6 Browser WebKit Yes

Opera Mobile 11 Opera Presto 2.8 Yes

Opera Mini 11 Opera Presto 2.8 Yes

Windows Phone 7 browser (IE) IE 7 No (support soon at the end of 2011)

Symbian^4 WebKit Yes

MeeGo WebKit (Chromium) Yes

WebOS Browser WebKit Yes

Bada OS 2.0 Browser (Samsung) WebKit Yes

Fennec Firefox Yes

7

WebKit & HTML5 85% in 2009, 92% in 2010

8

Summary

Mobile Devices Mobile OS are dynamically growing, and more fragmentations. Mobile Web is converging on HTML5 and WebKit.

HTML5 is the best choice to support mobile devices. Support mobile WebKit browsers (iOS, Android, …) Support tablet form factor firstly. Build light-weight UI to support more clients

Trade-off on selecting features: simple/easy user interface for small devices

Firstly try HTML5 in data explorer

9

What is HTML5

HTML5 key features New tags (page, Form 2.0…) Canvas/SVG Video Offline and database Worker for multiple threads Geo-location

HTML5 is still in draft Candidate recommendation stage during 2012

10

Canvas vs. SVG

SVG High level Import/Export Easy UIs Interactive Medium Animation Tree of objects

Canvas Low level No mouse interaction High Animation JS Centric More Bookkeeping Pixels

11

Flex vs. JavaScript (developer)Aspect Flex HTML/JavaScript

Language OOP, event Function, prototype, event

Compiling Compile to swc/swf No

IDE Flash Builder Eclipse, Aptana, Komodo, any TextEditor

Debug/tuning Flash Builder Browser plugins

Testing FlexUnit, QTP (difficult) jsUnit, QTP (easy)

Protocol AMF JSON

SDK Flex SDK (3.4, 4.0…) ???

Charting Adobe DV, IBM ILOG, … ???

Framework Cairngorm, PureMVC, Parsley ???

12

1) We need a library just like Flex SDK to build up rich user interface components.• Basic Widget sets

• Charting/DataGrid support

• App framework (MVC, server communication…)

2) We need to build up user interface with native look&feel in mobiles.

JavaScript Framework

Many frameworks available for building up Old java script framework before HTML5

Dojo, YUI, Ext JS

New framework for mobile Sencha Touch

Classification Infrastructure framework

OOP, dependency load, event/DOM/CSS utility, etc

Application framework Infrastructure support Rich widgets, as SDK

13

JavaScript FrameworkFramework Typ

eConcepts Mobile? Charting? License

Prototype infra HTML, CSS No No MIT

jQuery Infra HTML, CSS. plugins, UI Yes (jQuery Mobile 1.0, other plugins)

No (plugins) MIT, GPL

Dojo 1.6 App HTML, CSS, extend attributes on elements. (dijit, dojox)

Yes (dojox.mobile) Yes (dojox.charting) AFL, BSD

YUI 3.3.0 App HTML, CSS. Yes (no standalone package)

Yes (HTML/CSS, beta) BSD

GWT 2.2.0 App Java Yes (standalone, gwt-mobile-webkit, but little UI widget)

Yes (gwt-google-apis: Visualization API;standalone: GFlot, clientsidegchart)

Apache

Ext JS 4 App CSS, Component API (enterprise RIA)

Yes (Sencha Touch, jQTouch)

Yes (SVG, Canvas, VML) GPL, commercial

Qooxdoo 1.3 App No HTML, CSS nor DOM knowledge. Pure object-oriented, 360 classes

Yes (but doesn’t work well in iOS)

Yes (Flash Player) LGPL, EPL

SproutCore App desktop-class, Cocoa for the Web. heavy use of Ruby and Ruby Gems for code generation. minimal HTML and CSS

Yes, but no standalone package. 1 2

Ki MIT

OAT App Yes (support pivot table, charts) GPL

MooTools App

AmpleSDK App

Cappuccino App

SmartClient App Yes (support pivot table, charts) LGPL, commercial 14

HTML5 Mobile framework

Young Mobile frameworks SproutCore Dojox Mobile

The second version, existed in Dojo 1.6

jQTouch

jQuery Mobile 1.0

The-M-Project 0.3 Alpha

Sencha Touch 1.1

15

SproutCore

Young Framework; Charles Jolley Development started in 2007 First stable release March 2010 Investments from Apple Inc. Used to develop MobileMe

Mature code and structure; Immature advanced views and documentation; Extensible using plugins and frameworks

DSUI (https://github.com/d4v1d82/DSUI)

16

Dojox Mobile

3 Foundation Mobile Projects Wink Toolkit (Most experimental & Lean)

Completely separate code base Innovative UI elements (3D useful for tight screen space) Started by Orange Labs iPhone and Android apps, consistent look and feel, other platform coming

EmbedJS (Most complete) Dojo APIs, stripped down for mobile and embedded Started by Uxebu Target each platform with its native look & feel TouchScroll, geo-location, etc.

Dojox Mobile (Most stable for Dojo users) Started in Dojo 1.5 Fix things in Dojo that break for mobile, API stable Merge features from EmbedJS, Wink Toolkit Feature detection Support many HTML5 features and beyond

17

Dojox Mobile

18

Dojox Mobile Summary

Dojo is free; Dojo low level framework is good enough

Dojox mobile package is based on Dojo core; Dojox mobile can work together with other widgets(like Dojox charting);

Dojo is not good enough on widget system, ugly look & feel for most of widgets. Less sample and documentation; The user will spend more time on theme customization;

Struggling with low level HTML elements and CSS Dojox mobile is in the same situation;

But Dojo 1.7 will have better mobile package!!! http://chrism.dojotoolkit.org/mobile-0.2/make_samples/dojo-samples/demos/mobile-gallery/dem

o.html (real charting support)

19

jQTouch

Based on jQuery. Heavy CSS render, but light in js. The original leader is moved to Sencha team, so its

future is unclear.

20

jQuery Mobile

21

The-M-Project

The-M-Project is an HTML5 JavaScript framework for writing cross-platform mobile apps. The-M-Project contains all UI and Core files to build

jQuery Mobile based mobile HTML5 Apps.

Work with Espresso Still alpha 0.*

22

Sencha Touch

Young framework Coming from Ext JS, sharing base class; Support iOS, Android, Black Berry 6; Work hand in hand with PhoneGap;

Complete framework Touch abstraction Scroller Components Data package Theme & icons

23

Touch Events

Touch events Built on native events Abstracted for performance Additional events

Tap Double tap Tap and hold Swipe Rotate Drag & drop

Scrolling Momentum/bounce physics Hardware accelerated Throughout components

24

Components

Lists Nested, Grouped, Sortable

Carousel Picker Overlay Slider Form & Fields Toolbars & buttons HTML5

Audio, Video, Geo-location

25

Data Package/Theme

Data Package Models, Stores, and Proxies

Associations Validation

Easily consume web services JSON/P XML YQL

26

Theme CSS3 SASS & Compass

Flexible themes Highly optimized

300+ Pre-included icons Robust animation Resolution Independent

Sencha Touch Summary

Powerful widgets Complete widget system, cool look & feel; Easy to make it work, easy to develop a new component;

Pure JS coding, simple component lifecycle, easy extending. Easy to customize;

Flexible CSS infrastructure (SASS) Change theme in component/product level, not HTML element level

Good documentation/samples for developers; Scope

Only work on mobile, may not work on non-webkit browser, like IE/Firefox.

27

RecommendationHTML/JavaScript

SDK Dojox MobilejQuery MobileSencha Touch (jQTouch replacement)

Charting Dojox charting(CSS)GWT (GFlot), Visualization APIExt JS charting (SVG, Canvas, VML)

Other Frameworks DWR (for server communication)???

28

1) In prototype, I use Sencha Touch for quick concept proof. It is easy to use.

2) Another way is just to use Dojox mobile package. Need more investigation.

• Other voices:

• (Select Sencha) http://interfacethis.com/2011/adventures-in-html5-part-one/

• http://www.webmonkey.com/2010/06/new-frameworks-give-mobile-web-apps-a-boost/

Architecture

29

Mobile browser

(iOS, Android, BlackBerry 6,

webOS…)

Presentation Server

OSGi Storage

(code, config)

PC browser Flex

HTML5

Mobile SDK(touch, orientation, rich components, data, theme …)

Comp (chart, table, etc.)

Services(security

, repository, runtime

data)

Widget FW(opbook special)

App framework

User Manager

Model Repository

Query component

Data Collection

More…

Json/xml

DW

R

Json/xml

amf

Other clients(for integration, native app, custom workflow, etc.)

Json/xml

Data Explorer Mobile Edition

30

HTML5

Mobile SDK(touch, orientation, rich components, data, theme …)

Comp (chart, table, etc.)

Services(security, repository, runtime

data)

Widget FW(opbook special)

App framework

Nav widget, detail widget, etc.

Pivot table, charts, etc.

User Workbench Applet

Prototype

Prototype 1: page (pc-version) Ext JS 4, all browsers Render opbook page definition

Prototype 2: page (mobile-version) Sencha Touch, iOS/Android 2.3 or high Moving EXT JS charting to touch

http://code.google.com/p/oppo-touching/

Render page definition

31

Original Flex UI

32

Prototype 1

33

Prototype 2

34

Resources

http://radar.oreilly.com/2010/05/mobile-operating-systems-and-b.html

http://www.gartner.com/it/page.jsp?id=1543014

http://www.themaninblue.com/writing/perspective/2010/03/22/

http://html5vsflash.tumblr.com/

35

AppendixJS Development

IDE AptanaStudio3 (Based on Eclipse) + Spket (for ExtJS, YUI, MooTools, prototype, jQuery, qooxdoo) Komodo Editor (any js framework) IntelliJIDEA 10 (dojo) Eclipse with JS Editor

Debugging in browsers (debug/profile[memory | performance]) Chrome JavaScript Console (Ctrl + Shift + J) Safari Develop menu (Ctrl + Shift + I) Firefox firebug IE Developer Tools

Other memory leak detectors Firefox: https://addons.mozilla.org/en-US/firefox/addon/leak-monitor/ Mozilla: https://wiki.mozilla.org/Performance%3aLeak_Tools IE: http://blogs.msdn.com/b/gpde/archive/2009/08/03/javascript-memory-leak-detector-v2.aspx JS tool: https://github.com/amix/JavaScript-memory-leak-checker

Other performance tuning tools Google page speed, Yahoo Yslow.

36

AppendixJavaScript Testing

Unit testing (general testing framework for developers to test any js code) QUnit (jQuery.js) Dojo Object Harness (DOH) YUI 3 Testing JsUnitTest (prototype.js)

Functional/system testing (Behavior DD, custom grammar) Jspec JsTestDriver Jasmine

Automation Tools (Record and play, same with QTP) Selenium IDE WebDriver Test Swarm (distributed continuous integration)

Code Coverage Jscoverage

37

AppendixCanvas/SVG/CSS

38

FPS CPU

Canvas

52 97

HTML + CSS

32 70

SVG 29 70

Flash 10.2

36 60

Safari 5.0.4, OS X 10.6.7, 500 Particles,

2011 2010

AppendixCanvas/SVG/CSS

OS Canvas SVG HTMLiPad 3.69 3.40 3.0

iPod Touch 4 4.8 (2H45M 80%) 3.24 2.14

iPhone 4 5.3 2.7 2.3

Android 2.2 (HTC, 1GHz) 9.6 - (not supported) 7.5

Android 2.3

Android 3.0 Honeycomb (for tablet)

webOS 3.0 enyo (simulator) 12 - (not supported) ? (crash)

39

FPS on 500 Particles

AppendixWebKit

WebKit compatibility Issues http://www.quirksmode.org/webkit_mobile.html

40

AppendixHTML5 performance in tablets

41

AppendixWidgetBox Mobile

HTML5 Mobile App Builder Non-developers build their own mobile apps Distribute the apps through the web

Work together with Sencha Touch

42

AppendixMake a Widget

43

AppendixMake an App

44