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

Webコンポーネント関連の最新動向 / Recent Topics on Web Components

tipo159
February 09, 2018

Webコンポーネント関連の最新動向 / Recent Topics on Web Components

・Webコンポーネント関連仕様の各ブラウザ実装状況
・lit-html
・HTML Template Instantiation
・データバインディングの課題

tipo159

February 09, 2018
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

  1. Webίϯϙʔωϯτؔ࿈ͷ࠷৽ಈ޲
    ٢঵ࣉ.pm #13
    2018.2.9
    tipo159

    View full-size slide

  2. ΞδΣϯμ
    • Webίϯϙʔωϯτؔ࿈࢓༷ͷ֤ϒϥ΢β࣮૷ঢ়گ
    • lit-html
    • HTML Template Instantiation
    • σʔλόΠϯσΟϯάͷ՝୊
    2

    View full-size slide

  3. Custom Elements v1
    • ৽͍͠DOMཁૉΛఆٛ͢ΔͨΊͷ࢓༷
    • W3CͰ͸2016.10.13ͷϫʔΩϯάυϥϑτ͕࠷৽
    https://www.w3.org/TR/custom-elements/
    • ֤ϒϥ΢βͷαϙʔτঢ়گ(https://caniuse.com)
    3

    View full-size slide

  4. Shadow DOM v1
    • ΧϓηϧԽ͞ΕͨϚʔΫΞοϓͱελΠϧΛఆٛ͢Δͨ
    Ίͷ࢓༷
    • W3CͰ͸2017.9.5ͷϫʔΩϯάυϥϑτ͕࠷৽
    https://www.w3.org/TR/shadow-dom/
    • ֤ϒϥ΢βͷαϙʔτঢ়گ(https://caniuse.com)
    4

    View full-size slide

  5. HTML imports
    • HTMLυΩϡϝϯτΛଞͷHTMLυΩϡϝϯτͰ࠶ར༻
    ͢ΔͨΊͷ࢓༷
    • 2017.6.5ʹHTML imports͔ΒͷελΠϧ࡟আ͕ఏҊ
    ͞Εͨ
    https://github.com/TakayoshiKochi/
    deprecate-style-in-html-imports
    • ES2015ͷϞδϡʔϧͰ୅ସՄೳ
    5

    View full-size slide

  6. HTML Template
    • ϚʔΫΞοϓͷஅยΛςϯϓϨʔτͱͯ͠ఆٛ͢ΔͨΊ
    ͷ࢓༷
    • W3CͰ͸2014.3.18ͷϫʔΩϯάυϥϑτ͕࠷৽
    https://www.w3.org/TR/html-templates/
    • ֤ϒϥ΢βͷαϙʔτঢ়گ(https://caniuse.com)
    6

    View full-size slide

  7. lit-html
    • Polymer Summit 2017(2017.8.22-23)ͰΞφ΢ϯε͞Εͨ
    PolymerLabsͷϓϩδΣΫτ
    https://github.com/Polymer/lit-html
    • htmlλάؔ਺͸HTMLςϯϓϨʔτ͔ΒTemplateResultΛ࡞
    ੒ɼrenderؔ਺͸TemplateResult͔ΒDOMίϯςφΛ࡞੒
    const items = [1, 2, 3];
    const render = () => html`items = ${items.map((i) => `item: ${i}`)}`;
    • 0.8.0ͷϦϦʔε४උதʢ·ͩϓϩμΫγϣϯίʔυʹ࢖͑
    Δ඼࣭Ͱ͸ͳ͍ʣ
    7

    View full-size slide

  8. js-framework-benchmark (Duration)
    https://github.com/krausest/js-framework-benchmark
    8
    WBOJMMBKT
    OPOLFZFE
    MJUIUNM
    WOPO
    BOHVMBS
    WOPO
    SFBDU
    W
    WVFW
    OPOLFZFE
    DSFBUFSPXT
    SFQMBDF
    BMMSPXT

    QBSUJBM
    VQEBUF

    TFMFDUSPX
    TXBQSPXT
    SFNPWFSPX
    DSFBUFNBOZ
    SPXT

    BQQFOE
    SPXTUP

    DMFBSSPXT
    TMPXEPXO
    HFPNFUSJD

    View full-size slide

  9. js-framework-benchmark (Startup metrics)
    https://github.com/krausest/js-framework-benchmark
    9
    WBOJMMBKT
    OPOLFZFE
    MJUIUNM
    WOPO
    LFZFE
    BOHVMBS
    WOPO
    LFZFE
    SFBDU
    W
    OPOLFZFE
    WVFW
    OPOLFZFE
    DPOTJTUFOUMZ
    JOUFSBDUJWF

    TDSJQU
    CPPUVQUJNF

    NBJOUISFBE
    XPSLDPTU

    UPUBMCZUF
    XFJHIU

    View full-size slide

  10. js-framework-benchmark (Memory allocation)
    https://github.com/krausest/js-framework-benchmark
    10
    WBOJMMBKT
    OPOLFZFE
    MJUIUNM
    WOPO
    LFZFE
    BOHVMBS
    WOPO
    LFZFE
    SFBDU
    W
    OPOLFZFE
    WVFW
    OPOLFZFE
    SFBEZ
    NFNPSZ

    SVONFNPSZ
    VQEBUF
    XBUDIUI
    SPXGPSL
    SPXT

    SFQMBDFL
    SPXT

    DSFBUJOH
    DMFBSJOHL
    SPXT

    View full-size slide

  11. HTML Template Instantiation
    • 2017.11.1ʹApple͔ΒఏҊ͞ΕͨHTMLςϯϓϨʔτͷ
    ωΠςΟϒͳΠϯελϯεԽͷํ๏
    https://github.com/w3c/webcomponents/blob/gh-
    pages/proposals/Template-Instantiation.md
    • template typeʹରͯ͠template create callbackؔ਺Λ
    ఆٛ͢Δ͜ͱʹΑΓɼಠࣗͷςϯϓϨʔτΤϯδϯΛ࡞
    ੒Մೳ
    11

    View full-size slide

  12. HTML Template Instantiationͷྫ
    • ςϯϓϨʔτ
    {{name}}
    h1>Email: {{email}}
    • template create callbackؔ਺
    document.defineTemplateType('my-template-type', {
    processCallback: function (instance, parts, state) {
    for (const part of parts)
    part.value = state[part.expression];
    }
    });
    • ςϯϓϨʔτͷ࢖༻ྫ
    rniwa = {name: "R. Niwa", email: "[email protected]"};
    document.body.appendChild(contactTemplate.createInstance(rniwa));
    • ੜ੒͞ΕΔHTML
    R. NiwaEmail:href="mailto:[email protected]">[email protected]
    12

    View full-size slide

  13. σʔλόΠϯσΟϯάͷ՝୊
    • σʔλόΠϯσΟϯάͷඪ४͕ͳ͍
    • Webίϯϙʔωϯτͷ࠷ॳͷఏҊ࣌ʹؚ·Ε͍ͯͨModel
    Driven Viewsͱ͍͏σʔλόΠϯσΟϯά͸ɼඪ४Խ͞Εͳ
    ͔ͬͨ
    • Polymer 3.0͕2018ୈ̍ΫΥʔλʔͷऴΘΓʹग़Δ༧ఆ
    • Skate.js 5.0 beta 4͕2017.11.28ʹϦϦʔε
    • Slim.js 3.2.1͕2017.12.11ʹϦϦʔε
    • Stencil 0.4.0͕2018.2.9ʹϦϦʔε
    13

    View full-size slide