Renesas Electronics America Inc. © 2012 Renesas Electronics America Inc. All rights reserved.
Class ID:
The HTML5 Effect - How HTML5 Will Change the Networked Car QNX Software Systems
9C03I
What is HTML5?
• Overview
• Trends
• Dispelling the myths
• Chrome vs
chromeless
Agenda
HTML5 features
• New features
• New tags
• New CSS
• WebGL
• HTML5 architecture
HTML5 for automotive
• Overview
• Problems it solves
• Example HTML5
integration
• What’s left
QNX and HTML5
• Torch browser
• QNX CAR 2 framework
• Comparative solutions
What is HTML5?
• Shorthand for mix of web technologies
– HTML5 + CSS3 + JavaScript
– Also can include AJAX + JSON + XML + XHTML
• Goal is to improve semantics, efficiency, usability and
interoperability of web development
– Specify enough implementation to ensure
compatibility
• http://www.html5rocks.com
HTML5 trend • Installed base for mobile devices with HTML5 forecast to exceed 500 million before
2012, more than 2.1 billion in 2016
• “HTML5 features will enable the web to challenge native applications in terms of rich user experiences.” – HTML5 for Mobile Devices and Tablets, ABIResearch, June 2011
• “Growing support is rapidly establishing HTML5 as the dominant cross-platform runtime.” • HTML5 threatens to Disrupt the Disruptors, CCS Insight, July 2011
• “Something in the last 18 months kicked the HTML5 adoption machine into overdrive.” • Why companies are flocking to HTML5, CNN Money, August 2011
• What’s happening day-to-day? www.html5trends.com
Is an HTML5 app limited?
Not really! Here’s some examples of what you can do…
Games
• chrome.angrybirds.com, resortico.com, Torus
• Certain classes of games can easily be handled
3D + Graphical effects
• SoundManager2
• WebGL for OpenGL/3D apps
• Direct canvas manipulation
Rich apps
• HootSuite, Google (Gmail, calendar, docs), Facebook,
LinkedIn, Kindle Cloud Reader, Box.net, Pandora…
Also see
• CreativeFan, HongKiat
3D + Graphical effects
Rich apps
Games
Dispelling the myths
• “HTML5 apps require an Internet connection”
– False—you can build unconnected embedded
systems using HTML5; even browser has offline apps
• “HTML5 is very far way”
– False – ratification has been estimated 2020,
however W3C recommendation status is expected in
2014. HTML5 is here now.
• “HTML5 needs a browser”
– No; you need a chromeless browser or HTML5 engine
Chrome vs Chromeless
• “Chromeless” is a plain HTML5 rendering engine
• “Chrome” is the UI that the browser adds
– toolbar, navigation, buttons, menus, status,
scrollbars, history, etc.
– Plug-in management
Browser chrome
Java Script HTML5
rendering engine
Browser plug-ins
New features in HTML5
• Standalone app features
– local storage, database access, offline applications,
threading, drag + drop, file access, geolocation,
orientation, speech
• Multimedia improvements
– audio, video, canvas, webGL, inline SVG
• Sandbox
– nested browsing through iframe
New semantics tags
• Replacements for overused <div> tags
– <article>, <aside>, <footer>, <header>, <hgroup>,
<mark>, <nav>, <section>, <time>
• Application markup improvements
– New controls like lists, menus, meters, etc
– New form types: email, date, search, tel, color, etc.
• Better DOM manipulation & selection
– Elements by class, CSS, custom data
New CSS3 features
• Hardware acceleration (certain implementations)
• Transitions, transforms, animations
– Ease in/out, linear, or custom applied to position,
colors, fonts, boxes, sizing, alpha, strokes, shadows,
borders & margins, etc.
– Scale, shear, rotate, translate, 3D
• Text control
– selection, wrapping, font options, alpha
• Stylistic elements
– gradients, rounded corners, shadows,
reflections, borders
Web GL
• JavaScript interface to 3D graphics
• WebGL based on OpenGL ES 2.0
• Renders to HTML Canvas, uses DOM
• Managed by Khronos group
• http://www.chromeexperiments.com/webgl
• http://www.ibiblio.org/e-notes/webgl/webgl.htm
WebGL Bookcase
Games Ocean Simulation
Why HTML5 for auto?
Build on something bigger than automotive
• Ecosystem – developers, tools, companies
• Standards – no vendor lock-in
• Flexibility – fluid deployment and architectures
• Branding –brand same app on different cars with CSS
• Lifespan – will be supported for long time
• Time to market – easy to use and leverage
• Powerful – rich application environment
• Cross-platform – deploy apps on phones and car
QNX “Torch” Browser
Support for HTML5 standards • Audio and video (through QNX multimedia technology) • Geo-location • Canvas • WebSockets • Offline applications • Session storage
Enhanced browser • High performance panning and scrolling (composition
manager) • Pixel-accurate zooming • Physics-based scrolling and panning • Adobe Flash Player 11 based plug-in • JavaScript JIT
What’s in a browser?
Browser requires a lot of functionality beyond WebKit
– WebKit is a rendering engine, not a browser
Additions provided by QNX to make a full browser
• Platform abstraction layer
• Zooming, scrolling, panning, and tile management
• Image caching, page caching
• Event handling for touch, mouse, keyboard, gesture
• History, bookmarks, page navigation
• User configuration and settings
• Networking, URL management
• Multimedia support, GPU acceleration
• Plug-in support
• Download management
• etc
Torch optimizations for speed, power + memory
• Upstream WebKit is not optimized for mobile use
• Torch browser optimized for:
– power consumption (e.g. throttle background
threads)
– memory usage (e.g. unified tile pool)
– overall speed (e.g. selective image down-sampling)
WebKit
WebKit architecture
• HTML5 in a browser
– Browser-based apps and websites
• HTML5 out of the browser
– UI/HMI can be built in HTML5
– Standalone apps
– Chromeless container runs HTML5 content
WebCore JavaScript
Core
Memory manager
HTTP
framework
MIME type
content filters OS services
Browser control API
Video
SVG
Audio
Browser UI
OS adaptation
Browser components/framework
QNX enhanced process model
WebKit QNX
Same browser, same tab √ √
Same browser, new tab - √
Same browser, different process - √
New browser, existing tab - √
New browser, new tab - √
• Instituting new process models extremely hard to do
with WebKit as it stands
• Torch browser provides ultimate trade-off flexibility in
– multi-threaded execution
– memory consumption
– crash resiliency
0
50
100
150
200
250
300
350
400
450
Chrome QNX(PlayBook)
Safari iPad Android Firefox IE
28-Mar-11
18-Oct-11
10
14
OS2 OS1
5.0.5
5.1
iOS4
iOS5
2.3
3.2
3.5
7
8 9
Maintaining a browser: the arms race
Scores are reported values when running each browser against html5test.com, indicating level of support for new HTML5 features. Html5test.com continually raises the total score as new features are adopted and added to the tests.
Maintaining WebKit
Tempting to “Do It Yourself”—initially that’s what QNX did
Challenging without dedicated engineers and expertise
• Sub-optimal performance
• Portability problems between GPUs
• Finding and fixing crashes
• Finding and fixing memory leaks
Difficult to keep updated
• Very fast moving port
• Inability to synchronize with upstream builds
• Difficult to re-submit changes into trunk
QNX’s Torch browser team has 50 dedicated engineers,
working on browser technologies since 2001
QNX CAR HMTL5 framework
• Comparable to ChromeOS or WebOS, but for automotive
– Pure HTML5 environment w/ front-end + apps
(unlike ChromeOS or WebOS)
– Pure HTML5 allows entire user interface (behaviour,
launcher, controls, apps, etc) to be reskinned easily
– Sencha Touch or other third party for widgets
– QNX-designed infotainment skin
• App world integration
QNX CAR and native access
• Bindings to native
– general PPS, app launcher, authorization manager,
– graphics & composition manager
(window management of other processes, etc)
– SQL database
• Interact + control any app from HTML5
QNX CAR and WebWorks
• WebWorks is the RIM SDK for building HTML5 apps
– Targets BlackBerry phones and PlayBook with profiles
• QNX CAR leverages parts of WebWorks (tools & runtime)
– Whitelisting for all resources, and cross-origin calls
– .bar packaging tools
– “Ripple”: embedded browser emulator environment
• QNX CAR APIs replace mobile-centric WebWorks APIs
– OEMs can extend or implement new APIs
– OEMs control what native APIs are exposed
• WebWorks futures: “Automotive” profile
QNX CAR HTML5 tooling
• Web Inspector
– accessed locally (on target) or remote (on host)
– examine and debug, performance statistics
– created by Torch team and donated to WebKit
• WebWorks packaging
– creation of bar file
– container for html, javascript, images, audio, config,
data files, etc
• Third party tools (Sencha, jquery, etc)
– provided by third party, tested with QNX CAR
– toolset not yet locked down
What’s left to solve for HTML5 in the car?
– Driver distraction framework
• QNX working on a proposal, will be working to standardize through ITU-T
– As yet unproven in automotive
• Testing out early access with several lead OEM/Tier1’s now
– Needs optimization to match performance
• Torch browser provides mobile optimizations + GPU h/w acceleration
– Tooling not quite there
• QNX will have web inspector, WebWorks packaging, Sencha tools
– Auto-specific frameworks
• QNX CAR 2 framework is fully HTML5 and auto-centric
Other solutions?
• Android
– Provides a solution to bringing apps into the car
– Can run HTML apps, but not a pure HTML environment
– Android app compatibility limited to Android devices
– Android not yet automotive grade
• Memory leaks, fragmentation, boot time, automotive multimedia, native access, app
lifecycle
• Commercial/licensing challenges
• MirrorLink
– Responsiveness lacking today
– Solves phone apps in car problem, nothing else
© 2012 Renesas Electronics America Inc. All rights reserved. 29
Please utilize the ‘Guidebook’ application to leave feedback
or
Ask me for the paper feedback form for you to use…
Please Provide Your Feedback…
© 2011 QNX Software Systems Limited. QNX, NEUTRINO,
MOMENTICS, AVIAGE, PHOTON, PHOTON MICROGUI are
trademarks of QNX Software Systems Limited, which are
registered trademarks and/or used in certain
jurisdictions. All other trademarks belong to their
respective owners. The information herein is for
informational purposes only and represents the current
view of QNX Software Systems Limited (QSS) as of the
date of this presentation. Because QSS must respond to
changing market conditions, it should not be interpreted
to be a commitment on the part of QSS, and QSS cannot
guarantee the accuracy of any information provided after
the date of this presentation. QSS MAKES NO
WARRANTIES, REPRESENTATIONS OR CONDITIONS
EXPRESS, IMPLIED OR STATUTORY, AS TO THE
INFORMATION IN THIS PRESENTATION.