Tweet
Tweet

Slide 1

Slide 1 text

Feel the Glimmer

Slide 2

Slide 2 text

Marco Otte-Witte @marcoow

Slide 3

Slide 3 text

simplabs.com @simplabs

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

https://glimmerjs.com

Slide 7

Slide 7 text

"light-weight UI components for the web"

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

https://worldvectorlogo.com/logo/react

Slide 10

Slide 10 text

    {this.props.people.map(function(person) { return
  • {person}
    • ; })}
['Dan Abramov', 'Ben Alpert'] { type: 'ul', props: { 'class': 'list' }, children: [ { type: 'li', props: {}, children: ['Dan Abramov'] }, { type: 'li', props: {}, children: ['Ben Alpert'] } ] }

Slide 11

Slide 11 text

    {this.props.people.map(function(person) { return
  • {person}
    • ; })}
['Dan Abramov', 'Yehuda Katz'] { type: 'ul', props: { 'class': 'list' }, children: [ { type: 'li', props: {}, children: ['Dan Abramov'] }, { type: 'li', props: {}, children: ['Yehuda Katz'] } ] }

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Pre-Compilation Templates are pre-compiled (at build time) into opcodes that the VM executes during initial render

Slide 15

Slide 15 text

  • {{home}}
  • {{profile}}
  • {{messages}}

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

  • Start
  • Profil
  • Nachrichten

Slide 20

Slide 20 text

  • {{home}}
  • {{profile}}
  • {{messages}}
only these can change at all

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Update Renders Update opcodes are executed

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

let foo = 1; let bar = 2; let fooReference: Reference = { value() { return foo; } }; let barReference: Reference = { value() { return bar; } }; let fooPlusBarReference: Reference = { value() { return fooReference.value() + barReference.value(); } }; fooPlusBarReference.value(); // => 3 foo = 2; fooPlusBarReference.value(); // => 4

Slide 25

Slide 25 text

interface EntityTag { value(): T; validate(ticket: T): boolean; } interface Tagged { tag: EntityTag; } interface TaggedReference extends Reference, Tagged { }

Slide 26

Slide 26 text

const person: TrackedObject = { tag: new DirtyableTag(), name: 'Godfrey Chan' }; let nameReference: VersionedReference { 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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

The Glimmer VM was released with Ember.js 2.10

Slide 30

Slide 30 text

"Stability without Stagnation"

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Like React, Glimmer.js is only the "V" and some of the "C" in "MVC" (aka components)

Slide 38

Slide 38 text

npm install -g ember-cli ember new my-app -b @glimmer/blueprint cd my-app/ && ember s

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

    {{#each visibleTodos key="_id" as |todo|}} {{/each}}

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Ember's Future

Slide 47

Slide 47 text

Where does this leave Ember.js?

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

ember-router will be the next thing to be extracted into it's own standalone library

Slide 51

Slide 51 text

https://glimmerjs.com

Slide 52

Slide 52 text

https://www.youtube.com/watch?v=62xd25kEZ3o&t=27617s

Slide 53

Slide 53 text

Thanks

Slide 54

Slide 54 text

Q&A

Slide 55

Slide 55 text

simplabs.com @simplabs