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
230
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
110
Handling images on the web
marcoow
0
390
SSR, SPAs and PWAs
marcoow
0
350
Fast, Fast, Fast
marcoow
2
460
Feel the Glimmer - ParisJS
marcoow
1
490
Feel the Glimmer - MunichJS 11/17
marcoow
0
130
The JSON:API spec
marcoow
3
1.7k
Leveraging the complete Ember Toolbelt
marcoow
0
330
Templates and Logic in Ember
marcoow
0
670
Other Decks in Programming
See All in Programming
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
340
Synchronizationを支える技術
s_shimotori
1
150
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.6k
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
580
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Identifying User Idenity
moro
6
7.9k
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
Featured
See All Featured
Being A Developer After 40
akosma
86
590k
RailsConf 2023
tenderlove
29
880
Git: the NoSQL Database
bkeepers
PRO
425
64k
Building an army of robots
kneath
302
42k
Why Our Code Smells
bkeepers
PRO
334
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Designing for Performance
lara
604
68k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
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