Template Instantiation

5FNQMBUF*OTUBOUJBUJPO )5.-.PEVMFT4UVEZ !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 <template> <article> <h1>{{title}}</h1> </article> </template>

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

w 4IPVMECFBCMFUPVQEBUFJUTTIBEPXUSFFXIFOUIF DPSSFTQPOEJOH+4WBMVFTBSFVQEBUFE 6TF$BTF <template> <div> <span>{{id}}</span> <span>{{name}}</span> </div> </template>
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’} <template> <div> <span>{{id}}</span> <span>{{capitalize name}}</span> </div> </template>

w 4IPVMECFBCMFUPVTFBCJEJSFDUJPOBMCJOEJOHNFDIBOJTN UPQSPQBHBUFUIFWBMVFCBDLGSPNUIFTIBEPXUSFF w *U`TOPUTVQQPSUFEOBUJWFMZ CFDBVTFJU`TOPUOFDFTTBSJMZ EFTJSBCMF FH3FBDU 6TF$BTF var
obj = {id: 100, name: ‘foo’} <template> <div> <span>{{id}}</span> <input type=“text” value={{name}} /> </div> </template>

w 4IPVMECFBCMFUPTFUBOESFNPWFBOBUUSJCVUFCBTFEPO +4WBMVFT 6TF$BTF var obj = {id: 100, name:
‘foo’} <template> <div> <span>{{id}}</span> <input type=“checkbox” checked /> <!— or —> <input type=“checkbox” /> </div>

w 4IPVMECFBCMFUPTFUBEFGBVMUWBMVF 6TF$BTF <template> <div> <span>{{id}}</span> <input type=“text” placeholder={{customPlaceholder ||
‘input your name’}} /> </div> </template>

w 4IPVMECFBCMFUPUPHHMF%0.OPEFTCBTFEPO+4WBMVFT 6TF$BTF <template> <div> <span>{{id}}</span> <template directive=“if” expression=“name”> <p>Your
name is {{name}}</p> </template> </div> </template>

w 4IPVMECFBCMFUPVTFBTJOHMFUFNQMBUFUPJOTUBOUJBUFBO BSSBZPGFMFNFOU 6TF$BTF <template> <ul> <template directive=“foreach” expression=“users”> <li>{{id}}:{{name}}</li>
</template> </ul> </template>

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’; <template> <div>{{capitalize
name}}</div> </template> // templatePart.expression = “capitalize name”; // … // templatePart.value = “Foo”; // or // templatePart.replace([dom1, dom2]); // or // templatePart.replaceHTML(‘<em>Foo</em>’);

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<TemplatePart>, any state); dictionary TemplateTypeInit { TemplateProcessCallback processCallback; TemplateProcessCallback? createCallback; }

w :PVDBOEFpOFBGVODUJPOUPQSPDFTTUFNQMBUFQBSUTCZ UFNQMBUFQSPDFTTDBMMCBDL 5FNQMBUF1SPDFTT$BMMCBDL <my-template>…</template> <script> 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]; } } });

5FNQMBUF1SPDFTT$BMMCBDL <template type=“loop”> <ul> <template directive=“foreach” expression=“items”> <li>{{name}}</li> </template> </ul>
</template> 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` <ul> ${repeat(items, (item) => item.id, (item) => html`<li>${item.name}</li>` } </ul> `, 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

Template Instantiation

Template Instantiation

koba04

More Decks by koba04

Other Decks in Programming

Featured

Transcript

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

#BDLHSPVOE

w 5IFSFBSFNBOZJODPNQBUJCMFUFNQMBUFTZOUBYFTBOE TFNBOUJDT w )BSEUPDPNCJOFSFVTBCMFDPNQPOFOUTBDSPTTMJCSBSJFT w "EBQUJOH.VTUBDIFTZOUBYGPSTVCTUJUVUJPOCFDBVTFPG TJNQMJDJUZ w EJW\\OBNF^^EJW

6TF$BTFT

w 4IPVMECFBCMFUPDSFBUFBTIBEPXUSFFGSPN)5.- UFNQMBUFXJUIPVUIBWJOHUPNBOVBMMZDPOTUSVDUUIF%0. USFF 6TF$BTF <template> <article> <h1>{{title}}</h1> </article> </template>

