$30 off During Our Annual Pro Sale. View Details »

Feel the Glimmer

Feel the Glimmer

An intoduction to Ember.js' Glimmer rendering VM and Glimmer.js

Marco Otte-Witte

May 02, 2017
Tweet

More Decks by Marco Otte-Witte

Other Decks in Programming

Transcript

  1. Feel the Glimmer

    View Slide

  2. Marco Otte-Witte
    @marcoow

    View Slide

  3. simplabs.com
    @simplabs

    View Slide

  4. View Slide

  5. Berlin, May 8th+9th
    https://ember-workshop.simplabs.com

    View Slide

  6. https://glimmerjs.com

    View Slide

  7. "light-weight UI components for the web"

    View Slide

  8. https://github.com/emberjs/ember.js/issues/13949

    View Slide

  9. https://worldvectorlogo.com/logo/react

    View Slide

  10. https://worldvectorlogo.com/logo/react
    { type: 'ul', props: { 'class': 'list' }, children: [
    { type: 'li', props: {}, children: ['Dan Abramov'] },
    { type: 'li', props: {}, children: ['Ben Alpert'] }
    ] }
    { type: 'ul', props: { 'class': 'list' }, children: [
    { type: 'li', props: {}, children: ['Dan Abramov'] },
    { type: 'li', props: {}, children: ['Sebastian Markbåge'] }
    ] }
    + { type: 'li', props: {}, children: ['Sebastian Markbåge'] }
    - { type: 'li', props: {}, children: ['Ben Alpert'] }

    View Slide

  11. The Glimmer Pipeline
    1. Pre-Compilation
    2. Initial render
    3. Re-render

    View Slide

  12. Pre-Compilation
    Templates are pre-compiled into
    opcodes that the VM executes during
    initial render

    View Slide



  13. {{home}}


    {{profile}}


    {{messages}}


    View Slide

  14. [
    [6,"ul"],
    [9,"class","nav nav-tabs"],
    [7]
    [0," \n "],
    [6,"li"],
    [9,"class","active"],
    [7],
    [0,"\n "],
    [6,"a"],
    [9,"href","/home"],
    [7],
    [1,
    [18,"home"],
    false
    ],
    [8],
    [0,"\n "],
    [8],

    [0,"\n"],
    [8]
    ]

    View Slide

  15. Initial render
    DOM elements are created and
    opcodes for re-renders are generated

    View Slide



  16. {{home}}


    {{profile}}


    {{messages}}


    only these can change at all

    View Slide

  17. [
    ["OPTIMIZED-CAUTIOUS-UPDATE", "home"],
    ["OPTIMIZED-CAUTIOUS-UPDATE", "profile"],
    ["OPTIMIZED-CAUTIOUS-UPDATE", "messages"]
    ]

    View Slide

  18. Update Renders
    Update opcodes are executed

    View Slide

  19. let foo = 1;
    let fooReference: Reference = {
    value() {
    return foo;
    }
    };
    fooReference.value(); // => 1
    foo++;
    fooReference.value(); // => 2

    View Slide

  20. let foo = 1;
    let bar = 2;
    let fooReference: Reference = {
    value() {
    return foo;
    }
    };
    let barReference: Reference = {
    value() {
    return bar;
    }
    };
    let fooPlusBarReference: Reference = {
    value() {
    return fooReference.value() + barReference.value();
    }
    };
    fooPlusBarReference.value(); // => 3
    foo = 2;
    fooPlusBarReference.value(); // => 4

    View Slide

  21. interface EntityTag {
    value(): T;
    validate(ticket: T): boolean;
    }
    interface Tagged {
    tag: EntityTag;
    }
    interface TaggedReference extends Reference, Tagged {
    }

    View Slide

  22. const person: TrackedObject = {
    tag: new DirtyableTag(),
    name: 'Godfrey Chan'
    };
    let nameReference: VersionedReference {
    tag: person.tag,
    value() {
    return person.name;
    }
    };
    nameReference.value(); // => 'Godfrey Chan'
    nameReference.tag.value(); // => 1
    set(person, 'name', 'Yehuda Katz');
    nameReference.tag.validate(1); // => false
    nameReference.value(); // => 'Yehuda Katz'
    nameReference.tag.value(); // => 2

    View Slide

  23. http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/

    View Slide

  24. http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/

    View Slide

  25. The Glimmer VM was release as part of
    Ember.js 2.10

    View Slide

  26. RFCs Canary Beta Stable LTS
    https://github.com/emberjs/website/tree/master/source/images/builds

    View Slide

  27. RFCs are were new features and
    changes are discussed in the open
    before implementation begins
    https://github.com/emberjs/website/tree/master/source/images/builds

    View Slide

  28. View Slide

  29. the RFC process is inspired by Rust's
    RFCs
    https://github.com/rust-lang/rfcs

    View Slide

  30. Canary builds are where new features
    land first (behind feature flags)
    https://github.com/emberjs/website/tree/master/source/images/builds

    View Slide

  31. // config/environment.js
    var ENV = {
    EmberENV: {
    FEATURES: {
    'ember-routing-routable-components': true
    }
    }
    };

    View Slide

  32. Beta releases have new features that
    proved stable in Canary enabled by
    default
    https://github.com/emberjs/website/tree/master/source/images/builds

    View Slide

  33. Stable releases contain everything that
    proved to be stable in the Beta phase
    https://github.com/emberjs/website/tree/master/source/images/builds

    View Slide

  34. There are new beta and stable releases
    every 6 weeks

    View Slide

  35. the release process is inspired by the
    Chromium Project's Release Channels
    https://www.chromium.org/getting-involved/dev-channel

    View Slide

  36. http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html

    View Slide

  37. Semantic Versioning
    gives software versions their meaning
    back
    (if used correctly)

    View Slide

  38. Major.Minor.Patch

    View Slide

  39. Ember's 6 weekly stable releases are
    minor releases and thus backwards
    compatible

    View Slide

  40. …might introduce new deprecations
    though

    View Slide

  41. View Slide

  42. Major Releases do not introduce any
    new functionality but remove previously
    deprecated cruft only

    View Slide

  43. Upgrading from one major release to
    the next is as easy as clearing all
    deprecations and switching the major
    number

    View Slide

  44. The whole community is moving
    forwards constantly in incremental
    steps that are easy for everyone to
    make

    View Slide

  45. "Stability without Stagnation"

    View Slide

  46. https://glimmerjs.com

    View Slide


  47. » ls -lh
    514K ember-data.prod.js
    1.6M ember.prod.js
    1.1K react-dom.js
    644K react.js

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. Like React, Glimmer.js is only the "V" in
    "MVC"

    View Slide

  52. npm install -g ember-cli/ember-cli
    ember new my-app -b @glimmer/blueprint
    cd my-app/ && ember s

    View Slide

  53. tree .
    my-app
    !"" config
    # !"" environment.js
    # !"" module-map.ts
    # $"" resolver-configuration.ts
    !"" dist/
    !"" src
    # !"" ui
    # # !"" components
    # # # $"" my-app
    # # # !"" component.ts
    # # # $"" template.hbs
    # # !"" styles
    # # # $"" app.css
    # # $"" index.html
    # !"" index.ts
    # $"" main.ts
    !"" ember-cli-build.js
    #
    ... other files ...

    View Slide

  54. tree .
    my-app
    !"" config
    # !"" environment.js
    # !"" module-map.ts
    # $"" resolver-configuration.ts
    !"" dist/
    !"" src
    # !"" ui
    # # !"" components
    # # # $"" my-app
    # # # !"" component.ts
    # # # $"" template.hbs
    # # !"" styles
    # # # $"" app.css
    # # $"" index.html
    # !"" index.ts
    # $"" main.ts
    !"" ember-cli-build.js
    #
    ... other files ...

    View Slide

  55. https://github.com/Microsoft/TypeScript/issues/1375

    View Slide

  56. class Student {
    fullName: string;
    constructor(public firstName : string, public lastName : string) {
    this.fullName = firstName + " " + lastName;
    }
    }
    interface Person {
    firstName: string;
    lastName: string;
    }
    function greeter(person : Person) {
    return "Hello, " + person.fullName;
    }
    var user = new Student("Jane", "User");
    document.body.innerHTML = greeter(user);

    View Slide

  57. function greeter(person) {
    return "Hello, " + person.fullName;
    }
    var user = {
    firstName: 'a',
    lastName: 'b',
    fullName() {
    return this.firstName + ' ' + this.lastName;
    }
    };
    document.body.innerHTML = greeter(user);

    View Slide

  58. …helps catch bugs early on
    …IDEs ca help you more
    …typed APIs support large teams
    …helps avoid performance pitfalls

    View Slide


  59. {{#each visibleTodos key="_id" as |todo|}}
    @onEdit={{action editTodo}}
    @onToggle={{action toggleTodo}}
    @onDestroy={{action removeTodo}} />
    {{/each}}

    View Slide

  60. @tracked('todos')
    get activeTodos() {
    return this.todos.filter(todo => !todo.completed)
    }

    View Slide

  61. Demo
    https://github.com/glimmerjs/todomvc-demo

    View Slide

  62. Ember's Future

    View Slide

  63. Where does this leave Ember.js?

    View Slide

  64. https://emberjs.com/blog/2017/04/05/emberconf-2017-state-of-the-union.html

    View Slide

  65. cp -r glimmer-app/src/ui/components ../ember-app/src/ui

    View Slide

  66. ember-router will be the next thing to
    be extracted into it's own standalone
    library

    View Slide

  67. https://glimmerjs.com

    View Slide

  68. Thanks

    View Slide

  69. simplabs.com
    @simplabs

    View Slide