Pro Yearly is on sale from $80 to $50! »

Template Instantiation

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=47 koba04
November 15, 2017

Template Instantiation

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=128

koba04

November 15, 2017
Tweet

Transcript

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

  2. !LPCB

  3. ⚠ This is a very early stage!!!

  4. 8IBUJT5FNQMBUF*OTUBOUJBUJPO

  5. 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
  6. #BDLHSPVOE

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

    w *OUFSPQFSBCJMJUZDPOpHVSBCMF w .BLFJUFYUFOTJCMFUPJOOPWBUFBOEJUFSBUFRVJDLMZ #BDLHSPVOE
  8. 6TF$BTFT

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

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

    template.createInstance({id: 100, name: ‘foo’});
  11. 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’});
  12. w 4IPVMECFBCMFUPDBMMBGVODUJPOXJUI+4WBMVFTCFGPSFJU HFUTJOTFSUFEJOUPUIFUFNQMBUFJOTUBODF 6TF$BTF var obj = {id: 100, name:

    ‘foo’} <template> <div> <span>{{id}}</span> <span>{{capitalize name}}</span> </div> </template>
  13. 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>
  14. 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>
  15. w 4IPVMECFBCMFUPTFUBEFGBVMUWBMVF 6TF$BTF <template> <div> <span>{{id}}</span> <input type=“text” placeholder={{customPlaceholder ||

    ‘input your name’}} /> </div> </template>
  16. 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>
  17. w 4IPVMECFBCMFUPVTFBTJOHMFUFNQMBUFUPJOTUBOUJBUFBO BSSBZPGFMFNFOU 6TF$BTF <template> <ul> <template directive=“foreach” expression=“users”> <li>{{id}}:{{name}}</li>

    </template> </ul> </template>
  18. 1SPQPTBMT

  19. #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);
  20. 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>’);
  21. 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); }
  22. 5FNQMBUF1BSUT InnerTemplatePart : NodeTemplatePart { HTMLTemplateElement template; Attribute DOMString directive;

    }
  23. 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; }
  24. 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]; } } });
  25. None
  26. 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; } }
  27. 0UIFS-JCSBSJFT

  28. 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’) );
  29. 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
  30. w )5.-UFNQMBUFT WJB+BWB4DSJQUUFNQMBUFMJUFSBMT (MJNNFS &NCFS https://engineering.linkedin.com/blog/2017/06/glimmer--blazing-fast-rendering-for-ember-js--part-2

  31. 'VUVSF

  32. w *NQMFNFOUBQPMZpMMPG5FNQMBUF*OTUBOUJBUJPO w "UUSJCVUFBOE1SPQFSUZ &WFOU)BOEMFSTʜ w 5FNQMBUFUZQFSFHJTUSZUPTIBEPXSPPU w 5IJOLJOHUFNQMBUFQSPDFTTPSJTUIFIBSEFTUJTTVF w

    ,FFQEFGBVMUQSPDFTTPSTJNQMFBOESFTFSWFUIFTQBDF GPSUIFGVUVSF w 1SPNJTFTVQQPSU 'VUVSF  WPSW
  33. 5IBOLT