Template Instantiation

#html_modules_study
https://web-study.connpass.com/event/70731/

Transcript

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

   View Slide

2. !LPCB
   

   View Slide

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

   View Slide

4. 8IBUJT5FNQMBUF*OTUBOUJBUJPO
   

   View Slide

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
   

   View Slide

6. #BDLHSPVOE
   

   View Slide

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

   View Slide

8. 6TF$BTFT
   

   View Slide

9. w 4IPVMECFBCMFUPDSFBUFBTIBEPXUSFFGSPN)5.-
   UFNQMBUFXJUIPVUIBWJOHUPNBOVBMMZDPOTUSVDUUIF%0.
   USFF
   6TF$BTF
   
   
   {{title}}
   
   
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. w 4IPVMECFBCMFUPUPHHMF%0.OPEFTCBTFEPO+4WBMVFT
    6TF$BTF
    
    
    {{id}}
    
    Your name is {{name}}
    
    
    
    

    View Slide

17. w 4IPVMECFBCMFUPVTFBTJOHMFUFNQMBUFUPJOTUBOUJBUFBO
    BSSBZPGFMFNFOU
    6TF$BTF
    
    
    
    {{id}}:{{name}}
    
    
    
    

    View Slide

18. 1SPQPTBMT
    

    View Slide

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);
    

    View Slide

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

    View Slide

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);
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. View Slide

26. 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;
    }
    }
    

    View Slide

27. 0UIFS-JCSBSJFT
    

    View Slide

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`
    
    ${repeat(items, (item) => item.id, (item) =>
    html`${item.name}`
    }
    
    `,
    document.querySelector(‘items’)
    );
    

    View Slide

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
    

    View Slide

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

    View Slide

31. 'VUVSF
    

    View Slide

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

    View Slide

33. 5IBOLT
    

    View Slide