The Future of Ember Templating

This talk is a technical deep dive into the implementation of Glimmer 2, and what it will enable going forward.

It will cover the basic architecture of Glimmer 2, how it integrates with Ember, and how it fits in with FastBoot and Progressive Web Apps.

Transcript

1. ⚠ Serious Warning™ Very dense and technical content ahead. TypeScript code examples included. It probably won't help you with your job. You might want to reconsider going to @mixonic's components talk instead.
2. Godfrey Chan @chancancode
4. No idea what this talk is about but it's hilarious @chancancode #EmberConf Luke Melia @lukemelia
5. Did @chancancode deliberately misspell temperature as tempreature? #EmberConf Gaurav Munjal @gaurav9576
14. Be ambiguous
17. Please back
18. design
22. You're closing
24. Templates
25. Ember ❤ HTML+CSS
26. Declarative
27. Pure Functions
28. FRP Programs
29. Yehuda Katz @wycats
30. References
31. interface)Reference<T>){) ))value():)T;) }
32. let)foo)=)1;) let)fooReference:)Reference<number>)=){) ))value()){) ))))return)foo;) ))}) };) fooReference.value();)//)=>)1) foo++;) fooReference.value();)//)=>)2
33. 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) bar)=)3;) fooPlusBarReference.value();)//)=>)5)
34. <h1>Welcome,){{user.name.first}}!</h1>) <p>Message)of)the)day:){{motd}}</p>
35. Validators
36. <p>{{uppercase)(concat)book.title)":)")book.subtitle)}}</p>
37. <p>{{uppercase)(concat)book.title)":)")book.subtitle)}}</p>
38. <p>{{uppercase)(concat)book.title)":)")book.subtitle)}}</p>
39. class)UppercaseReference)implements)Reference<string>){) ))private)str:)Reference<string>[];) ))constructor(str:)Reference<string>)){) ))))this.str)=)str;) ))}) ))value():)string){) ))))return)this.str.value().toUpperCase();) ))}) }
40. class)ConcatReference)implements)Reference<string>){) ))private)parts:)Reference<string>[];) ))constructor(...parts:)Reference<string>[])){) ))))this.parts)=)parts;) ))}) ))value():)string){) ))))return)this.parts.map(reference)=>)reference.value()).join('');) ))}) }
41. interface)EntityTag<T>){) ))value():)T;) ))validate(ticket:)T):)boolean;) }
42. interface)TaggedReference<T>)extends)Reference<T>){) ))tag:)EntityTag<any>;) }
43. class)UppercaseReference)implements)TaggedReference<string>){) ))public)tag:)EntityTag<any>;) ))private)str:)Reference<string>[];) ))constructor(str:)Reference<string>)){) ))))this.tag)=)str.tag;) ))))this.str)=)str;) ))}) ))value():)string){) ))))return)this.str.value().toUpperCase();) ))}) }
44. class)UppercaseReference)implements)TaggedReference<string>){) ))public)tag:)EntityTag<any>;) ))private)str:)Reference<string>[];) ))constructor(str:)Reference<string>)){) ))))this.tag)=)str.tag;) ))))this.str)=)str;) ))}) ))value():)string){) ))))return)this.str.value().toUpperCase();) ))}) }
45. class)ConcatReference)implements)TaggedReference<string>){) ))public)tag:)EntityTag<any>;) ))private)parts:)TaggedReference<string>[];) ))constructor(...parts:)TaggedReference<string>[])){) ))))this.tag)=)new)CompositeTag(parts.map(reference)=>)reference.tag));) ))))this.parts)=)parts;) ))}) ))value():)string){) ))))return)this.parts.map(reference)=>)reference.value()).join('');) ))}) }
46. class)ConcatReference)implements)TaggedReference<string>){) ))public)tag:)EntityTag<any>;) ))private)parts:)TaggedReference<string>[];) ))constructor(...parts:)TaggedReference<string>[])){) ))))this.tag)=)new)CompositeTag(parts.map(reference)=>)reference.tag));) ))))this.parts)=)parts;) ))}) ))value():)string){) ))))return)this.parts.map(reference)=>)reference.value()).join('');) ))}) }
47. class)CompositeTag)implements)EntityTag<any[]>){) ))private)tags:)EntityTag<any>[];) ))constructor(tags:)EntityTag<any>[])){) ))))this.tags)=)tags;) ))}) ))value():)any[]){) ))))return)this.tags.map(tag)=>)tag.value());) ))}) ))validate(tickets:)any[]):)boolean){) ))))let){)tags)})=)this;) ))))tags.forEach((tag,)i))=>){) ))))))if)(!tag.validate(tickets[i]))){) ))))))))return)false;) ))))))}) ))))});) ))))return)true;) ))}) };
48. Revision Tags
49. bit.ly/glimmer-guides
50. Take a deep breath.
51. Runtime
52. <p>Welcome,){{user.name}}!</p>) {{#if)user.isAdmin}}) ))<p><a)href="/admin">Admin)Panel</a></p>) {{/if}}
53. <p>Welcome,){{user.name}}!</p>) {{#if)user.isAdmin}}) ))<p><a)href="/admin">Admin)Panel</a></p>) {{/if}}
58. <p>Welcome,){{user.name}}!</p>) {{#if)user.isAdmin}}) ))<p><a)href="/admin">Admin)Panel</a></p>) {{/if}}
60. Optimizations
61. Const Optimization
64. Adaptive Optimizations
66. Inlining and Specializations
68. Chunked Rendering
70. Rehydration
71. interface)ElementStack){) )openElement(tag:)InternedString):)Element;) )newDestroyable(d:)Destroyable);) )newBounds(bounds:)Bounds);) )appendText(string:)string):)Text;) )appendComment(string:)string):)Comment;) )insertHTMLBefore(nextSibling:)Node,)html:)string):)Fragment;) )setAttribute(name:)InternedString,)reference:)PathReference<string>);) )setAttributeNS(namespace:)InternedString,)name:)InternedString,)reference:)PathReference<string>);) )setProperty(name:)InternedString,)reference:)PathReference<any>);) )closeElement();) )appendHTML(html:)string):)Bounds;) }
72. Glimmer Native
73. interface)ComponentDefinition<T>){) )name:)string;)//)for)debugging) )manager:)ComponentManager<T>;) )ComponentClass:)ComponentClass;) )compile(builder:)ComponentLayoutBuilder);) }) export)interface)ComponentManager<T>){) )create(definition:)ComponentDefinition<T>,)attrs:)EvaluatedArgs,)dynamicScope:)DynamicScope):)T;) )getSelf(component:)T):)any;) )didCreateElement(component:)T,)element:)Element,)operations:)ElementOperations);) )didCreate(component:)T);) )update(component:)T,)attrs:)EvaluatedArgs,)dynamicScope:)DynamicScope);) )didUpdate(component:)T);) )getDestructor(component:)T):)Destroyable;) }
74. Build your own React
75. interface)Environment){) )toConditionalReference(reference:)Reference<Opaque>):)Reference<boolean>;) )iterableFor(reference:)Reference<Opaque>,)args:)EvaluatedArgs):)OpaqueIterable;) )getDOM():)DOMHelper;) )getIdentity(object:)HasGuid):)InternedString;) )statement(statement:)StatementSyntax):)StatementSyntax;) )refineStatement(statement:)ParsedStatement):)StatementSyntax;) )rootReferenceFor(obj:)any):)PathReference<Opaque>;) )hasHelper(helperName:)InternedString[]):)boolean;) )lookupHelper(helperName:)InternedString[]):)Helper;) )hasComponentDefinition(tagName:)InternedString[]):)boolean;) )getComponentDefinition(tagName:)InternedString[]):)ComponentDefinition<Opaque>;) }
76. It's not just us.
79. But that's not it.
81. Thank you for being an awesome community ♥$%&'
83. One More Thing™