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

Berlin, May 8th+9th https://ember-workshop.simplabs.com

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

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'] }

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Pre-Compilation Templates are pre-compiled into opcodes that the VM executes during initial render

Slide 13

Slide 13 text

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

Slide 14

Slide 14 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 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Update Renders Update opcodes are executed

Slide 19

Slide 19 text

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

Slide 20

Slide 20 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 21

Slide 21 text

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

Slide 22

Slide 22 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 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

The Glimmer VM was release as part of Ember.js 2.10

Slide 26

Slide 26 text

RFCs Canary Beta Stable LTS https://github.com/emberjs/website/tree/master/source/images/builds

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

the RFC process is inspired by Rust's RFCs https://github.com/rust-lang/rfcs

Slide 30

Slide 30 text

Canary builds are where new features land first (behind feature flags) https://github.com/emberjs/website/tree/master/source/images/builds

Slide 31

Slide 31 text

// config/environment.js var ENV = { EmberENV: { FEATURES: { 'ember-routing-routable-components': true } } };

Slide 32

Slide 32 text

Beta releases have new features that proved stable in Canary enabled by default https://github.com/emberjs/website/tree/master/source/images/builds

Slide 33

Slide 33 text

Stable releases contain everything that proved to be stable in the Beta phase https://github.com/emberjs/website/tree/master/source/images/builds

Slide 34

Slide 34 text

There are new beta and stable releases every 6 weeks

Slide 35

Slide 35 text

the release process is inspired by the Chromium Project's Release Channels https://www.chromium.org/getting-involved/dev-channel

Slide 36

Slide 36 text

http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html

Slide 37

Slide 37 text

Semantic Versioning gives software versions their meaning back (if used correctly)

Slide 38

Slide 38 text

Major.Minor.Patch

Slide 39

Slide 39 text

Ember's 6 weekly stable releases are minor releases and thus backwards compatible

Slide 40

Slide 40 text

…might introduce new deprecations though

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Major Releases do not introduce any new functionality but remove previously deprecated cruft only

Slide 43

Slide 43 text

Upgrading from one major release to the next is as easy as clearing all deprecations and switching the major number

Slide 44

Slide 44 text

The whole community is moving forwards constantly in incremental steps that are easy for everyone to make

Slide 45

Slide 45 text

"Stability without Stagnation"

Slide 46

Slide 46 text

https://glimmerjs.com

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Like React, Glimmer.js is only the "V" in "MVC"

Slide 52

Slide 52 text

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

Slide 53

Slide 53 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 54

Slide 54 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 55

Slide 55 text

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

Slide 56

Slide 56 text

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);

Slide 57

Slide 57 text

function greeter(person) { return "Hello, " + person.fullName; } var user = { firstName: 'a', lastName: 'b', fullName() { return this.firstName + ' ' + this.lastName; } }; document.body.innerHTML = greeter(user);

Slide 58

Slide 58 text

…helps catch bugs early on …IDEs ca help you more …typed APIs support large teams …helps avoid performance pitfalls

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Ember's Future

Slide 63

Slide 63 text

Where does this leave Ember.js?

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

https://glimmerjs.com

Slide 68

Slide 68 text

Thanks

Slide 69

Slide 69 text

simplabs.com @simplabs