The Web Leaps Forward Mohammad Reza Haghighat Senior Principal Engineer, Intel Corporation October 21, 2015
The Web Leaps Forward
Mohammad Reza Haghighat
Senior Principal Engineer, Intel Corporation
October 21, 2015
Agenda
• What’s really new with HTML5?
• A bit of history
• HTML5 vs. native: ongoing efforts and remaining gaps
• Toward the Perceptual Web
• Exciting new developments
2
HTML5 Demos
• Canvas
• Video
• WebWorkers
• Device Orientation
• WebRTC
Demo references:
• Paul Rouget: http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml
• Oliver Hunt: http://nerget.com/rayjs-mt/rayjs.html
• Shawn Christmann: http://www.chromeexperiments.com/detail/destructive-video/
• Mr. doob: http://www.chromeexperiments.com/detail/ball-pool/
• Soundstep.com: http://www.soundstep.com/blog/experiments/jsdetection/
• WebRTCGoogleCode: http://webrtc.googlecode.com/svn/trunk/samples/js/demos/html/
• Big Buck Bunny: http://www.bigbuckbunny.org/
• Visage Technologies: http://www.visagetechnologies.com/html5/
3
HTML5 – The New Lingua Franca?
Native code PC spiral
1991
APPS .exe
2001
WEB HTML, Flash*
Web – “Write once, run on any browser”
2009
APPS iOS*, Android*, Windows*
App Stores Walled Gardens
2015
WEB HTML5
“Write Once, Run Everywhere”
“New open standards created in the mobile era, such as HTML5, will win on mobile devices.” – Steve Jobs
“If you want to do something that is universal, no question, world is going HTML5.” – Steve Ballmer
“It looks to me like HTML5 will eventually become a way almost all applications are built, including those on new phones.” – Eric Schmidt
4
Web: The Ubiquitous Software Platform
and the Application Model of the Future
Big Data Rich Capabilities
& Content
Social Contextual
Crowdsourced Sensors “Things”
Note: Some of the images are not owned by Intel and are the property of their owners. 5
Agenda
• What’s really new with HTML5?
• A bit of history
• HTML5 vs. native: ongoing efforts and remaining gaps
• Toward the Perceptual Web
• Exciting new developments
6
† https://www.jwz.org/blog/2010/10/every-day-i-learn-something-new-and-stupid/
… and Brendan Eich created JavaScript* in 10 days
‘JS had to "look like Java" only less so, be Java's dumb kid brother or boy-hostage sidekick. Plus, I had to be done in ten days or something worse than JS would have happened.’†
7
† www.usenix.org/event/webapps10/tech/slides/deboor.pdf
Browser-based Apps Grew Fast
Adam de Boor, Google*
Gmail: Past, Present, and Future†
0 9,400 22,000
52,000
90,000
190,000
279,000
443,000
0
50,000
100,000
150,000
200,000
250,000
300,000
350,000
400,000
450,000
500,000
2003 2004 2005 2006 2007 2008 2009 2010
Lin
es
of
Ja
va
Scr
ipt*
Co
de
Gmail* 50x larger in 6 years
Efficient execution of JavaScript became a necessity for the Web
8
JavaScript* Performance Needed to Improve
Dramatic JavaScript performance improvements due to competitive spiral
9
1
10
100
1000
2001 2003 2005 2007 2009 2011
SunSpider Runs Per Minute †
IE’s JS got > 100x faster
† www.microsoft.com : “Modern JavaScript”, Luke Hoban
0
1000
2000
3000
4000
SunSpider Execution Time (ms)
IE9 18x faster than IE8†
† Courtesy of Brendan Eich (http://weblogs.mozillazine.org/roadmap/)
Early JavaScript* JIT Compilers, Firefox* TraceMonkey*
Intel was an early contributor to the Firefox JavaScript* JIT compiler
Firefox* 3.1 with Tracing vs. Firefox 3† Launched early August 2008
10
JavaScript* Speed Demo
Fabrice Bellard’s PC Emulator in
JavaScript
Boots Linux* inside the browser in just a couple of seconds! 11
Astounding JavaScript* Performance With asm.js
† Courtesy of Mozilla Alon Zakai & Luke Wagner (http://people.mozilla.org/~lwagner/gdc-pres/gdc-2014.html#/) 12
Very efficient code generated by Firefox* JIT compiler Over 1M lines of C/C++ code compiled
to JavaScript* by Epic and Mozilla*
http://www.unrealengine.com/html5/
Epic* Games Unreal Engine* 3 & 4
Emscripten*
LLVM* Bitcode
web
JavaScript
asm.js
http://beta.unity3d.com/jonas/AngryBots/
http://beta.unity3d.com/jonas/DT2/
Unity* 5 WebGL
Achieving ~ 1.5x native running time
via targeting asm.js† — a highly
optimizable subset of JavaScript
amenable to AOT compilation,
introduced by Mozilla* in 2013
Agenda
• What’s really new with HTML5?
• A bit of history
• HTML5 vs. native: ongoing efforts and remaining gaps
• Toward the Perceptual Web
• Exciting new developments
13
Microprocessor Trends – “Free Lunch” is over!
But, Moore’s Law continues with a shift to parallelism † (c) 2013, James Reinders and Jim Jeffers: Intel® Xeon Phi™ High-Performance Programming, used with permission.
Transistor Counts
Log Scale†
Clock Rates
Log Scale†
• Growth in processor clock rate halted around 2005
• Transistors per processor continues to grow exponentially
14
Parallelism in Software is now Required for Benefiting from Moore’s Law
Open web client platform needs to be on Moore’s Law curve † Courtesy of Intel® Robert Geva: & Jim Jeffers: https://intel.activeevents.com/sf14/connect/sessionDetail.ww?SESSION_ID=1187 15
SS: Sequential Scalar PS: Parallel Scalar PV: Parallel Vector
Higher is better Higher is better
Higher is better
Optimizing Web Runtimes for Parallelism
Web runtimes need to be parallel end-to-end
Parse + build DOM
JavaScript*
Layout Engine
Render
GPU: parallel
CPU: mainly single-threaded†
35%
33%
21%
11%
Render 35%
Layout 33%
Other 21%
JS 11%
• HTML5 runtimes do not scale with number of cores
• Need parallelism for both responsiveness and energy efficiency
16 † Cycles breakdown from a popular mobile browser back in 2012
Parallel Parsing and Compilation
Background JIT compilers now in Chrome*, Firefox, Internet Explorer*, Safari*
PESPMA 2009
Four threads for JavaScript* parsing and compilation
JS and GFX execution
43.6
16.6 12.8
6.7
6.4 6.2
4.6 2.2 0.9
Cycle Breakdown
js::compile
gfx::compile
os::others
js::parse
js::others
browser::others
os::mem
js::jitted
gfx::exec
Epic* Citadel* profile on Firefox*
Bootstrap: Launch: 4 threads
1 thread
17
SIMD – Single Instruction, Multiple Data
SIMD operations deliver great performance & power efficiency
Scalar Operation
Cx
Cy
Cz
Cw
=
=
=
=
Ax
Ay
Az
Aw
Bx
By
Bz
Bw
+
+
+
+
Cx
Cy
Cz
Cw
Ax
Ay
Az
Aw
Bx
By
Bz
Bw
+ =
SIMD Operation of Vector Length 4
Intel® Architecture currently has SIMD operations of vector length 4, 8, 16
18
SIMD - A Gap Between JavaScript* and Native
SIMD in JavaScript further reduces the performance gap Software and workloads used in performance tests may have been optimized for performance only on Intel microprocessors. Performance tests, such as SYSmark* and MobileMark*, are measured using specific computer systems, components, software, operations and functions. Any change to any of those factors may cause the results to vary. You should consult other information and performance tests to assist you in fully evaluating your contemplated purchases, including the performance of that product when combined with other products.
C++ code for finding list average SIMD code by the Intel® C++ Compiler
Initially proposed JavaScript* code
19
SIMD.js – The API†
Our SIMD prototype delivers 3x~4x Mandelbrot speedup
Our Firefox* Prototype
20 † SIMD.js API is under active development and is subject to change.
Demo: Combining SIMD and Higher-Level Parallelism
SIMD speedup is nicely multiplied by WebWorkers†
† Source: Intel® Peter Jensen : https://github.com/PeterJensen/mandelbrot
WW: Number of WebWorkers
Our Chromium* Prototype
21
SIMD Speedups on our Chromium* Prototype
3.2 3.6 3.8 3.9
4.6 5.0
6.0
9.5
3.2 3.8
3.4
6.1 6.5
5.0 5.6
11.8
6.8
3.1 2.7
4.5 4.2 3.8
5.4
9.3
0
2
4
6
8
10
12
14
Transpose4x4 AOBench Mandelbrot MatrixMultiplication VertexTransform Average ShiftRows Matrix4x4Inverse
SIMD x-times faster than non-SIMD
3rd Generation Intel® Core™ i7 processor (3667U)@ 2.00 GHz, 32-bit, Ubuntu* 13 3rd Generation Intel® Core™ i7 processor (3667U)@ 2.00 GHz, 64-bit, Ubuntu* 13 Intel® Atom™ processor Z3770 @ 1.46GHz, Android* 4.4
Excellent early results while still focused on functionality
Theoretical speedup limit is 4
SIMD.js benchmarks: https://github.com/tc39/ecmascript_simd/tree/master/src/benchmarks 22
Stage 3 approval by Ecma TC39 † A copy of the stage 3 TC39 Presentation: https://docs.google.com/presentation/d/1qUtpD3NZd7ZArlGZWMGcbqnKTCojW_vyD9jXZFzo2Z0
£ IEBlog: http://blogs.msdn.com/b/ie/archive/2014/09/18/updates-to-our-platform-roadmap.aspx
SIMD.js brings SIMD Programming to JavaScript*
Collaborators: Intel, Mozilla*, Google*, Microsoft*, ARM*
Spec: http://tc39.github.io/ecmascript_simd
Polyfill API: https://github.com/tc39/ecmascript_simd
float32x4, int32x4, ...
Constructors: float32x4(x,y,z,w) float32x4.splat(s) …
Operations: abs, neg, add, sub, mul, div, clamp, min, max, reciprocal, reciprocalSqrt, scale, sqrt,
shuffle, shuffleMix, equal, notEqual, lessThan, greaterThan , withX, withY …
Status: In Firefox* Nightly, in Microsoft Edge*£, prototyped in Chromium*, coming to Chrome*
23
Emscripten* now targets SIMD.js
Emscripten generates SIMD.js from C++ SIMD intrinsics & auto-vectorized code
Near-native SIMD.js speedup
C/C++
JavaScript*
1.00
2.03
7.18 8.13
0
2
4
6
8
10
Speedup over Scalar JS
Scalar JS Scalar C++
SIMD JS SIMD C++
24
JavaScript* performance improved tremendously
1
10
100
1000
2001 2003 2005 2007 2009 2011
SunSpider Runs Per Minute †
IE’s JS got > 100x faster
† www.microsoft.com : “Modern JavaScript”, Luke Hoban Images courtesy of Mozilla : http://arewefastyet.com/
JS performance wars continued
Be
tte
r
JS perf plateauing …
Increasing recent interest in bringing large native apps to the web platform
25
26
• asm.js hint to the VM
• “| 0” converts to int32, “unary +” to double
• VM verifies the code for the asm.js compliance
• still valid JS code with the same semantics
asm.js is a subset of JavaScript thus runs in
all browsers, but all browsers also added
asm.js-specific performance optimizations
asm.js: A Highly Efficient, Typed Subset of JavaScript*
28
• Recently announced collaboration by Mozilla*, Google*, Microsoft*, and Apple* (WebKit*) to define a “binary format” for the web platform & beyond
• Integrates well with the web platform, draft spec at very early stages
• All expressions and operations typed, allowing offline compilation
• Prototype 23x faster to decode than JavaScript* (asm.js), critical for mobile
• Includes types/operations not currently available in JavaScript (e.g., int64)
• Is not tied to any particular compiler, though prototype leverages LLVM
• Impacts well beyond PC & mobile
Enter WebAssembly!
Note: Some of the images are not owned by Intel and are the property of their owners.
Crosswalk Project in Brief
Application Runtime
Follow us at @xwalk_project
crosswalk-project.org
Open Source, using Blink* & Chromium*
Today on Android* and Tizen*
Easy addition of extensible APIs
Easy access to device APIs
Intel® platform capabilities
Latest HTML5 features in packaged web apps
Focuses on security, performance and standards compliance
Based on web technologies: HTML5, CSS3, JavaScript*
Updated & released to the latest Chromium every 6 weeks
29
Intel® XDK
Speed Time-to-Market
Quick Start Templates
Device Emulation
On-device Debugging
CPU & Memory Profiling
Build Great User App Experiences
Responsive performance
Integrated social and web services
Access sensors, camera, and more
One-Click Multi-OS Build
Android*
iOS*
Windows*
And more Games Tools Business Medical
Cross-platform development environment for mobile apps and games
30
Intel® XDK – Cross-platform Development Kit
Develop, debug, profile, and build responsive web & hybrid apps
31
Free at http://xdk.intel.com
Agenda
• What’s really new with HTML5?
• A bit of history
• HTML5 vs. native: ongoing efforts and remaining gaps
• Toward the Perceptual Web
• Exciting new developments
32
Toward Perceptual Computing†
Devices sense & perceive user actions in a natural & intuitive way † Source: Intel® Perceptual Computing SDK: www.intel.com/software/perceptual
Speech Recognition
Close-Range Tracking
Gesture Recognition
2D/ 3D Object Tracking
Facial Analysis
33
Reinventing Everyday Usages
Perceptual Computing opens up new dimensions in interacting with machine
Learning & Education 3D Scanning and Sharing
Scan it
Share it Customize & Print it
Immersive Collaboration
Gaming Out-of-reach Device Input
34
Proposed Media Capture Depth Stream Extension†
Web Application
Browser or HTML5 runtime
RGB Stream
Depth Stream
getUserMedia (WebRTC) API
Media Capture Depth Stream Extensions are in W3C WG†
† W3C Media Capture Depth Stream Extensions: http://w3c.github.io/mediacapture-depth/
Intel® RealSense™ 3D Camera (F200)
IR Sensor
Color Sensor
IR Laser Projector
Imaging Processor
35
Demos: Media Capture Depth Stream Extension† † Source: Intel® Ningxin Hu:
https://github.com/huningxin/depth_stream_examples
WebRTC Google* Code: http://webrtc.googlecode.com/svn/trunk/samples/js/demos/html/ Magic Xylophone: Soundstep*.com: http://www.soundstep.com/blog/experiments/jsdetection/
Courtesy of Victor Eruhimov, itSeez3D* http://itseez3d.com/
36
WebRTC Provides Peer-to-Peer Communications
WebRTC does not define signaling transport and protocol
Web Server No defined signaling protocol Exchange of stream descriptions
Codec negotiation
1
4
getUserMedia()
2
3
getUserMedia()
5
Real-time, peer-peer, audio/video connection.
PeerConnection()
Lisa John
37
39
Intel® Collaboration Suite for WebRTC
Server SDK WebRTC Service Software on Server
• Web-based service management • Scalable MCU server • VP8/H.264 transcoding • SIP/XMPP gateway
• Enterprise integration APIs • Room management • Security policy management • User management
Client SDK
• Connections/Sessions • Media Streams, Events • Web Widget to ease integration • JavaScript* SDK, Android* SDK
Success stories:
Gaming
Wireless Display for the Web
Unlock exciting new user experiences in HTML5
Presentation
† Big Buck Bunny video: http://www.bigbuckbunny.org/
Media Sharing/Casting†
40
• Connects web content to screens around you
• Hides display connection technologies from the developer
Apple* AirPlay*, Microsoft* PlayTo*,
Google* Chromecast*, Miracast*, Intel® Widi
• Simple, high-level API, easy to use http://www.w3.org/TR/presentation-api/
HTML5 Presentation API Proposal
New standards-based feature for the cross-platform web 41
Agenda
• What’s really new with HTML5?
• A bit of history
• HTML5 vs. native: ongoing efforts and remaining gaps
• Toward the Perceptual Web
• Exciting new developments
42
Intel® XDK IoT Edition
Companion Apps
Streamlined Workflow Design, Test, and Build Tools
• Quick start samples and templates
• Built-in editor and emulators
• UI Frameworks and Apache Cordova* APIs
• Test and debug tools
• Integration with Cloud Services APIs Design and build cross-platform companion apps easily for Android*, iOS*, and Windows*
43
44
Intel® XDK IoT Edition
JavaScript* apps on IoT devices
Integrated Development Environment Create, Debug, and Run Tools
• JavaScript allows easy on-board app development & deployment for many IoT devices
• Use JavaScript to define behavior of IoT device
• Deploy, run, debug on IoT device with JavaScript
• Integration with cloud, web services, and sensors through JavaScript APIs
Edit JavaScript app
Send app to device
Run app remotely
Remote debug
Development System
IoT Device
Development Platform
Internet of Things (IoT) Device (Intel® Galileo):
• Pwm Led Controller on i2c bus
• RGB Led
• Node.js w/ Socket.io server
HTML App (Lenovo* K900):
• Socket.io connection to IoT device
• Change lighting color
• Cordova* App
Both made using:
Demo: Programming Internet of Things using Intel® XDK IoT Edition
† Source: Intel® Dan Yocom: http://xdk-software.intel.com/iot_edition_demo_video
RGB Lighting† Intel® XDK IoT Edition
45
Web: The Ubiquitous Software Platform
and the Application Model of the Future
Big Data Rich Capabilities
& Content
Social Contextual
Crowdsourced Sensors “Things”
Note: Some of the images are not owned by Intel and are the property of their owners. 46
More visual, perceptual, and engaging with full hardware access
Legal Disclaimer & Optimization Notice INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. EXCEPT AS PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT. A "Mission Critical Application" is any application in which failure of the Intel Product could result, directly or indirectly, in personal injury or death. SHOULD YOU PURCHASE OR USE INTEL'S PRODUCTS FOR ANY SUCH MISSION CRITICAL APPLICATION, YOU SHALL INDEMNIFY AND HOLD INTEL AND ITS SUBSIDIARIES, SUBCONTRACTORS AND AFFILIATES, AND THE DIRECTORS, OFFICERS, AND EMPLOYEES OF EACH, HARMLESS AGAINST ALL CLAIMS COSTS, DAMAGES, AND EXPENSES AND REASONABLE ATTORNEYS' FEES ARISING OUT OF, DIRECTLY OR INDIRECTLY, ANY CLAIM OF PRODUCT LIABILITY, PERSONAL INJURY, OR DEATH ARISING IN ANY WAY OUT OF SUCH MISSION CRITICAL APPLICATION, WHETHER OR NOT INTEL OR ITS SUBCONTRACTOR WAS NEGLIGENT IN THE DESIGN, MANUFACTURE, OR WARNING OF THE INTEL PRODUCT OR ANY OF ITS PARTS. Intel may make changes to specifications and product descriptions at any time, without notice. Designers must not rely on the absence or characteristics of any features or instructions marked "reserved" or "undefined". Intel reserves these for future definition and shall have no responsibility whatsoever for conflicts or incompatibilities arising from future changes to them. The information here is subject to change without notice. Do not finalize a design with this information. The products described in this document may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current characterized errata are available on request. Contact your local Intel sales office or your distributor to obtain the latest specifications and before placing your product order. Copies of documents which have an order number and are referenced in this document, or other Intel literature, may be obtained by calling 1-800-548-4725, or go to: http://www.intel.com/design/literature.htm
Intel, Core, Atom, Xeon Phi, RealSense, Look Inside and the Intel logo are trademarks of Intel Corporation in the United States and other countries.
*Other names and brands may be claimed as the property of others. Copyright ©2014 Intel Corporation.
Optimization Notice
Intel’s compilers may or may not optimize to the same degree for non-Intel microprocessors for optimizations that are not unique to Intel microprocessors. These optimizations include SSE2, SSE3, and SSSE3 instruction sets and other optimizations. Intel does not guarantee the availability, functionality, or effectiveness of any optimization on microprocessors not manufactured by Intel. Microprocessor-dependent optimizations in this product are intended for use with Intel microprocessors. Certain optimizations not specific to Intel microarchitecture are reserved for Intel microprocessors. Please refer to the applicable product User and Reference Guides for more information regarding the specific instruction sets covered by this notice.
Notice revision #20110804
48
Risk Factors The above statements and any others in this document that refer to plans and expectations for the second quarter, the year and the future are forward-looking statements that involve a number of risks and uncertainties. Words such as “anticipates,” “expects,” “intends,” “plans,” “believes,” “seeks,” “estimates,” “may,” “will,” “should” and their variations identify forward-looking statements. Statements that refer to or are based on projections, uncertain events or assumptions also identify forward-looking statements. Many factors could affect Intel’s actual results, and variances from Intel’s current expectations regarding such factors could cause actual results to differ materially from those expressed in these forward-looking statements. Intel presently considers the following to be important factors that could cause actual results to differ materially from the company’s expectations. Demand for Intel's products is highly variable and, in recent years, Intel has experienced declining orders in the traditional PC market segment. Demand could be different from Intel's expectations due to factors including changes in business and economic conditions; consumer confidence or income levels; customer acceptance of Intel’s and competitors’ products; competitive and pricing pressures, including actions taken by competitors; supply constraints and other disruptions affecting customers; changes in customer order patterns including order cancellations; and changes in the level of inventory at customers. Intel operates in highly competitive industries and its operations have high costs that are either fixed or difficult to reduce in the short term. Intel's gross margin percentage could vary significantly from expectations based on capacity utilization; variations in inventory valuation, including variations related to the timing of qualifying products for sale; changes in revenue levels; segment product mix; the timing and execution of the manufacturing ramp and associated costs; excess or obsolete inventory; changes in unit costs; defects or disruptions in the supply of materials or resources; and product manufacturing quality/yields. Variations in gross margin may also be caused by the timing of Intel product introductions and related expenses, including marketing expenses, and Intel's ability to respond quickly to technological developments and to introduce new products or incorporate new features into existing products, which may result in restructuring and asset impairment charges. Intel's results could be affected by adverse economic, social, political and physical/infrastructure conditions in countries where Intel, its customers or its suppliers operate, including military conflict and other security risks, natural disasters, infrastructure disruptions, health concerns and fluctuations in currency exchange rates. Intel’s results could be affected by the timing of closing of acquisitions, divestitures and other significant transactions. Intel's results could be affected by adverse effects associated with product defects and errata (deviations from published specifications), and by litigation or regulatory matters involving intellectual property, stockholder, consumer, antitrust, disclosure and other issues, such as the litigation and regulatory matters described in Intel's SEC filings. An unfavorable ruling could include monetary damages or an injunction prohibiting Intel from manufacturing or selling one or more products, precluding particular business practices, impacting Intel’s ability to design its products, or requiring other remedies such as compulsory licensing of intellectual property. A detailed discussion of these and other factors that could affect Intel’s results is included in Intel’s SEC filings, including the company’s most recent reports on Form 10-Q, Form 10-K and earnings release.
Rev. 4/15/14
49