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

Transcript

1. Six technologies that
   will change the web
   platform
   W-JAX, 2014-11-06
   

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

   View Slide

5. Dr. Axel Rauschmayer, Ecmanauten.de
   asm.js
   5
   Source code
   Bytecode
   Machine code
   asm.js: optimize
   compilation speed
   and execution time
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. Dr. Axel Rauschmayer, Ecmanauten.de
    Engine support for asm.js
    • Firefox: explicit support, fastest
    • Others: getting faster
    13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

26. Dr. Axel Rauschmayer, Ecmanauten.de
    ES6: most important
    Arguably most important for community (less
    fragmentation):
    • Classes
    • Modules
    26
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

39. Dr. Axel Rauschmayer, Ecmanauten.de
    Publishing web apps
    • App store/marketplace
    • Self-publishing (some security via signing)
    39
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

53. 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);
    53
    

    View Slide

54. Dr. Axel Rauschmayer, Ecmanauten.de
    Importing
    54
    JavaScript: <br/>CSS: <link rel="stylesheet"<br/>href="..."><br/>HTML: ???<br/>

    View Slide

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
    

    View Slide

56. Dr. Axel Rauschmayer, Ecmanauten.de
    Use case: Twitter Bootstrap
    
    
    
    
    
    
    
    ...
    
    
    
    
    56
    

    View Slide

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

    View Slide

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
    tag via a web component.
    • Timestamps on GitHub: via a Custom Element and
    Polymer polyfill.
    58
    

    View Slide

59. Dr. Axel Rauschmayer, Ecmanauten.de
    Browser support for
    web components
    59
    Source: jonrimmer.github.io/are-we-componentized-yet/
    

    View Slide

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
    

    View Slide

61. Recap
    (© CollegeDegrees360)
    

    View Slide

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
    

    View Slide

63. • Axel: rauschma.de
    • Slides: speakerdeck.com/rauschma/
    (© Nate Grigg)
    

    View Slide

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
    

    View Slide