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

Web Componentsが破った約束とは(Update) / What is the broken promise of Web Components(Update)

5f533aeab28ed4f70c26e336e71296f7?s=47 tipo159
November 18, 2017

Web Componentsが破った約束とは(Update) / What is the broken promise of Web Components(Update)

lit-htmlの情報を追加

"Regarding the broken promise of Web Components"の内容とWeb Componentsライブラリの紹介
秋のJavaScript祭 in mixi 2017のLT

5f533aeab28ed4f70c26e336e71296f7?s=128

tipo159

November 18, 2017
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

  1. Web Components͕ഁͬͨ໿ଋͱ͸ (Update) ळͷJavaScriptࡇ in mixi 2017 2017.11.18(2017.12.3) tipo159

  2. ൃද಺༰ • ”Regarding the broken promise of Web Components”ͷ೔ຊޠͷ هࣄ͕ݟ͔ͭΒͳ͔ͬͨͷͰࠓճ঺հ

    • ”The broken promise of Web Components”ʹର͢Δճ౴ʁ • @sizuhiko͞Μʹڭ͍͍͑ͯͨͩͨlit-htmlͷ৘ใΛ൓ө • ͨͩ͠ɼlit-html͸0.6.0ͳͷͰ੡඼։ൃʹ͸·ͩ࢖͑ͳ͍ • https://dmitriid.com/blog/2017/03/the-broken-promise-of-web- components/ • http://robdodson.me/regarding-the-broken-promise-of-web- components/ • https://github.com/PolymerLabs/lit-html 2
  3. ϕϯμʔϩοΫΠϯ • Webඪ४Λ໨ࢦ͍ͯͨ͠ʹ΋ؔΘΒͣɼطଘͷWeb ComponentsΛ࢖͏ͨΊʹ͸Polymer͕ඞਢ ಛʹ൓࿦ͳ͠ • WEBCOMPONENTS.ORGʹొ࿥͞Ε͍ͯΔWeb Componentsͷ΄ͱΜͲ ͕Polymerʹґଘ͠ɼͦͷόʔδϣϯ΋༷ʑ 3

  4. DOM • ࣮DOMΛॻ͖׵͑Δͷ͸஗͍ • DOMૢ࡞API͕ॻ͖ʹ͍͘ Ծ૝DOMͷDOMॻ͖׵͑଎౓͸଎͍͕ɼϥΠϒϥϦϩʔυ͕࣌ؒ௕͍ DOMૢ࡞APIΑΓJSXͱԾ૝DOMͷํ͕ྑ͍͜ͱ͸ಉҙ lit-html͸Ծ૝DOMΛ࢖Θͣʹࠩ෼ඳըΛ࣮ݱ lit-htmlͰ͸JavaScript (ES2015)ͷςϯϓϨʔτϦςϥϧΛ࢖ͬͯHTML

    ςϯϓϨʔτΛهड़ 4
  5. lit-htmlͷྫ import {html, render} from 'lit-html'; // lit-htmlΛฦ͢lit-htmlؔ਺ const helloTemplate

    = (name) => html`<div>Hello ${name}!</div>`; // ͜ͷؔ਺ͷ໭Γ஋Λrender()ʹ౉ͯ͠HTMLΛඳը // <div>Hello Steve!</div>ΛυΩϡϝϯτϘσΟʹඳը render(helloTemplate('Steve'), document.body); // <div>Hello Kevin!</div>ʹߋ৽, ͨͩ͠${name}ͷΈߋ৽ render(helloTemplate('Kevin'), document.body); 5
  6. σʔλόΠϯσΟϯά • σʔλόΠϯσΟϯά͕ඪ४Խ͞Ε͍ͯͳ͍ Web ComponentsఏҊ࣌ʹModel Driven Views(MDL)͕ಉ ࣌ʹఏҊ͞Ε͕ͨɼMDL͸ඪ४Խ͞Ε͍ͯͳ͍ʢεςʔΫ ϗϧμؒͷ߹ҙ͕ग़དྷͳ͔ͬͨΒ͍͠ʣ PolymerͷσʔλόΠϯσΟϯά͸MDLΛϕʔεʹ͍ͯ͠Δ

    Β͍͠ 6
  7. จࣈྻΞτϦϏϡʔτ • จࣈྻΞτϦϏϡʔτ͸͍͚͍ͯͳ͍ Custom Element͸୯ͳΔclassΠϯελϯεͳͷͰɼ ES2015ͷgetters/settersͰΠϯλϑΣʔεΛఏڙ͢Ε͹Α ͍ 7

  8. Web ComponentϥΠϒϥϦ 8 ໊শ ֓ཁ αϙʔτاۀ 1PMZNFS w 0OFXBZͱ5XPXBZͷσʔλόΠϯσ ΟϯάΛఏڙ

    w ֤छ1PMZpMMΛఏڙ (PPHMF 4LBUFKT w ؔ਺ܕͰޮ཰ͷΑ͍8FC$PNQPOFOU Λ࡞੒͢ΔͨΊͷϥΠϒϥϦ w 3FBDU౳ͷଞϑϨʔϜϫʔΫͱγʔϜ Ϩεʹಈ࡞ 95BH w 8FC$PNQPOFOUඪ४"1*ͷϥούʔ ϥΠϒϥϦ .JDSPTPGU 4MJNKT w 8FC$PNQPOFOUʹ֦ுΠϯλϑΣʔ εΛఏڙ͢ΔܰྔϥΠϒϥϦ w σʔλόΠϯσΟϯά͸&4ͷܧ ঝͰఏڙ