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*

27

download, parse, compile ~20M JavaScript*

Unity* 5 in asm.js

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

38

http://webrtc.intel.com

Expand your solutions & services with real-time communication capability

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

Thank you!

47

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