Feel the Glimmer

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

Transcript

1. Feel the Glimmer
2. Marco Otte-Witte @marcoow
3. simplabs.com @simplabs
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
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
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
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