5FNQMBUF*OTUBOUJBUJPO )5.-.PEVMFT4UVEZ !LPCB

!LPCB

⚠ This is a very early stage!!!

8IBUJT5FNQMBUF*OTUBOUJBUJPO

w IUUQTHJUIVCDPNXDXFCDPNQPOFOUTCMPCHIQBHFT QSPQPTBMT5FNQMBUF*OTUBOUJBUJPONE w IUUQTXXXXPSHXFCQMBU NJOVUFTIUNMJUFN w 1SPQPTFECZ"QQMF !SOJXB PO/PWFNCFSTU w 5FNQMBUF*OTUBOUJBUJPOJTBQSPQPTBMUPQSPWJEFBOBUJWF NFDIBOJTNUPJOTUBOUJBUFBUFNQMBUFFMFNFOUXJUITPNFQBSUT CBTFEPO+BWB4DSJQUWBMVFT w 5FNQMBUF OPU$PNQPOFOU 8IBUJT5FNQMBUF*OTUBOUJBUJPO

#BDLHSPVOE

w 5IFSFBSFNBOZJODPNQBUJCMFUFNQMBUFTZOUBYFTBOE TFNBOUJDT w )BSEUPDPNCJOFSFVTBCMFDPNQPOFOUTBDSPTTMJCSBSJFT w "EBQUJOH.VTUBDIFTZOUBYGPSTVCTUJUVUJPOCFDBVTFPG TJNQMJDJUZ w EJW\\OBNF^^EJW w *OUFSPQFSBCJMJUZDPOpHVSBCMF w .BLFJUFYUFOTJCMFUPJOOPWBUFBOEJUFSBUFRVJDLMZ #BDLHSPVOE

6TF$BTFT

w 4IPVMECFBCMFUPDSFBUFBTIBEPXUSFFGSPN)5.- UFNQMBUFXJUIPVUIBWJOHUPNBOVBMMZDPOTUSVDUUIF%0. USFF 6TF$BTF

{{title}}

