Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Feel the Glimmer - ParisJS
Search
Marco Otte-Witte
November 29, 2017
Programming
1
520
Feel the Glimmer - ParisJS
An intoduction to Ember.js' Glimmer VM VM and Glimmer.js
Marco Otte-Witte
November 29, 2017
Tweet
Share
More Decks by Marco Otte-Witte
See All by Marco Otte-Witte
Securing Technology Investments
marcoow
0
210
Handling images on the web
marcoow
0
410
SSR, SPAs and PWAs
marcoow
0
350
Fast, Fast, Fast
marcoow
2
500
Feel the Glimmer - MunichJS 11/17
marcoow
0
140
The JSON:API spec
marcoow
3
1.8k
Leveraging the complete Ember Toolbelt
marcoow
0
380
Feel the Glimmer
marcoow
1
240
Templates and Logic in Ember
marcoow
0
770
Other Decks in Programming
See All in Programming
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
Deep Dive into Kotlin Flow
jmatsu
1
330
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
430
為你自己學 Python - 冷知識篇
eddie
1
350
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
850
OSS開発者という働き方
andpad
5
1.7k
1から理解するWeb Push
dora1998
7
1.9k
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Being A Developer After 40
akosma
90
590k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Automating Front-end Workflow
addyosmani
1370
200k
Practical Orchestrator
shlominoach
190
11k
How to Ace a Technical Interview
jacobian
279
23k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Transcript
Feel the Glimmer
Marco Otte-Witte @marcoow
simplabs.com @simplabs
None
None
https://glimmerjs.com
"light-weight UI components for the web"
https://github.com/emberjs/ember.js/issues/13949
https://worldvectorlogo.com/logo/react
<ul> {this.props.people.map(function(person) { return <li>{person}</li>; })} </ul> ['Dan Abramov', 'Ben
Alpert'] { 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: ['Ben Alpert'] } + ]}
<ul> {this.props.people.map(function(person) { return <li>{person}</li>; })} </ul> ['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 Pipeline 1. Pre-Compilation 2. Initial render 3. Re-render
Pre-Compilation Templates are pre-compiled (at build time) into opcodes that
the Glimmer VM executes during initial render
<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>
[ [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 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 ............ ...
Initial render DOM elements are created and opcodes for re-renders
are generated
[ [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] ]
<ul class="nav nav-tabs"> <li class="active"> <a href="/home">Start</a> </li> <li> <a
href="/profile">Profil</a> </li> <li> <a href="/messages">Nachrichten</a> </li> </ul>
<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
[ ["OPTIMIZED-CAUTIOUS-UPDATE", "home"], ["OPTIMIZED-CAUTIOUS-UPDATE", "profile"], ["OPTIMIZED-CAUTIOUS-UPDATE", "messages"] ]
Update Renders Update opcodes are executed
let foo = 1; let fooReference: Reference<number> = { value()
{ return foo; } }; fooReference.value(); // => 1 foo++; fooReference.value(); // => 2
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
interface EntityTag<T> { value(): T; validate(ticket: T): boolean; } interface
Tagged { tag: EntityTag<any>; } interface TaggedReference<T> extends Reference<T>, Tagged { }
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 person.name = 'Yehuda Katz'; nameReference.tag.validate(1); // => false nameReference.value(); // => 'Yehuda Katz' nameReference.tag.value(); // => 2
class UpdateOpcode { execute() { if (!this.reference.tag.validate(this._lastTag)) { this._lastTag =
this.reference.tag.value(); let newValue = this.reference.value(); this.domNode.textContent = newValue; // update DOM } } }
http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/
http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/
The Glimmer VM was released with Ember.js 2.10
"Stability without Stagnation"
None
https://glimmerjs.com https://glimmerjs.com
» ls -lh 514K ember-data.prod.js 1.6M ember.prod.js 1.1K react-dom.js 644K
react.js
None
None
None
Like React, Glimmer.js is only the "V" and some of
the "C" in "MVC" (aka components)
npm install -g ember-cli ember new my-app -b @glimmer/blueprint cd
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 ...
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
<ul id="todo-list" class="todo-list"> {{#each visibleTodos key="_id" as |todo|}} <TodoItem @todo={{todo}}
@onEdit={{action editTodo}} @onToggle={{action toggleTodo}} @onDestroy={{action removeTodo}} /> {{/each}} </ul>
@tracked('todos') get activeTodos() { return this.todos.filter(todo => !todo.completed) }
Demo https://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
None
None
None
saved time and money
cp -r glimmer-app/src/ui/components ember-app/src/ui
ember-router will be the next thing to be extracted into
it's own standalone library
https://glimmerjs.com
https://www.dotjs.io
Thanks
Q&A
simplabs.com @simplabs