Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Template Instantiation

koba04
November 15, 2017

Template Instantiation

koba04

November 15, 2017
Tweet

More Decks by koba04

Other Decks in Programming

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