w 4IPVMECFBCMFUPTUBNQPVUUIFDPOUFOU`TWBMVFXJUIB WBMVFTUPSFEJOB+40CKFDUFBTJMZ 6TF$BTF template.createInstance({id: 100, name: ‘foo’});

w 4IPVMECFBCMFUPVQEBUFJUTTIBEPXUSFFXIFOUIF DPSSFTQPOEJOH+4WBMVFTBSFVQEBUFE 6TF$BTF const templateInstance = template.createInstance({ id: 100, name: ‘foo’ }); templateInstance.update({id: 100, name: ‘bar’});

w 4IPVMECFBCMFUPDBMMBGVODUJPOXJUI+4WBMVFTCFGPSFJU HFUTJOTFSUFEJOUPUIFUFNQMBUFJOTUBODF 6TF$BTF var obj = {id: 100, name: ‘foo’}

w 4IPVMECFBCMFUPVTFBCJEJSFDUJPOBMCJOEJOHNFDIBOJTN UPQSPQBHBUFUIFWBMVFCBDLGSPNUIFTIBEPXUSFF w *U`TOPUTVQQPSUFEOBUJWFMZ CFDBVTFJU`TOPUOFDFTTBSJMZ EFTJSBCMF FH3FBDU 6TF$BTF var obj = {id: 100, name: ‘foo’}

w 4IPVMECFBCMFUPTFUBOESFNPWFBOBUUSJCVUFCBTFEPO +4WBMVFT 6TF$BTF var obj = {id: 100, name: ‘foo’}

w 4IPVMECFBCMFUPTFUBEFGBVMUWBMVF 6TF$BTF

w 4IPVMECFBCMFUPUPHHMF%0.OPEFTCBTFEPO+4WBMVFT 6TF$BTF

w 4IPVMECFBCMFUPVTFBTJOHMFUFNQMBUFUPJOTUBOUJBUFBO BSSBZPGFMFNFOU 6TF$BTF

• {{id}}:{{name}}

1SPQPTBMT

#BTJDT [NoInterfaceObject] Interface TemplateInstance : DocumentFragment { void update(any state); }; partial interface HTMLTemplateElement { TemplateInstance createInstance(optional any state); } const template = document.getElementById(‘my-template’); const state = {count: 1}; const instance = template.createInstance(state); shadowRoot.appendChild(instance); state = {count: state.count + 1}; instance.update(state);

w "OFYQSFTTJPOJOFBDINVTUBDIFDSFBUFTB5FNQMBUF 1BSUTPCKFDU 5FNQMBUF1BSUT // name = ‘foo’; // templatePart.expression = “capitalize name”; // … // templatePart.value = “Foo”; // or // templatePart.replace([dom1, dom2]); // or // templatePart.replaceHTML(‘Foo’);

5FNQMBUF1BSUT interface TemplatePart { readonly attribute DOMString expression; attribute DOMString? value; stringilyer; } interface AttributeTemplatePart : TemplatePart { readonly attribute Element element; readonly attribute DOMString attributeName; readonly attribute DOMString attributeValue; attribute boolean booleanValue; } interface NodeTemplatePart : TemplatePart { readonly attribute ContainerNode parentNode; readonly attribute Node? previousSibling; readonly attribute Node? nextSibling; [NewObject] readonly NodeList replacementNode; void replace((Node or DOMString)… nodes); void replaceHTML(DOMString html); }

5FNQMBUF1BSUT InnerTemplatePart : NodeTemplatePart { HTMLTemplateElement template; Attribute DOMString directive; }

w &BDIUFNQMBUFUZQFJTBTTPDJBUFEXJUI 5FNQMBUF1SPDFTT$BMMCBDL 5FNQMBUF1SPDFTT$BMMCBDL interface HTMLTemplateElement { attribute DOMString type; }; callback TemplateProcessCallback = void (TemplateInstance, sequence, any state); dictionary TemplateTypeInit { TemplateProcessCallback processCallback; TemplateProcessCallback? createCallback; }

w :PVDBOEFpOFBGVODUJPOUPQSPDFTTUFNQMBUFQBSUTCZ UFNQMBUFQSPDFTTDBMMCBDL 5FNQMBUF1SPDFTT$BMMCBDL … document.defineTemplateType(“my-template”, { createCallback: (instance, parts, state) => { // How do I remove the event listener? listen(‘change’, () => instance.update(state)); }, // default processor is something like this. processCallback: (instance, parts, state) => { for (const part of parts) { part.value = state[part.expression]; } } });

No content

5FNQMBUF1SPDFTT$BMMCBDL

• {{name}}

document.defineTemplateType(‘loop’, { processCallback: (instance, parts, state) => { for (const part of parts) { if (part instance InnerTemplatePart) { switch (part.directive) {
 case ‘foreach’: part.replace( state[expression] .map(item => part.template.createInstance(item)) ); break; } }

0UIFS-JCSBSJFT

w )5.-UFNQMBUFT WJB+BWB4DSJQUUFNQMBUFMJUFSBMT MJUIUNM 1PMZNFS-BCT import {html, render} from ‘./node_modules/lit-html/lit-html.js’; import {repeat} from ‘./node_modules/lit-html/lib/repeat.js’; const items = [{id: 1, name: ‘foo’}, {id: 2, name: ‘bar’}]; render( html`

${repeat(items, (item) => item.id, (item) => html`
• ${item.name}
` }

`, document.querySelector(‘items’) );

w 'BTUBOEMJHIUXFJHIU6*DPNQPOFOUTGPSUIFXFC w )BOEMFCBST)5.-#BST(MJNNFS w 7."SDIJUFDUVSF w "QQFOEBOE6QEBUFPQFSBUJPO w #JOBSZUFNQMBUFT (MJNNFSKT &NCFS Handlebars Template ! Compile IR(Intermediate Representation) -> Opcodes ! VM executes opcodes Browser, Node

w )5.-UFNQMBUFT WJB+BWB4DSJQUUFNQMBUFMJUFSBMT (MJNNFS &NCFS https://engineering.linkedin.com/blog/2017/06/glimmer--blazing-fast-rendering-for-ember-js--part-2

'VUVSF

w *NQMFNFOUBQPMZpMMPG5FNQMBUF*OTUBOUJBUJPO w "UUSJCVUFBOE1SPQFSUZ &WFOU)BOEMFSTʜ w 5FNQMBUFUZQFSFHJTUSZUPTIBEPXSPPU w 5IJOLJOHUFNQMBUFQSPDFTTPSJTUIFIBSEFTUJTTVF w ,FFQEFGBVMUQSPDFTTPSTJNQMFBOESFTFSWFUIFTQBDF GPSUIFGVUVSF w 1SPNJTFTVQQPSU 'VUVSF WPSW

5IBOLT