Six technologies that will change the web platform

Transcript

1. Six technologies that
   will change the web platform
   enterJS, 2014-06-30
   

   View Slide

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
   

   View Slide

3. asm.js
   Near-native performance on the web
   (© Jonathan Pincas)
   

   View Slide

4. 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
   

   View Slide

5. 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
   

   View Slide

6. 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
   

   View Slide

7. 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
   

   View Slide

8. 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
   

   View Slide

9. 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
   

   View Slide

10. 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
    

    View Slide

11. 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
    

    View Slide

12. 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
    

    View Slide

13. ParallelJS
    Parallelized JavaScript code
    (© terren in Virginia)
    

    View Slide

14. Dr. Axel Rauschmayer, Ecmanauten.de
    ParallelJS
    • Problem: JavaScript is still mostly sequential.
    • Goal: Parallelize some JS code.
    • Keep it simple.
    14
    

    View Slide

15. 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
    

    View Slide

16. 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
    

    View Slide

17. 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
    

    View Slide

18. 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
    

    View Slide

19. 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
    

    View Slide

20. ECMAScript 6
    Evolving the language, uniting the community
    (© Diane Yuri)
    

    View Slide

21. 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
    

    View Slide

22. 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
    

    View Slide

23. CSS Grid Layout
    Native-like GUI layout
    (© =Nahemoth=)
    

    View Slide

24. 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
    

    View Slide

25. Dr. Axel Rauschmayer, Ecmanauten.de
    Beyond Flexbox
    Can’t be decomposed into Flexboxes…
    25
    

    View Slide

26. Dr. Axel Rauschmayer, Ecmanauten.de
    Adapt to available space
    26
    

    View Slide

27. 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
    

    View Slide

28. Dr. Axel Rauschmayer, Ecmanauten.de
    Responsive design
    Portrait Landscape
    28
    

    View Slide

29. 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
    

    View Slide

30. 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
    

    View Slide

31. Installable web apps
    Install web apps natively
    (© FutUndBeidl)
    

    View Slide

32. 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
    

    View Slide

33. 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
    

    View Slide

34. 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
    

    View Slide

35. Web Components
    A standard infrastructure for widgets
    (© trazomfreak)
    

    View Slide

36. 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
    

    View Slide

37. 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
    

    View Slide

38. Dr. Axel Rauschmayer, Ecmanauten.de
    Templates
    Built-in support for templating:
    
    
    
    
    • 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
    

    View Slide

39. Dr. Axel Rauschmayer, Ecmanauten.de
    Templates
    
    
    
    
    !
    !
    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
    

    View Slide

40. 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
    

    View Slide

41. Dr. Axel Rauschmayer, Ecmanauten.de
    Shadow DOM: example 1
    
    Hi!
    <br/>var host = document.querySelector('button');<br/>var root = host.createShadowRoot();<br/>root.textContent = 'HELLO WORLD';<br/>
    
    41
    

    View Slide

42. Dr. Axel Rauschmayer, Ecmanauten.de
    Shadow DOM: example 2
    
    Hi!
    <br/>var host = document.querySelector('button');<br/>var root = host.createShadowRoot();<br/>root.innerHTML = '== <content></content> ==';<br/>
    
    42
    

    View Slide

43. 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
    

    View Slide

44. 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
    

    View Slide

45. 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
    

    View Slide

46. 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
    

    View Slide

47. 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: <br/>CSS: <link rel="stylesheet"<br/>href="..."><br/>HTML: HTML Imports<br/>47<br/>

    View Slide

48. Dr. Axel Rauschmayer, Ecmanauten.de
    Packaging a Custom Element
    ...
    ...
    <br/>var MyElem = document<br/>.registerElement('my-elem', ...);<br/>
    (Also possible: CSS, template, JS via external files.)
    Importing the element:
    
    48
    

    View Slide

49. 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
    

    View Slide

50. 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
    

    View Slide

51. Recap
    (© CollegeDegrees360)
    

    View Slide

52. 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
    

    View Slide

53. rauschma.de
    (© Nate Grigg)
    

    View Slide

54. 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
    

    View Slide