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
220
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
99
Handling images on the web
marcoow
0
390
SSR, SPAs and PWAs
marcoow
0
340
Fast, Fast, Fast
marcoow
2
440
Feel the Glimmer - ParisJS
marcoow
1
460
Feel the Glimmer - MunichJS 11/17
marcoow
0
130
The JSON:API spec
marcoow
3
1.7k
Leveraging the complete Ember Toolbelt
marcoow
0
290
Templates and Logic in Ember
marcoow
0
620
Other Decks in Programming
See All in Programming
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
生成AIをkintoneに連携してみた
hideg
0
230
20240706_CDKConf
takuyay0ne
0
1.2k
AHC035解説
terryu16
0
720
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
Featured
See All Featured
BBQ
matthewcrist
82
9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Designing for Performance
lara
604
67k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Visualization
eitanlees
139
14k
The Invisible Customer
myddelton
117
13k
Gamification - CAS2011
davidbonilla
78
4.9k
Practical Orchestrator
shlominoach
185
10k
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