An intoduction to Ember.js' Glimmer rendering VM and Glimmer.js
Feel the Glimmer
View Slide
Marco Otte-Witte@marcoow
simplabs.com@simplabs
Berlin, May 8th+9thhttps://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 Pipeline1. Pre-Compilation2. Initial render3. Re-render
Pre-CompilationTemplates are pre-compiled intoopcodes that the VM executes duringinitial render
{{home}}{{profile}}{{messages}}
[[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 renderDOM elements are created andopcodes for re-renders are generated
{{home}}{{profile}}{{messages}}only these can change at all
[["OPTIMIZED-CAUTIOUS-UPDATE", "home"],["OPTIMIZED-CAUTIOUS-UPDATE", "profile"],["OPTIMIZED-CAUTIOUS-UPDATE", "messages"]]
Update RendersUpdate opcodes are executed
let foo = 1;let fooReference: Reference = {value() {return foo;}};fooReference.value(); // => 1foo++;fooReference.value(); // => 2
let foo = 1;let bar = 2;let fooReference: Reference = {value() {return foo;}};let barReference: Reference = {value() {return bar;}};let fooPlusBarReference: Reference = {value() {return fooReference.value() + barReference.value();}};fooPlusBarReference.value(); // => 3foo = 2;fooPlusBarReference.value(); // => 4
interface EntityTag {value(): T;validate(ticket: T): boolean;}interface Tagged {tag: EntityTag;}interface TaggedReference extends Reference, Tagged {}
const person: TrackedObject = {tag: new DirtyableTag(),name: 'Godfrey Chan'};let nameReference: VersionedReference {tag: person.tag,value() {return person.name;}};nameReference.value(); // => 'Godfrey Chan'nameReference.tag.value(); // => 1set(person, 'name', 'Yehuda Katz');nameReference.tag.validate(1); // => falsenameReference.value(); // => 'Yehuda Katz'nameReference.tag.value(); // => 2
http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/
The Glimmer VM was release as part ofEmber.js 2.10
RFCs Canary Beta Stable LTShttps://github.com/emberjs/website/tree/master/source/images/builds
RFCs are were new features andchanges are discussed in the openbefore implementation beginshttps://github.com/emberjs/website/tree/master/source/images/builds
the RFC process is inspired by Rust'sRFCshttps://github.com/rust-lang/rfcs
Canary builds are where new featuresland first (behind feature flags)https://github.com/emberjs/website/tree/master/source/images/builds
// config/environment.jsvar ENV = {EmberENV: {FEATURES: {'ember-routing-routable-components': true}}};
Beta releases have new features thatproved stable in Canary enabled bydefaulthttps://github.com/emberjs/website/tree/master/source/images/builds
Stable releases contain everything thatproved to be stable in the Beta phasehttps://github.com/emberjs/website/tree/master/source/images/builds
There are new beta and stable releasesevery 6 weeks
the release process is inspired by theChromium Project's Release Channelshttps://www.chromium.org/getting-involved/dev-channel
http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html
Semantic Versioninggives software versions their meaningback(if used correctly)
Major.Minor.Patch
Ember's 6 weekly stable releases areminor releases and thus backwardscompatible
…might introduce new deprecationsthough
Major Releases do not introduce anynew functionality but remove previouslydeprecated cruft only
Upgrading from one major release tothe next is as easy as clearing alldeprecations and switching the majornumber
The whole community is movingforwards constantly in incrementalsteps that are easy for everyone tomake
"Stability without Stagnation"
» ls -lh514K ember-data.prod.js1.6M ember.prod.js1.1K react-dom.js644K react.js
Like React, Glimmer.js is only the "V" in"MVC"
npm install -g ember-cli/ember-cliember new my-app -b @glimmer/blueprintcd 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 ...
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
{{#each visibleTodos key="_id" as |todo|}}@onEdit={{action editTodo}}@onToggle={{action toggleTodo}}@onDestroy={{action removeTodo}} />{{/each}}
@tracked('todos')get activeTodos() {return this.todos.filter(todo => !todo.completed)}
Demohttps://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 tobe extracted into it's own standalonelibrary
Thanks