Slide 1
Slide 1 text
Six technologies that
will change the web
platform
TNG, 2014-12-11
Slide 2
Slide 2 text
Dr. Axel Rauschmayer, Ecmanauten.de
Six web technologies
1. asm.js: near-native performance on the web
2. ParallelJS: parallelized JavaScript code
3. ECMAScript 6: evolving the language, uniting the
community
4. CSS Grid Layout: native-like GUI layout
5. Installable web apps: install web apps natively
6. Web Components: a standard infrastructure for widgets
2
Slide 3
Slide 3 text
asm.js
Near-native performance on the web
(© Jonathan Pincas)
Slide 4
Slide 4 text
Dr. Axel Rauschmayer, Ecmanauten.de
JS compilation steps
4
Source code
Bytecode
Machine code
Code executed?
Code executed often?
Illegal types?
fast compilation,
slow execution,
dynamic
slow compilation,
fast execution,
fixed types
Slide 5
Slide 5 text
Dr. Axel Rauschmayer, Ecmanauten.de
asm.js
5
Source code
Bytecode
Machine code
asm.js: optimize
compilation speed
and execution time
Slide 6
Slide 6 text
Dr. Axel Rauschmayer, Ecmanauten.de
Things that slow down
JavaScript
• Boxing: type-tagged values must be extracted
• Enables primitives and objects to coexist
• JIT compilation (slow version first, fast version later)
• Runtime type checks
• Garbage collection
• Flexible data structures
6
Slide 7
Slide 7 text
Dr. Axel Rauschmayer, Ecmanauten.de
What is asm.js?
• Very static and limited subset of JavaScript.
• Explicit marker
• Can be compiled ahead of time, to fast code.
• Foundation: JS semantics and compiler.
• Easier to standardize
• Easier to implement
7
Slide 8
Slide 8 text
Dr. Axel Rauschmayer, Ecmanauten.de
An asm.js module
function MyAsmModule(stdlib, foreign, heap) { // normal function
"use asm"; // mark as asm.js module
function func1(...) { ... }
function func2(...) { ... }
...
return {
exportedFunc: func1,
...
};
}
• stdlib: access to standard library (esp. Math)
• foreign: foreign function interface, access to normal JS code.
• heap: instance of ArrayBuffer
8
Slide 9
Slide 9 text
Dr. Axel Rauschmayer, Ecmanauten.de
Example
// Compiled during loading, directly to fast code:
function DiagModule(stdlib) {
"use asm";
var sqrt = stdlib.Math.sqrt;
function square(x) {
x = +x;
return +(x*x);
}
function diag(x, y) {
x = +x; y = +y;
return +sqrt(square(x) + square(y));
}
return { diag: diag };
}
// Link and use:
var fast = DiagModule(window); // link module
console.log(fast.diag(3, 4)); // 5
9
Slide 10
Slide 10 text
Dr. Axel Rauschmayer, Ecmanauten.de
Static typing
Variables:
var a = 0; // int
var b = 0.0; // double
Parameters and return values:
function func(x, y) {
x = x|0; // int
y = +y; // double
return +(x * y); // returns double
}
10
Slide 11
Slide 11 text
Dr. Axel Rauschmayer, Ecmanauten.de
Supported types
Values types:
• 64 bit doubles. +x
• 32 bit integers. x|0
• 32 bit floats (ECMAScript 6). Math.fround(x)
Reference types:
• ArrayBufferView types (to access heap): Int8Array, Uint8Array, Int16Array,
Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array
• Functions
• Function tables (arrays of functions with same signature)
• References to foreign functions
11
Slide 12
Slide 12 text
Dr. Axel Rauschmayer, Ecmanauten.de
Emscripten
• C/C++ → LLVM bitcode → asm.js
• Speed: 67% of native
• Real-world uses:
• Commercial game engine: Unreal Engine 3
• Emscripten + WebGL
• Ported within a week
• Recently: Unreal Engine 4 (demo)
12
Slide 13
Slide 13 text
Humble Mozilla Bundle
Details: “Play Awesome Indie Games Directly in Firefox”
Slide 14
Slide 14 text
Dr. Axel Rauschmayer, Ecmanauten.de
Engine support for asm.js
• Firefox: explicit support, fastest
• Others: getting faster
14
Slide 15
Slide 15 text
Dr. Axel Rauschmayer, Ecmanauten.de
The big picture
• Fast, low-level: asm.js
• Rarely hand-written (use C++, other LLVM
languages, …)
• Pragmatic alternative to bytecode (similar, with
pros + cons)
• Slow, high-level: JavaScript
15
Slide 16
Slide 16 text
Dr. Axel Rauschmayer, Ecmanauten.de
JavaScript source code
• Universal format for delivering code on the web
• Abstracts over
• JS compilation strategies of various engines
• High level vs. low level
(JS plus “portable binaries”)
16
Slide 17
Slide 17 text
Dr. Axel Rauschmayer, Ecmanauten.de
Advantages of asm.js
• Relatively easy to implement on top of existing
engines
• Well-integrated with JavaScript
• Backward compatible
17
Slide 18
Slide 18 text
ParallelJS
Parallelized JavaScript code
(© terren in Virginia)
Slide 19
Slide 19 text
Dr. Axel Rauschmayer, Ecmanauten.de
ParallelJS
• Problem: JavaScript is still mostly sequential.
• Goal: Parallelize some JS code.
• Keep it simple.
19
Slide 20
Slide 20 text
Dr. Axel Rauschmayer, Ecmanauten.de
New methods
• New array methods:
• mapPar()
• filterPar()
• reducePar()
• Almost like existing methods map(), filter(), reduce()
• But: Order in which elements are processed is undefined.
㱺 can be parallelized
20
Slide 21
Slide 21 text
Dr. Axel Rauschmayer, Ecmanauten.de
map() versus mapPar()
21
3
2
1
fork
join
Thread 1
9
4
1
Thread 2
Thread 3
3
2
1
Thread 1
9
4
1
Thread 2
Thread 3
Slide 22
Slide 22 text
Dr. Axel Rauschmayer, Ecmanauten.de
Rules for callbacks
• Don’t mutate shared data (mutating own data is
OK)
• Can’t use many host objects (especially DOM)
22
Slide 23
Slide 23 text
Dr. Axel Rauschmayer, Ecmanauten.de
Modes of execution
• Concurrently: via support in engines
• Sequentially: normal library as a fallback
• SIMD: under exploration
• GPU: under exploration
23
Slide 24
Slide 24 text
Dr. Axel Rauschmayer, Ecmanauten.de
Executive summary:
ParallelJS
• Simple data parallelism for JavaScript
• Limited, but safe (no locks, no concurrent write
access to data)
• Tentatively scheduled for ECMAScript 8 (end of
2018?)
• Probably in engines long before
24
Slide 25
Slide 25 text
ECMAScript 6
Evolving the language, uniting the community
(© Diane Yuri)
Slide 26
Slide 26 text
Dr. Axel Rauschmayer, Ecmanauten.de
ECMAScript 6 (ES6)
• Next version of JavaScript (current: ECMAScript 5.1)
• Cleans up and evolves the language
• Standardized by June 2015
• Can already be used today, via cross-compilation:
• TypeScript
• Next versions of: Ember.js, AngularJS (AtScript)
• etc.
26
Slide 27
Slide 27 text
Dr. Axel Rauschmayer, Ecmanauten.de
ES6: most important
Arguably most important for community (less
fragmentation):
• Classes
• Modules
27
Slide 28
Slide 28 text
Dr. Axel Rauschmayer, Ecmanauten.de
ES6: other highlights
• Block-scoped variables via let and const
• Better parameter handling: default values, rest parameter
• Arrow functions (less verbose functions with lexical this)
• Iterators, for-of loop (a better for)
• Generators (shallow coroutines for iterators etc.)
• Promises (pattern for asynchronous programming)
• Template strings: flexible string interpolation (enable multi-line strings)
• Standard library: Map, WeakMap, Set, typed arrays, new methods
28
Slide 29
Slide 29 text
CSS Grid Layout
Native-like GUI layout
(© =Nahemoth=)
Slide 30
Slide 30 text
Dr. Axel Rauschmayer, Ecmanauten.de
CSS Grid Layout
• Created by Microsoft for Windows 8
• Catches up with native GUI layout
(Android, iOS, Java SWT, …)
• Better than:
• Flexbox (only one dimension)
• Tables (not enough control over sizing of columns
and rows)
• Specification edited by Google, Microsoft, Mozilla
30
Slide 31
Slide 31 text
Dr. Axel Rauschmayer, Ecmanauten.de
Beyond Flexbox
Can’t be decomposed into Flexboxes…
31
Slide 32
Slide 32 text
Dr. Axel Rauschmayer, Ecmanauten.de
Adapt to available space
32
Slide 33
Slide 33 text
Dr. Axel Rauschmayer, Ecmanauten.de
CSS
#grid {
display: grid;
grid-template-columns: auto minmax(min-content, 1fr);
grid-template-rows: auto minmax(min-content, 1fr) auto
}
#title { grid-column: 1; grid-row: 1 }
#score { grid-column: 1; grid-row: 3 }
#stats { grid-column: 1; grid-row: 2;
justify-self: start }
#board { grid-column: 2; grid-row: 1 / span 2; }
#controls { grid-column: 2; grid-row: 3;
align-self: center }
• x fr: x times the remaining space (0 ≤ x ≤ 1)
• auto: same as minmax(min-content,max-content)
• Justification/alignment: stretch, baseline, start, etc.
33
Slide 34
Slide 34 text
Dr. Axel Rauschmayer, Ecmanauten.de
Responsive design
34
Portrait Landscape
Slide 35
Slide 35 text
Dr. Axel Rauschmayer, Ecmanauten.de
CSS
@media (orientation: portrait) {
#grid {
display: grid;
grid-template-areas: "title stats"
"score stats"
"board board"
"ctrls ctrls";
grid-template-columns:
auto minmax(min-content, 1fr);
grid-template-rows:
auto auto
minmax(min-content, 1fr) auto
}
}
@media (orientation: landscape) {
#grid {
display: grid;
grid-template-areas: "title board"
"stats board"
"score ctrls";
grid-template-columns:
auto minmax(min-content, 1fr);
grid-template-rows:
auto minmax(min-content, 1fr) auto
}
}
#title { grid-area: title }
#score { grid-area: score }
#stats { grid-area: stats }
#board { grid-area: board }
#controls { grid-area: ctrls }
35
Slide 36
Slide 36 text
Dr. Axel Rauschmayer, Ecmanauten.de
Implementation status
• Older version shipping in Trident (IE)
• Blink (Chrome): work in progress (Google and
Igalia)
• WebKit (Safari): work in progress (Igalia)
• Gecko (Firefox): work in progress (started early this
year)
36
Slide 37
Slide 37 text
Installable web apps
Install web apps natively
(© FutUndBeidl)
Slide 38
Slide 38 text
Dr. Axel Rauschmayer, Ecmanauten.de
Installable web apps
• Install web apps as native apps
• Killer feature of web apps: can be used without
installation (e.g. just once)
38
Slide 39
Slide 39 text
Dr. Axel Rauschmayer, Ecmanauten.de
Formats for web apps
• Hosted app: collection of web-hosted assets
plus…
• App manifest
• Cache manifest
• Packaged app (with app manifest, no cache
manifest needed)
• Needed for signing (and thus app stores)
39
Slide 40
Slide 40 text
Dr. Axel Rauschmayer, Ecmanauten.de
Publishing web apps
• App store/marketplace
• Self-publishing (some security via signing)
40
Slide 41
Slide 41 text
Dr. Axel Rauschmayer, Ecmanauten.de
State of the art
• Native web app installation supported by OS:
• Android, iOS, Windows Phone
• Generate native apps via Firefox and Chrome (if in Chrome Web Store):
• Windows, OS X, Linux
• Web apps are native apps:
• Chrome OS, Firefox OS
• Platforms supported by Cordova:
• Amazon Fire OS, Android, Firefox OS, iOS, Ubuntu, Windows Phone,
Windows, and others.
41
Slide 42
Slide 42 text
Dr. Axel Rauschmayer, Ecmanauten.de
Standardization
• Standard app manifest (hosted apps): new,
backed by Google and Mozilla.
• Standard package format: for apps and content
㱺 in planning stage
42
Slide 43
Slide 43 text
Web Components
A standard infrastructure for widgets
(© trazomfreak)
Slide 44
Slide 44 text
Dr. Axel Rauschmayer, Ecmanauten.de
What are Web Components?
Problem: Writing reusable widgets for HTML is hard
• Example: social buttons
• Thus: Frameworks
• Many incompatible frameworks!
Solution: Web Components
• Suite of APIs, provides infrastructure for widgets
44
Slide 45
Slide 45 text
Dr. Axel Rauschmayer, Ecmanauten.de
Web Component APIs
• Templates
• Shadow DOM: encapsulate the DOM of widgets (=nest documents)
• Custom Elements: define both appearance and behavior
• HTML Imports: package HTML (HTML, CSS, templates, scripts)
㱺 useful for packaging custom elements
Polyfills for current browsers:
• Google Polymer
• Mozilla X-Tag
45
Slide 46
Slide 46 text
Dr. Axel Rauschmayer, Ecmanauten.de
Templates
Built-in support for templating:
![great image]()
• Templates can be placed almost anywhere.
• Content is inactive:
• Not considered part of the document
㱺 no actions are triggered (by images, CSS, scripts)
• Invisible
46
Slide 47
Slide 47 text
Dr. Axel Rauschmayer, Ecmanauten.de
Templates
![great image]()
var t = document.querySelector('#mytemplate');
// Fill in data
t.content.querySelector('img').src = 'logo.png';
// Add to document
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
47
Slide 48
Slide 48 text
Dr. Axel Rauschmayer, Ecmanauten.de
Shadow DOM
• Problem: HTML and CSS of widget leaks into
surrounding document (and vice versa).
• IDs and classes
• Style rules
• Shadow DOM encapsulates HTML and CSS via
nested documents.
48
Slide 49
Slide 49 text
Dr. Axel Rauschmayer, Ecmanauten.de
Shadow DOM: example 1
Hi!
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'HELLO WORLD';
49
Slide 50
Slide 50 text
Dr. Axel Rauschmayer, Ecmanauten.de
Shadow DOM: example 2
Hi!
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.innerHTML = '== <content></content> ==';
50
Slide 51
Slide 51 text
Dr. Axel Rauschmayer, Ecmanauten.de
Custom Elements
• Define new HTML elements
• Name: at least one dash (no namespaces needed)
• Builds on the existing HTMLElement and event
infrastructure
51
Slide 52
Slide 52 text
Dr. Axel Rauschmayer, Ecmanauten.de
Registering a
custom element
var XFoo = document.registerElement('x-foo', { prototype: {
__proto__: HTMLElement.prototype,
// Lifecycle: creation of instance
createdCallback: function () { ... },
// Lifecycle: instance inserted into document
attachedCallback: function () { ... },
// Lifecycle: instance removed from document
detachedCallback: function () { ... },
// Lifecycle: attribute added, removed, changed
attributeChangedCallback: function (
attrName, oldVal, newVal) { ... },
} });
52
Slide 53
Slide 53 text
Dr. Axel Rauschmayer, Ecmanauten.de
Setting up content
createdCallback: function () {
// Template
var t = document.querySelector('#foo-template');
var clone = document.importNode(t.content, true);
// Shadow DOM
this.createShadowRoot().appendChild(clone);
},
53
Slide 54
Slide 54 text
Dr. Axel Rauschmayer, Ecmanauten.de
Using the Custom Element
Declaratively, in HTML:
Via document.createElement():
var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function (e) {
alert('Thanks!');
});
Via the constructor:
var xFoo = new XFoo();
document.body.appendChild(xFoo);
54
Slide 55
Slide 55 text
Dr. Axel Rauschmayer, Ecmanauten.de
Importing
55
JavaScript:
CSS: <link rel="stylesheet"
href="...">
HTML: ???
Slide 56
Slide 56 text
Dr. Axel Rauschmayer, Ecmanauten.de
HTML Imports
Use cases:
• Importing templates
• Bundling CSS and JavaScript
(e.g. Twitter Bootstrap)
• Custom Elements: bundle CSS, templates,
JavaScript
56
Slide 57
Slide 57 text
Dr. Axel Rauschmayer, Ecmanauten.de
Use case: Twitter Bootstrap
...
57
Slide 58
Slide 58 text
Dr. Axel Rauschmayer, Ecmanauten.de
Packaging a
Custom Element
...
...
var MyElem = document
.registerElement('my-elem', ...);
Also possible: via external files (not inlined).
Importing the element:
58
Slide 59
Slide 59 text
Dr. Axel Rauschmayer, Ecmanauten.de
Web components in
the real world
• The next versions of Ember.js and AngularJS will be
based on Web Components.
• Blink is considering supporting the legacy
tag via a web component.
• Timestamps on GitHub: via a Custom Element and
Polymer polyfill.
59
Slide 60
Slide 60 text
Dr. Axel Rauschmayer, Ecmanauten.de
Browser support for
web components
60
Source: jonrimmer.github.io/are-we-componentized-yet/
Slide 61
Slide 61 text
Dr. Axel Rauschmayer, Ecmanauten.de
Executive summary
Web Components:
• Infrastructure for a common ecosystem for widgets.
• Considerable momentum:
• Certain at Mozilla and Google, under
consideration at Microsoft
• Next versions of AngularJS, Ember.js are
based on Web Components
61
Slide 62
Slide 62 text
Recap
(© CollegeDegrees360)
Slide 63
Slide 63 text
Dr. Axel Rauschmayer, Ecmanauten.de
Six web technologies
63
Technology Benefits Availability
asm.js Speed, porting native
code
Now
ParallelJS Speed Work in progress
ECMAScript 6
(classes, modules)
Code portable between
frameworks
Now
(compile to ES5)
Web Components GUIs, common
ecosystem for widgets
Now (polyfill,
Chrome)
CSS Grid Layout Web app GUIs Soon
Installable web apps Web apps become
more versatile
Now
Slide 64
Slide 64 text
• Axel: rauschma.de
• Slides: speakerdeck.com/rauschma/
(© Nate Grigg)
Slide 65
Slide 65 text
Dr. Axel Rauschmayer, Ecmanauten.de
Resources
• “asm.js: closing the gap between JavaScript and native” by A.R.
• “ParallelJS: data parallelism for JavaScript” by A.R.
• “Using ECMAScript 6 today” by A.R.
• “CSS Grid Layout Module Level 1” by Tab Atkins Jr., fantasai, Rossen
Atanassov (W3C Editor’s Draft)
• “CSS Grid Layout. Specification overview. Implementation status and
roadmap” by Manuel Rego (slides)
• “Installing web apps natively” by A.R.
• WebComponents.org: site with resources
Bonus: “Speaking JavaScript” by A.R. (free online book)
65