w 4IPVMECFBCMFUPTUBNQPVUUIFDPOUFOU`TWBMVFXJUIB WBMVFTUPSFEJOB+40CKFDUFBTJMZ 6TF$BTF <template> <div> <span>{{id}}</span> <span>{{name}}</span> </div> </template>

w 4IPVMECFBCMFUPVQEBUFJUTTIBEPXUSFFXIFOUIF DPSSFTQPOEJOH+4WBMVFTBSFVQEBUFE 6TF$BTF <template> <div> <span>{{id}}</span> <span>{{name}}</span> </div> </template>

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

w 4IPVMECFBCMFUPVTFBCJEJSFDUJPOBMCJOEJOHNFDIBOJTN UPQSPQBHBUFUIFWBMVFCBDLGSPNUIFTIBEPXUSFF w *U`TOPUTVQQPSUFEOBUJWFMZ CFDBVTFJU`TOPUOFDFTTBSJMZ EFTJSBCMF FH3FBDU 6TF$BTF var

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

w 4IPVMECFBCMFUPTFUBEFGBVMUWBMVF 6TF$BTF <template> <div> <span>{{id}}</span> <input type=“text” placeholder={{customPlaceholder ||

w 4IPVMECFBCMFUPUPHHMF%0.OPEFTCBTFEPO+4WBMVFT 6TF$BTF <template> <div> <span>{{id}}</span> <template directive=“if” expression=“name”> <p>Your

w 4IPVMECFBCMFUPVTFBTJOHMFUFNQMBUFUPJOTUBOUJBUFBO BSSBZPGFMFNFOU 6TF$BTF <template> <ul> <template directive=“foreach” expression=“users”> <li>{{id}}:{{name}}</li>

1SPQPTBMT

#BTJDT [NoInterfaceObject] Interface TemplateInstance : DocumentFragment { void update(any state);

w "OFYQSFTTJPOJOFBDINVTUBDIFDSFBUFTB5FNQMBUF 1BSUTPCKFDU 5FNQMBUF1BSUT // name = ‘foo’; <template> <div>{{capitalize

5FNQMBUF1BSUT interface TemplatePart { readonly attribute DOMString expression; attribute DOMString?

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

w &BDIUFNQMBUFUZQFJTBTTPDJBUFEXJUI 5FNQMBUF1SPDFTT$BMMCBDL 5FNQMBUF1SPDFTT$BMMCBDL interface HTMLTemplateElement { attribute DOMString type;

w :PVDBOEFpOFBGVODUJPOUPQSPDFTTUFNQMBUFQBSUTCZ UFNQMBUFQSPDFTTDBMMCBDL 5FNQMBUF1SPDFTT$BMMCBDL <my-template>…</template> <script> document.defineTemplateType(“my-template”, { createCallback: (instance,

5FNQMBUF1SPDFTT$BMMCBDL <template type=“loop”> <ul> <template directive=“foreach” expression=“items”> <li>{{name}}</li> </template> </ul>

0UIFS-JCSBSJFT

w )5.-UFNQMBUFT WJB+BWB4DSJQUUFNQMBUFMJUFSBMT MJUIUNM 1PMZNFS-BCT import {html, render} from ‘./node_modules/lit-html/lit-html.js’;

w 'BTUBOEMJHIUXFJHIU6*DPNQPOFOUTGPSUIFXFC w )BOEMFCBST)5.-#BST(MJNNFS w 7."SDIJUFDUVSF w "QQFOEBOE6QEBUFPQFSBUJPO w #JOBSZUFNQMBUFT

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 NQMFNFOUBQPMZpMMPG5FNQMBUFOTUBOUJBUJPO w "UUSJCVUFBOE1SPQFSUZ &WFOU)BOEMFSTʜ w 5FNQMBUFUZQFSFHJTUSZUPTIBEPXSPPU w 5IJOLJOHUFNQMBUFQSPDFTTPSJTUIFIBSEFTUJTTVF w

5IBOLT