Html5 investigation
Upcoming SlideShare
Loading in...5
×
 

Html5 investigation

on

  • 4,553 views

As Flex expert, I investigate HTML5 completely, also cover the charting component. The target is to build BI web client for smart phone and tablets.

As Flex expert, I investigate HTML5 completely, also cover the charting component. The target is to build BI web client for smart phone and tablets.

Statistics

Views

Total Views
4,553
Views on SlideShare
4,549
Embed Views
4

Actions

Likes
1
Downloads
66
Comments
0

1 Embed 4

http://www.techgig.com 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Sources: Canalys, 2006 . Gartner: 2007 , 2008 , 2009 . http://www.engadget.com/2011/04/07/gartner-android-grabbing-over-38-percent-of-smartphone-market-i/
  • http://www.gartner.com/it/page.jsp?id=1626414 Tabnet replace laptop in meeting.
  • http://en.wikipedia.org/wiki/Mobile_application_development
  • The only major browser that definitely will not support HTML5 is Internet Explorer, but Internet Explorer 9 for desktop is going to support HTML5. Eventually the mobile browser will as well. Saying a browser supports HTML5 does not mean it supports full HTML5 spec right now. It simply means that it supports a portion of the spec and is on track to support it fully.
  • SVG: scalable Vector Graphics. http://html5vsflash.tumblr.com/
  • http://www.theopensourcery.com/jsactscript.htm
  • http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks Google Visualization API: https://chart.googleapis.com/chart?chs=750x300&chd=t:60,40&cht=p3&chl=Hello|Vitria Qooxdoo [‘ku:ksdu:]
  • http://www.appleinsider.com/articles/08/06/16/apples_open_secret_sproutcore_is_cocoa_for_the_web.html http://www.slideshare.net/david.saitta/cloud-web-applications-the-new-perspective-of-sproutcore http://frozencanuck.wordpress.com/2010/09/07/announcing-ki-a-statechart-framework-for-sproutcore/ http://designingwebinterfaces.com/tag/sproutcore
  • http://www.slideshare.net/dylanks/dojo-mobile
  • And more… MVC History support Device detection Orientation events Layouts Animations
  • JSONP or "JSON with padding" is a complement to the base JSON data format, a pattern of usage that allows a page to request data from a server in a different domain. As a solution to this problem, JSONP is an alternative to a more recent method called Cross-Origin Resource Sharing . Under the same origin policy , a web page served from server1.example.com cannot normally connect to or communicate with a server other than server1.example.com. An exception is the HTML
  • Not much document online for jQTouch: http://www.pixeldust.net/2010/01/get-in-touch-with-jqtouch/ http://ofps.oreilly.com/titles/9780596805784/ The original leader of jQTouch is moved on Sencha Touch!!!
  • Memory leak tuning: http://blogs.msdn.com/b/gpde/archive/2009/08/03/javascript-memory-leak-detector-v2.aspx http://www.blogjava.net/tim-wu/archive/2006/05/29/48729.html https://github.com/amix/JavaScript-memory-leak-checker
  • http://www.slideshare.net/chrisjoha/javascript-unit-testing-3912063 http://kissyui.com/blog/2010/10/understanding-javascript-testing/ http://stackoverflow.com/questions/300855/looking-for-a-better-javascript-unit-test-tool http://www.opensourcetesting.org/unit_javascript.php http://visionmedia.github.com/jspec/ http://dromaeo.com/
  • http://www.themaninblue.com/writing/perspective/2010/03/22/
  • http://www.quirksmode.org/webkit_mobile.html
  • http://www.sencha.com/blog/blackberry-playbook-the-html5-developer-scorecard/

Html5 investigation Html5 investigation Presentation Transcript

  • HTML5 The road to more devices… Kui Huang April, 2011 [email_address]
  • Topics
    • Background
      • Flex
      • Devices/OS/Browsers
      • Direction
    • HTML5/JavaScript
    • Architecture
    • Prototype
    • TODO
  • 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
  • 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
  • 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
  • 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;
  • 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
  • WebKit & HTML5
    • 85% in 2009, 92% in 2010
  • 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
  • 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
  • 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
  • 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 ???
  • 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
  • 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
  • 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
  • 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)
  • 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
  • Dojox Mobile
  • 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)
  • jQTouch
    • Based on jQuery.
    • Heavy CSS render, but light in js.
    • The original leader is moved to Sencha team, so its future is unclear.
  • jQuery Mobile
  • 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.*
  • 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
  • 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
  • Components
    • Lists
      • Nested, Grouped, Sortable
    • Carousel
    • Picker
    • Overlay
    • Slider
    • Form & Fields
    • Toolbars & buttons
    • HTML5
      • Audio, Video, Geo-location
  • 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
  • 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.
  • 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) ???
  • 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
  • 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
  • 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
  • Original Flex UI
  • Prototype 1
  • Prototype 2
  • 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/
  • 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 .
  • 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
  • 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
  • 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)
  • Appendix WebKit
    • WebKit compatibility Issues
      • http://www.quirksmode.org/webkit_mobile.html
  • Appendix HTML5 performance in tablets
  • 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
  • Appendix Make a Widget
  • Appendix Make an App