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
140
Handling images on the web
marcoow
0
400
SSR, SPAs and PWAs
marcoow
0
350
Fast, Fast, Fast
marcoow
2
470
Feel the Glimmer - ParisJS
marcoow
1
500
Feel the Glimmer - MunichJS 11/17
marcoow
0
130
The JSON:API spec
marcoow
3
1.8k
Leveraging the complete Ember Toolbelt
marcoow
0
350
Templates and Logic in Ember
marcoow
0
710
Other Decks in Programming
See All in Programming
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Grafana Cloudとソラカメ
devoc
0
140
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Statistics for Hackers
jakevdp
797
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building Your Own Lightsaber
phodgson
104
6.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Side Projects
sachag
452
42k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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