The Future of Ember Templating

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.

22bb3e56828870ee9a0dd93aeadbe04a?s=128

Godfrey Chan

March 31, 2016
Tweet

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

  3. None
  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
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. Be ambiguous

  15. None
  16. None
  17. Please back

  18. design

  19. None
  20. None
  21. None
  22. You're closing

  23. None
  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}}

  54. None
  55. None
  56. None
  57. None
  58. <p>Welcome,){{user.name}}!</p>) {{#if)user.isAdmin}}) ))<p><a)href="/admin">Admin)Panel</a></p>) {{/if}}

  59. None
  60. Optimizations

  61. Const Optimization

  62. None
  63. None
  64. Adaptive Optimizations

  65. None
  66. Inlining and Specializations

  67. None
  68. Chunked Rendering

  69. None
  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.

  77. None
  78. None
  79. But that's not it.

  80. None
  81. Thank you for being an awesome community ♥$%&'

  82. None
  83. One More Thing™

  84. None