Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Feel the Glimmer

Feel the Glimmer

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

Marco Otte-Witte

May 02, 2017
Tweet

More Decks by Marco Otte-Witte

Other Decks in Programming

Transcript

  1. 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'] }
  2. <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>
  3. [ [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] ]
  4. <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
  5. let foo = 1; let fooReference: Reference<number> = { value()

    { return foo; } }; fooReference.value(); // => 1 foo++; fooReference.value(); // => 2
  6. 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
  7. interface EntityTag<T> { value(): T; validate(ticket: T): boolean; } interface

    Tagged { tag: EntityTag<any>; } interface TaggedReference<T> extends Reference<T>, Tagged { }
  8. 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
  9. 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
  10. Canary builds are where new features land first (behind feature

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

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

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

    the Beta phase https://github.com/emberjs/website/tree/master/source/images/builds
  14. the release process is inspired by the Chromium Project's Release

    Channels https://www.chromium.org/getting-involved/dev-channel
  15. Upgrading from one major release to the next is as

    easy as clearing all deprecations and switching the major number
  16. 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 ...
  17. 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 ...
  18. 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);
  19. function greeter(person) { return "Hello, " + person.fullName; } var

    user = { firstName: 'a', lastName: 'b', fullName() { return this.firstName + ' ' + this.lastName; } }; document.body.innerHTML = greeter(user);
  20. …helps catch bugs early on …IDEs ca help you more

    …typed APIs support large teams …helps avoid performance pitfalls
  21. <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>