$30 off During Our Annual Pro Sale. View Details »

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

  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 DSFBUFSPXT      SFQMBDF BMMSPXT      QBSUJBM VQEBUF      TFMFDUSPX      TXBQSPXT      SFNPWFSPX      DSFBUFNBOZ SPXT      BQQFOE SPXTUP      DMFBSSPXT      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 CPPUVQUJNF      NBJOUISFBE XPSLDPTU      UPUBMCZUF 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      SVONFNPSZ      VQEBUF XBUDIUI SPXGPSL SPXT      SFQMBDFL SPXT      DSFBUJOH DMFBSJOHL 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