The document discusses the evolving landscape of mobile operating systems and the transition towards HTML5 and web technologies as key components for mobile app development. It highlights the fragmentation of the mobile OS market and outlines various tools, frameworks, and development environments available for building mobile applications. The author emphasizes the advantages of using HTML5, particularly in supporting multiple devices and platforms, while also comparing existing frameworks like Dojo, Sencha Touch, and jQuery Mobile.

1. HTML5 The road to more devices… Kui Huang April, 2011 [email_address]

2. Topics Background Flex Devices/OS/Browsers Direction HTML5/JavaScript Architecture Prototype TODO

3. Mobile OS 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… Native 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

4. Tablet Tablet Operating System Market Share Percentage Source: Gartner (April 2011) 2010 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

5. Platform Development Environment OS vendors support IDE only for themselves, not list here. For more, visit http://en.wikipedia.org/wiki/Mobile_application_development Platform 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

6. 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;

7. 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

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

9. 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

10. 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

11. 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

12. Flex vs. JavaScript (developer) 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. 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 ???

13. 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

14. JavaScript Framework Framework Type Concepts 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

15. 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

16. 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)

17. 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

18. Dojox Mobile

19. 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/demo.html (real charting support)

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

21. jQuery Mobile

22. 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.*

23. 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

24. 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

25. Components Lists Nested, Grouped, Sortable Carousel Picker Overlay Slider Form & Fields Toolbars & buttons HTML5 Audio, Video, Geo-location

26. Data Package/Theme Data Package Models, Stores, and Proxies Associations Validation Easily consume web services JSON/P XML YQL Theme CSS3 SASS & Compass Flexible themes Highly optimized 300+ Pre-included icons Robust animation Resolution Independent

27. 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.

28. Recommendation In prototype, I use Sencha Touch for quick concept proof. It is easy to use. 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/ HTML/JavaScript SDK Dojox Mobile jQuery Mobile Sencha Touch (jQTouch replacement) Charting Dojox charting(CSS) GWT (GFlot), Visualization API Ext JS charting (SVG, Canvas, VML) Other Frameworks DWR (for server communication) ???

29. Architecture Mobile browser (iOS, Android, BlackBerry 6, webOS…) Presentation Server OSGi Storage (code, config) PC browser Flex User Manager Model Repository Query component Data Collection More… Json/xml DWR Json/xml amf Other clients (for integration, native app, custom workflow, etc.) Json/xml HTML5 Mobile SDK (touch, orientation, rich components, data, theme …) Comp (chart, table, etc.) Services ( security, repository, runtime data ) Widget FW (opbook special) App framework

30. Data Explorer Mobile Edition 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

31. 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

32. Original Flex UI

33. Prototype 1

34. Prototype 2

35. 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/

36. Appendix JS 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 .

37. Appendix JavaScript 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

38. Appendix Canvas/SVG/CSS Safari 5.0.4, OS X 10.6.7, 500 Particles, 2011 2010 FPS CPU Canvas 52 97 HTML + CSS 32 70 SVG 29 70 Flash 10.2 36 60

39. Appendix Canvas/SVG/CSS FPS on 500 Particles OS Canvas SVG HTML iPad 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)

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

41. Appendix HTML5 performance in tablets

42. Appendix WidgetBox Mobile HTML5 Mobile App Builder Non-developers build their own mobile apps Distribute the apps through the web Work together with Sencha Touch

43. Appendix Make a Widget

44. Appendix Make an App