Feel the Glimmer

An intoduction to Ember.js' Glimmer rendering 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. 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