Feel the Glimmer - ParisJS

Transcript

1. Feel the Glimmer

2. Marco Otte-Witte @marcoow

3. simplabs.com @simplabs

4. None
5. None

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. <ul> {this.props.people.map(function(person) { return <li>{person}</li>; })} </ul> ['Dan Abramov', 'Ben

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

11. + { type: 'ul', props: { 'class': 'list' }, children:

    [ + { type: 'li', props: {}, children: ['Dan Abramov'] } + { type: 'li', props: {}, children: ['Ben Alpert'] } + ]}

12. <ul> {this.props.people.map(function(person) { return <li>{person}</li>; })} </ul> ['Dan Abramov', 'Yehuda

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

13. + { type: 'li', props: {}, children: ['Yehuda Katz'] }

    - { type: 'li', props: {}, children: ['Ben Alpert'] }

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

15. Pre-Compilation Templates are pre-compiled (at build time) into opcodes that

    the Glimmer VM executes during initial render

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>

17. [ [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] ]

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

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

    are generated

20. [ [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] ]

21. <ul class="nav nav-tabs"> <li class="active"> <a href="/home">Start</a> </li> <li> <a

    href="/profile">Profil</a> </li> <li> <a href="/messages">Nachrichten</a> </li> </ul>

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

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

24. Update Renders Update opcodes are executed

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

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

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

27. interface EntityTag<T> { value(): T; validate(ticket: T): boolean; } interface

    Tagged { tag: EntityTag<any>; } interface TaggedReference<T> extends Reference<T>, Tagged { }

28. 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 person.name = 'Yehuda Katz'; nameReference.tag.validate(1); // => false nameReference.value(); // => 'Yehuda Katz' nameReference.tag.value(); // => 2

29. class UpdateOpcode { execute() { if (!this.reference.tag.validate(this._lastTag)) { this._lastTag =

    this.reference.tag.value(); let newValue = this.reference.value(); this.domNode.textContent = newValue; // update DOM } } }

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

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

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

33. "Stability without Stagnation"

34. None

35. https://glimmerjs.com https://glimmerjs.com

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

    react.js
37. None
38. None
39. None

40. Like React, Glimmer.js is only the "V" and some of

    the "C" in "MVC" (aka components)

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

    my-app/ && ember s

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

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

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

45. <ul id="todo-list" class="todo-list"> {{#each visibleTodos key="_id" as |todo|}} <TodoItem @todo={{todo}}

    @onEdit={{action editTodo}} @onToggle={{action toggleTodo}} @onDestroy={{action removeTodo}} /> {{/each}} </ul>

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

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

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

49. Ember's Future

50. Where does this leave Ember.js?

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

52. None
53. None
54. None

55. saved time and money

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

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

    it's own standalone library

58. https://glimmerjs.com

59. https://www.dotjs.io

60. Thanks

61. Q&A

62. simplabs.com @simplabs