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

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ͷܧ ঝͰఏڙ