Feel the Glimmer

Feel the Glimmer

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

3179e6bb62dc91d29bb906ffef4fa2d4?s=128

Marco Otte-Witte

May 02, 2017
Tweet

Transcript

  1. Feel the Glimmer

  2. Marco Otte-Witte @marcoow

  3. simplabs.com @simplabs

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

  6. https://glimmerjs.com

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

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

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

  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'] }
  11. The Glimmer Pipeline 1. Pre-Compilation 2. Initial render 3. Re-render

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

    during initial render
  13. <ul class="nav nav-tabs"> <li class="active"> <a href="/home">{{home}}</a> </li> <li> <a

    href="/profile">{{profile}}</a> </li> <li> <a href="/messages">{{messages}}</a> </li> </ul>
  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] ]
  15. Initial render DOM elements are created and opcodes for re-renders

    are generated
  16. <ul class="nav nav-tabs"> <li class="active"> <a href="/home">{{home}}</a> </li> <li> <a

    href="/profile">{{profile}}</a> </li> <li> <a href="/messages">{{messages}}</a> </li> </ul> only these can change at all
  17. [ ["OPTIMIZED-CAUTIOUS-UPDATE", "home"], ["OPTIMIZED-CAUTIOUS-UPDATE", "profile"], ["OPTIMIZED-CAUTIOUS-UPDATE", "messages"] ]

  18. Update Renders Update opcodes are executed

  19. let foo = 1; let fooReference: Reference<number> = { value()

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

    Reference<number> = { value() { return foo; } }; let barReference: Reference<number> = { value() { return bar; } }; let fooPlusBarReference: Reference<number> = { value() { return fooReference.value() + barReference.value(); } }; fooPlusBarReference.value(); // => 3 foo = 2; fooPlusBarReference.value(); // => 4
  21. interface EntityTag<T> { value(): T; validate(ticket: T): boolean; } interface

    Tagged { tag: EntityTag<any>; } interface TaggedReference<T> extends Reference<T>, Tagged { }
  22. const person: TrackedObject = { tag: new DirtyableTag(), name: 'Godfrey

    Chan' }; let nameReference: VersionedReference<string> { 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
  23. http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/

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

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

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

  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
  28. None
  29. the RFC process is inspired by Rust's RFCs https://github.com/rust-lang/rfcs

  30. Canary builds are where new features land first (behind feature

    flags) https://github.com/emberjs/website/tree/master/source/images/builds
  31. // config/environment.js var ENV = { EmberENV: { FEATURES: {

    'ember-routing-routable-components': true } } };
  32. Beta releases have new features that proved stable in Canary

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

    the Beta phase https://github.com/emberjs/website/tree/master/source/images/builds
  34. There are new beta and stable releases every 6 weeks

  35. the release process is inspired by the Chromium Project's Release

    Channels https://www.chromium.org/getting-involved/dev-channel
  36. http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html

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

    correctly)
  38. Major.Minor.Patch

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

    backwards compatible
  40. …might introduce new deprecations though

  41. None
  42. Major Releases do not introduce any new functionality but remove

    previously deprecated cruft only
  43. Upgrading from one major release to the next is as

    easy as clearing all deprecations and switching the major number
  44. The whole community is moving forwards constantly in incremental steps

    that are easy for everyone to make
  45. "Stability without Stagnation"

  46. https://glimmerjs.com

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

    react.js
  48. None
  49. None
  50. None
  51. Like React, Glimmer.js is only the "V" in "MVC"

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

    my-app/ && ember s
  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 ...
  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 ...
  55. https://github.com/Microsoft/TypeScript/issues/1375

  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);
  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);
  58. …helps catch bugs early on …IDEs ca help you more

    …typed APIs support large teams …helps avoid performance pitfalls
  59. <ul id="todo-list" class="todo-list"> {{#each visibleTodos key="_id" as |todo|}} <todo-item @todo={{todo}}

    @onEdit={{action editTodo}} @onToggle={{action toggleTodo}} @onDestroy={{action removeTodo}} /> {{/each}} </ul>
  60. @tracked('todos') get activeTodos() { return this.todos.filter(todo => !todo.completed) }

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

  62. Ember's Future

  63. Where does this leave Ember.js?

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

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

  66. ember-router will be the next thing to be extracted into

    it's own standalone library
  67. https://glimmerjs.com

  68. Thanks

  69. simplabs.com @simplabs