Six technologies that will change the web platform (Nov 2014)

1. Six technologies that will change the web platform W-JAX, 2014-11-06
2. 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
3. asm.js Near-native performance on the web (© Jonathan Pincas)
4. 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
5. Dr. Axel Rauschmayer, Ecmanauten.de asm.js 5 Source code Bytecode Machine code asm.js: optimize compilation speed and execution time
6. 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
7. 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
8. 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
9. 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
10. 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
11. 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
12. 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
13. Dr. Axel Rauschmayer, Ecmanauten.de Engine support for asm.js • Firefox: explicit support, fastest • Others: getting faster 13
14. 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 14
15. 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”) 15
16. Dr. Axel Rauschmayer, Ecmanauten.de Advantages of asm.js • Relatively easy to implement on top of existing engines • Well-integrated with JavaScript • Backward compatible 16
17. ParallelJS Parallelized JavaScript code (© terren in Virginia)
18. Dr. Axel Rauschmayer, Ecmanauten.de ParallelJS • Problem: JavaScript is still mostly sequential. • Goal: Parallelize some JS code. • Keep it simple. 18
19. 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 19
20. Dr. Axel Rauschmayer, Ecmanauten.de map() versus mapPar() 20 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
21. 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) 21
22. 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 22
23. 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 23
24. ECMAScript 6 Evolving the language, uniting the community (© Diane Yuri)
25. 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. 25
26. Dr. Axel Rauschmayer, Ecmanauten.de ES6: most important Arguably most important for community (less fragmentation): • Classes • Modules 26
27. 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 27
28. CSS Grid Layout Native-like GUI layout (© =Nahemoth=)
29. 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 29
30. Dr. Axel Rauschmayer, Ecmanauten.de Beyond Flexbox Can’t be decomposed into Flexboxes… 30
31. Dr. Axel Rauschmayer, Ecmanauten.de Adapt to available space 31
32. 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. 32
33. Dr. Axel Rauschmayer, Ecmanauten.de Responsive design 33 Portrait Landscape
34. 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 } 34
35. 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) 35
36. Installable web apps Install web apps natively (© FutUndBeidl)
37. 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) 37
38. 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) 38
39. Dr. Axel Rauschmayer, Ecmanauten.de Publishing web apps • App store/marketplace • Self-publishing (some security via signing) 39
40. 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. 40
41. 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 41
42. Web Components A standard infrastructure for widgets (© trazomfreak)
43. 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 43
44. 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 44
45. Dr. Axel Rauschmayer, Ecmanauten.de Templates Built-in support for templating: <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> • Templates can be placed almost anywhere. • Content is inactive: • Not considered part of the document
 㱺 no actions are triggered (by images, CSS, scripts) • Invisible 45
46. Dr. Axel Rauschmayer, Ecmanauten.de Templates <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> 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); 46
47. 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. 47
48. Dr. Axel Rauschmayer, Ecmanauten.de Shadow DOM: example 1 <body> <button>Hi!</button> <script> var host = document.querySelector('button'); var root = host.createShadowRoot(); root.textContent = 'HELLO WORLD'; </script> </body> 48
49. Dr. Axel Rauschmayer, Ecmanauten.de Shadow DOM: example 2 <body> <button>Hi!</button> <script> var host = document.querySelector('button'); var root = host.createShadowRoot(); root.innerHTML = '== <content></content> =='; </script> </body> 49
50. 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 50
51. 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) { ... }, } }); 51
52. 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); }, 52
53. Dr. Axel Rauschmayer, Ecmanauten.de Using the Custom Element Declaratively, in HTML: <x-foo></x-foo> 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); 53
54. Dr. Axel Rauschmayer, Ecmanauten.de Importing 54 JavaScript: <script src="..."> CSS: <link rel="stylesheet" href="..."> HTML: ???
55. 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 55
56. Dr. Axel Rauschmayer, Ecmanauten.de Use case: Twitter Bootstrap <!-- Now --> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="fonts.css"> <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="bootstrap-tooltip.js"></script> <script src="bootstrap-dropdown.js"></script> ... <!-- HTML import --> <head> <link rel="import" href="bootstrap.html"> </head> 56
57. Dr. Axel Rauschmayer, Ecmanauten.de Packaging a Custom Element <style>...</style> <template>...</template> <script> var MyElem = document .registerElement('my-elem', ...); </script> Also possible: via external files (not inlined). Importing the element: <link rel="import" href="my-elem.html"> 57
58. 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 <marquee> tag via a web component. • Timestamps on GitHub: via a Custom Element and Polymer polyfill. 58
59. Dr. Axel Rauschmayer, Ecmanauten.de Browser support for web components 59 Source: jonrimmer.github.io/are-we-componentized-yet/
60. 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 60
61. Recap (© CollegeDegrees360)
62. Dr. Axel Rauschmayer, Ecmanauten.de Six web technologies 62 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
63. • Axel: rauschma.de • Slides: speakerdeck.com/rauschma/ (© Nate Grigg)
64. 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) 64