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

Feel the Glimmer - MunichJS 11/17

Feel the Glimmer - MunichJS 11/17

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

Marco Otte-Witte

November 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. 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. {this.props.people.map(function(person) {
    return {person};
    })}

    ['Dan Abramov', 'Ben Alpert']
    { type: 'ul', props: { 'class': 'list' }, children: [
    { type: 'li', props: {}, children: ['Dan Abramov'] },
    { type: 'li', props: {}, children: ['Ben Alpert'] }
    ] }

    View Slide


  11. {this.props.people.map(function(person) {
    return {person};
    })}

    ['Dan Abramov', 'Yehuda Katz']
    { type: 'ul', props: { 'class': 'list' }, children: [
    { type: 'li', props: {}, children: ['Dan Abramov'] },
    { type: 'li', props: {}, children: ['Yehuda Katz'] }
    ] }

    View Slide

  12. + { type: 'li', props: {}, children: ['Yehuda Katz'] }
    - { type: 'li', props: {}, children: ['Ben Alpert'] }

    View Slide

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

    View Slide

  14. Pre-Compilation
    Templates are pre-compiled (at build
    time) into opcodes that the VM
    executes during initial render

    View Slide



  15. {{home}}


    {{profile}}


    {{messages}}


    View Slide

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

  17. Offset 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F
    00000000 19 01 00 00 1F 00 16 01 01 00 20 00 16 01 02 00 .......... .....
    00000010 19 01 03 00 1F 00 16 01 04 00 04 01 00 00 05 01 ................
    00000020 05 00 18 01 00 00 16 01 06 00 20 00 16 01 02 00 .......... .....
    00000030 19 01 07 00 30 00 04 01 00 00 05 01 08 00 3D 02 ....0.........=.
    00000040 00 00 18 00 01 01 01 00 31 00 10 01 08 00 1D 03 ........1.......
    00000050 09 00 00 00 00 00 1F 00 16 01 0A 00 20 00 14 00 ............ ...

    View Slide

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

    View Slide



  19. Start


    Profil


    Nachrichten


    View Slide



  20. {{home}}


    {{profile}}


    {{messages}}


    only these can change at all

    View Slide

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

    View Slide

  22. Update Renders
    Update opcodes are executed

    View Slide

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

    View Slide

  29. The Glimmer VM was released with
    Ember.js 2.10

    View Slide

  30. "Stability without Stagnation"

    View Slide

  31. View Slide

  32. https://glimmerjs.com
    https://glimmerjs.com

    View Slide


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

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. Like React, Glimmer.js is only the "V"
    and some of the "C" in "MVC" (aka
    components)

    View Slide

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

    View Slide

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

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

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

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide

  45. Try it yourself!
    http://try.glimmerjs.com

    View Slide

  46. Ember's Future

    View Slide

  47. Where does this leave Ember.js?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. https://glimmerjs.com

    View Slide

  52. https://www.youtube.com/watch?v=62xd25kEZ3o&t=27617s

    View Slide

  53. Thanks

    View Slide

  54. Q&A

    View Slide

  55. simplabs.com
    @simplabs

    View Slide