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

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

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. 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
  2. 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     
  3. 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     
  4. 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     
  5. 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: "[email protected]"}; document.body.appendChild(contactTemplate.createInstance(rniwa)); • ੜ੒͞ΕΔHTML <section><h1>R. Niwa</h1>Email:<a href="mailto:[email protected]">[email protected]</a></section> 12
  6. σʔλόΠϯσΟϯάͷ՝୊ • σʔλόΠϯσΟϯάͷඪ४͕ͳ͍ • 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