Slide 1
Slide 1 text
Six technologies that
will change the web platform
enterJS, 2014-06-30
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
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
4
Slide 5
Slide 5 text
Dr. Axel Rauschmayer, Ecmanauten.de
What is asm.js?
• Very static and limited subset of JavaScript.
• Can be compiled ahead of time, to fast code.
• Foundation: JavaScript’s semantics and compiler infrastructure.
• Easier to standardize
• Easier to implement
5
Slide 6
Slide 6 text
Dr. Axel Rauschmayer, Ecmanauten.de
An asm.js module
function MyAsmModule(
stdlib, foreign, heap) {
"use asm"; // mark as asm.js module
!
function func1(...) { ... }
function func2(...) { ... }
...
!
return {
exportedFunc: func1,
...
};
}
Normal JavaScript function,
obeying certain rules.
• stdlib: access to standard
library (esp. Math)
• foreign: foreign function
interface, access to normal JS
code.
• heap: instance of ArrayBuffer
6
Slide 7
Slide 7 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
7
Slide 8
Slide 8 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
}
8
Slide 9
Slide 9 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
9
Slide 10
Slide 10 text
Dr. Axel Rauschmayer, Ecmanauten.de
asm.js performance
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)
Engine support:
• Firefox: explicit support, fastest
• Others: getting faster
!
!
!
10
Slide 11
Slide 11 text
Dr. Axel Rauschmayer, Ecmanauten.de
The big picture
Usage:!
• Fast, low-level: asm.js
• Rarely hand-written (use C++,
other LLVM languages, LLJS)
• Pragmatic alternative to
bytecode (similar, with pros +
cons)
• Slow, high-level: JavaScript
JavaScript source code:!
• Universal format for delivering
code on the web
• Abstracts over
• Compilation strategies of
various engines
• High level vs. low level
11
Slide 12
Slide 12 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
12
Slide 13
Slide 13 text
ParallelJS
Parallelized JavaScript code
(© terren in Virginia)
Slide 14
Slide 14 text
Dr. Axel Rauschmayer, Ecmanauten.de
ParallelJS
• Problem: JavaScript is still mostly sequential.
• Goal: Parallelize some JS code.
• Keep it simple.
14
Slide 15
Slide 15 text
Dr. Axel Rauschmayer, Ecmanauten.de
New methods
• Methods:
• Array.prototype.mapPar()
• Array.prototype.filterPar()
• Array.prototype.reducePar()
• Similar to traditional array methods map(), filter(), reduce()
• Order in which elements are processed is undefined.
㱺 can be parallelized
15
Slide 16
Slide 16 text
Dr. Axel Rauschmayer, Ecmanauten.de
map() versus mapPar()
16
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 17
Slide 17 text
Dr. Axel Rauschmayer, Ecmanauten.de
Rules for callback parameters
• Don’t mutate shared data (mutating own data is OK)
• Can’t use many host objects (especially DOM)
17
Slide 18
Slide 18 text
Dr. Axel Rauschmayer, Ecmanauten.de
Modes of execution
• Sequentially: normal library as a fallback
• Concurrently: via support in engines
• SIMD: under exploration
• GPU: under exploration
18
Slide 19
Slide 19 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 (ca. end of 2018)
• Probably in engines long before
19
Slide 20
Slide 20 text
ECMAScript 6
Evolving the language, uniting the community
(© Diane Yuri)
Slide 21
Slide 21 text
Dr. Axel Rauschmayer, Ecmanauten.de
ECMAScript 6
• 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
• etc.
21
Slide 22
Slide 22 text
Dr. Axel Rauschmayer, Ecmanauten.de
ECMAScript 6 features
Arguably most important for community (less
fragmentation):
• Classes
• Modules
Other highlights:
• Block-scoped variables
• Parameter default values
• Destructuring (assignment, parameters)
• Arrow functions (functions with lexical this)
• Iterators, for-of loop
• Generators
• Promises
• Template strings: flexible string interpolation (multi-
line strings and raw strings)
• Standard lib.: Map, WeakMap, Set, new methods
22
Slide 23
Slide 23 text
CSS Grid Layout
Native-like GUI layout
(© =Nahemoth=)
Slide 24
Slide 24 text
Dr. Axel Rauschmayer, Ecmanauten.de
CSS Grid Layout
• 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
24
Slide 25
Slide 25 text
Dr. Axel Rauschmayer, Ecmanauten.de
Beyond Flexbox
Can’t be decomposed into Flexboxes…
25
Slide 26
Slide 26 text
Dr. Axel Rauschmayer, Ecmanauten.de
Adapt to available space
26
Slide 27
Slide 27 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: synonym for minmax(min-content, max-content)
• Justification/alignment: stretch, baseline, start, etc.
27
Slide 28
Slide 28 text
Dr. Axel Rauschmayer, Ecmanauten.de
Responsive design
Portrait Landscape
28
Slide 29
Slide 29 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 }
29
Slide 30
Slide 30 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)
30
Slide 31
Slide 31 text
Installable web apps
Install web apps natively
(© FutUndBeidl)
Slide 32
Slide 32 text
Dr. Axel Rauschmayer, Ecmanauten.de
Installable web apps
• Install web apps as if they were native
• Killer feature of web apps: can be used without installation (e.g. just once)
Formats:
• 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)
Publishing:
• App store/marketplace!
• Self-publishing
32
Slide 33
Slide 33 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.
!
!
33
Slide 34
Slide 34 text
Dr. Axel Rauschmayer, Ecmanauten.de
Standardization
• Standard app manifest: new, backed by Google and Mozilla.
• Standard package format for apps and content
㱺 in planning stage
34
Slide 35
Slide 35 text
Web Components
A standard infrastructure for widgets
(© trazomfreak)
Slide 36
Slide 36 text
Dr. Axel Rauschmayer, Ecmanauten.de
What are Web Components?
Problem:!
• Writing reusable widgets for HTML is hard (example: social buttons).
㱺 frameworks
• Many incompatible frameworks!
Solution:!
• Web Components
• Suite of APIs, provides infrastructure for widgets
36
Slide 37
Slide 37 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
37
Slide 38
Slide 38 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
38
Slide 39
Slide 39 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);
39
Slide 40
Slide 40 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.
40
Slide 41
Slide 41 text
Dr. Axel Rauschmayer, Ecmanauten.de
Shadow DOM: example 1
Hi!
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'HELLO WORLD';
41
Slide 42
Slide 42 text
Dr. Axel Rauschmayer, Ecmanauten.de
Shadow DOM: example 2
Hi!
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.innerHTML = '== <content></content> ==';
42
Slide 43
Slide 43 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
43
Slide 44
Slide 44 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) { ... },
} });
44
Slide 45
Slide 45 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);
},
45
Slide 46
Slide 46 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);
46
Slide 47
Slide 47 text
Dr. Axel Rauschmayer, Ecmanauten.de
HTML Imports
!
Applications:
• Importing templates
• Bundling CSS and JavaScript
(think Twitter Bootstrap)
• Custom Elements: bundle CSS,
templates, JavaScript
Importing:
JavaScript:
CSS: <link rel="stylesheet"
href="...">
HTML: HTML Imports
47
Slide 48
Slide 48 text
Dr. Axel Rauschmayer, Ecmanauten.de
Packaging a Custom Element
...
...
var MyElem = document
.registerElement('my-elem', ...);
(Also possible: CSS, template, JS via external files.)
Importing the element:
48
Slide 49
Slide 49 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.
49
Slide 50
Slide 50 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
50
Slide 51
Slide 51 text
Recap
(© CollegeDegrees360)
Slide 52
Slide 52 text
Dr. Axel Rauschmayer, Ecmanauten.de
Six web technologies
52
Benefit Technology Availability
More speed asm.js Now
ParallelJS Work in progress
Broader ecosystem ECMAScript 6 (classes, modules) Now (compile to ES5)
Web Components Now (polyfill)
Help with GUIs and apps Web Components Now (polyfill)
CSS Grid Layout Soon
Installable web apps Now
Slide 53
Slide 53 text
rauschma.de
(© Nate Grigg)
Slide 54
Slide 54 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.
• “ECMAScript 6: what’s next for JavaScript?” by A.R. (slides)
• “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)
54