An intoduction to Ember.js' Glimmer VM VM and Glimmer.js
Feel the Glimmer
View Slide
Marco Otte-Witte@marcoow
simplabs.com@simplabs
https://glimmerjs.com
"light-weight UI components for the web"
https://github.com/emberjs/ember.js/issues/13949
https://worldvectorlogo.com/logo/react
{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'] }] }
{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'] }] }
+ { type: 'li', props: {}, children: ['Yehuda Katz'] }- { type: 'li', props: {}, children: ['Ben Alpert'] }
The Glimmer Pipeline1. Pre-Compilation2. Initial render3. Re-render
Pre-CompilationTemplates are pre-compiled (at buildtime) into opcodes that the VMexecutes during initial render
{{home}}{{profile}}{{messages}}
[[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]]
Offset 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F00000000 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 ............ ...
Initial renderDOM elements are created andopcodes for re-renders are generated
StartProfilNachrichten
{{home}}{{profile}}{{messages}}only these can change at all
[["OPTIMIZED-CAUTIOUS-UPDATE", "home"],["OPTIMIZED-CAUTIOUS-UPDATE", "profile"],["OPTIMIZED-CAUTIOUS-UPDATE", "messages"]]
Update RendersUpdate opcodes are executed
let foo = 1;let fooReference: Reference = {value() {return foo;}};fooReference.value(); // => 1foo++;fooReference.value(); // => 2
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(); // => 3foo = 2;fooPlusBarReference.value(); // => 4
interface EntityTag {value(): T;validate(ticket: T): boolean;}interface Tagged {tag: EntityTag;}interface TaggedReference extends Reference, Tagged {}
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(); // => 1set(person, 'name', 'Yehuda Katz');nameReference.tag.validate(1); // => falsenameReference.value(); // => 'Yehuda Katz'nameReference.tag.value(); // => 2
http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/
The Glimmer VM was released withEmber.js 2.10
"Stability without Stagnation"
https://glimmerjs.comhttps://glimmerjs.com
» ls -lh514K ember-data.prod.js1.6M ember.prod.js1.1K react-dom.js644K react.js
Like React, Glimmer.js is only the "V"and some of the "C" in "MVC" (akacomponents)
npm install -g ember-cliember new my-app -b @glimmer/blueprintcd my-app/ && ember s
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 ...
https://github.com/Microsoft/TypeScript/issues/1375
{{#each visibleTodos key="_id" as |todo|}}@onEdit={{action editTodo}}@onToggle={{action toggleTodo}}@onDestroy={{action removeTodo}} />{{/each}}
@tracked('todos')get activeTodos() {return this.todos.filter(todo => !todo.completed)}
Demohttps://github.com/glimmerjs/todomvc-demo
Try it yourself!http://try.glimmerjs.com
Ember's Future
Where does this leave Ember.js?
https://emberjs.com/blog/2017/04/05/emberconf-2017-state-of-the-union.html
cp -r glimmer-app/src/ui/components ember-app/src/ui
ember-router will be the next thing tobe extracted into it's own standalonelibrary
https://www.youtube.com/watch?v=62xd25kEZ3o&t=27617s
Thanks
Q&A