Feel the Glimmer

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