Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Six technologies that will change the web platform

Six technologies that will change the web platform

Axel Rauschmayer

June 30, 2014
Tweet

More Decks by Axel Rauschmayer

Other Decks in Programming

Transcript

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  51. Recap
    (© CollegeDegrees360)

    View full-size 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 full-size slide

  53. rauschma.de
    (© Nate Grigg)

    View full-size 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 full-size slide