Feel the Glimmer - MunichJS 11/17

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

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