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
Search
Marco Otte-Witte
May 02, 2017
Programming
1
240
Feel the Glimmer
An intoduction to Ember.js' Glimmer rendering VM and Glimmer.js
Marco Otte-Witte
May 02, 2017
Tweet
Share
More Decks by Marco Otte-Witte
See All by Marco Otte-Witte
Securing Technology Investments
marcoow
0
200
Handling images on the web
marcoow
0
410
SSR, SPAs and PWAs
marcoow
0
350
Fast, Fast, Fast
marcoow
2
500
Feel the Glimmer - ParisJS
marcoow
1
520
Feel the Glimmer - MunichJS 11/17
marcoow
0
140
The JSON:API spec
marcoow
3
1.8k
Leveraging the complete Ember Toolbelt
marcoow
0
370
Templates and Logic in Ember
marcoow
0
760
Other Decks in Programming
See All in Programming
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
Deep Dive into ~/.claude/projects
hiragram
9
1.6k
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
170
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
技術同人誌をMCP Serverにしてみた
74th
1
430
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
510
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
570
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
820
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
510
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Documentation Writing (for coders)
carmenintech
72
4.9k
Agile that works and the tools we love
rasmusluckow
329
21k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
RailsConf 2023
tenderlove
30
1.1k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Faster Mobile Websites
deanohume
307
31k
Building an army of robots
kneath
306
45k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Transcript
Feel the Glimmer
Marco Otte-Witte @marcoow
simplabs.com @simplabs
None
Berlin, May 8th+9th https://ember-workshop.simplabs.com
https://glimmerjs.com
"light-weight UI components for the web"
https://github.com/emberjs/ember.js/issues/13949
https://worldvectorlogo.com/logo/react
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'] }
The Glimmer Pipeline 1. Pre-Compilation 2. Initial render 3. Re-render
Pre-Compilation Templates are pre-compiled into opcodes that the 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] ]
Initial render DOM elements are created and opcodes for re-renders
are generated
<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 set(person, 'name', 'Yehuda Katz'); nameReference.tag.validate(1); // => false nameReference.value(); // => 'Yehuda Katz' nameReference.tag.value(); // => 2
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 release as part of Ember.js 2.10
RFCs Canary Beta Stable LTS https://github.com/emberjs/website/tree/master/source/images/builds
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
None
the RFC process is inspired by Rust's RFCs https://github.com/rust-lang/rfcs
Canary builds are where new features land first (behind feature
flags) https://github.com/emberjs/website/tree/master/source/images/builds
// config/environment.js var ENV = { EmberENV: { FEATURES: {
'ember-routing-routable-components': true } } };
Beta releases have new features that proved stable in Canary
enabled by default https://github.com/emberjs/website/tree/master/source/images/builds
Stable releases contain everything that proved to be stable in
the Beta phase https://github.com/emberjs/website/tree/master/source/images/builds
There are new beta and stable releases every 6 weeks
the release process is inspired by the Chromium Project's Release
Channels https://www.chromium.org/getting-involved/dev-channel
http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html
Semantic Versioning gives software versions their meaning back (if used
correctly)
Major.Minor.Patch
Ember's 6 weekly stable releases are minor releases and thus
backwards compatible
…might introduce new deprecations though
None
Major Releases do not introduce any new functionality but remove
previously deprecated cruft only
Upgrading from one major release to the next is as
easy as clearing all deprecations and switching the major number
The whole community is moving forwards constantly in incremental steps
that are easy for everyone to make
"Stability without Stagnation"
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" in "MVC"
npm install -g ember-cli/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
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);
function greeter(person) { return "Hello, " + person.fullName; } var
user = { firstName: 'a', lastName: 'b', fullName() { return this.firstName + ' ' + this.lastName; } }; document.body.innerHTML = greeter(user);
…helps catch bugs early on …IDEs ca help you more
…typed APIs support large teams …helps avoid performance pitfalls
<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>
@tracked('todos') get activeTodos() { return this.todos.filter(todo => !todo.completed) }
Demo https://github.com/glimmerjs/todomvc-demo
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 to be extracted into
it's own standalone library
https://glimmerjs.com
Thanks
simplabs.com @simplabs