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

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

Transcript

1. Webίϯϙʔωϯτؔ࿈ͷ࠷৽ಈ޲ ٢঵ࣉ.pm #13 2018.2.9 tipo159
2. ΞδΣϯμ • Webίϯϙʔωϯτؔ࿈࢓༷ͷ֤ϒϥ΢β࣮૷ঢ়گ • lit-html • HTML Template Instantiation • σʔλόΠϯσΟϯάͷ՝୊ 2
3. Custom Elements v1 • ৽͍͠DOMཁૉΛఆٛ͢ΔͨΊͷ࢓༷ • W3CͰ͸2016.10.13ͷϫʔΩϯάυϥϑτ͕࠷৽ https://www.w3.org/TR/custom-elements/ • ֤ϒϥ΢βͷαϙʔτঢ়گ(https://caniuse.com) 3
4. Shadow DOM v1 • ΧϓηϧԽ͞ΕͨϚʔΫΞοϓͱελΠϧΛఆٛ͢Δͨ Ίͷ࢓༷ • W3CͰ͸2017.9.5ͷϫʔΩϯάυϥϑτ͕࠷৽ https://www.w3.org/TR/shadow-dom/ • ֤ϒϥ΢βͷαϙʔτঢ়گ(https://caniuse.com) 4
5. HTML imports • HTMLυΩϡϝϯτΛଞͷHTMLυΩϡϝϯτͰ࠶ར༻ ͢ΔͨΊͷ࢓༷ • 2017.6.5ʹHTML imports͔ΒͷελΠϧ࡟আ͕ఏҊ ͞Εͨ https://github.com/TakayoshiKochi/ deprecate-style-in-html-imports • ES2015ͷϞδϡʔϧͰ୅ସՄೳ 5
6. HTML Template • ϚʔΫΞοϓͷஅยΛςϯϓϨʔτͱͯ͠ఆٛ͢ΔͨΊ ͷ࢓༷ • W3CͰ͸2014.3.18ͷϫʔΩϯάυϥϑτ͕࠷৽ https://www.w3.org/TR/html-templates/ • ֤ϒϥ΢βͷαϙʔτঢ়گ(https://caniuse.com) 6
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
8. js-framework-benchmark (Duration) https://github.com/krausest/js-framework-benchmark 8 WBOJMMBKT OPOLFZFE MJUIUNM WOPO BOHVMBS WOPO SFBDU W WVFW OPOLFZFE DSFBUF
   SPXT      SFQMBDF
   BMM
   SPXT      QBSUJBM
   VQEBUF      TFMFDU
   SPX      TXBQ
   SPXT      SFNPWF
   SPX      DSFBUF
   NBOZ
   SPXT      BQQFOE
   SPXT
   UP
        DMFBS
   SPXT      TMPXEPXO
   HFPNFUSJD
       
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
   CPPUVQ
   UJNF      NBJO
   UISFBE
   XPSL
   DPTU      UPUBM
   CZUF
   XFJHIU     
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      SVO
    NFNPSZ      VQEBUF
    XBUDI
    UI
    SPX
    GPS
    L
    SPXT      SFQMBDF
    L
    SPXT      DSFBUJOH DMFBSJOH
    L
    SPXT     
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
12. HTML Template Instantiationͷྫ • ςϯϓϨʔτ <template type="my-template-type" id="contactTemplate"><section><h1>{{name}}</ h1>Email: <a href=“mailto:{{email}}">{{email}}</a></section></template> • 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: "rniwa@webkit.org"}; document.body.appendChild(contactTemplate.createInstance(rniwa)); • ੜ੒͞ΕΔHTML <section><h1>R. Niwa</h1>Email:<a href="mailto:rniwa@webkit.org">rniwa@webkit.org</a></section> 12
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