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

Slide 1

Slide 1 text

Web Components͕ഁͬͨ໿ଋͱ͸ ळͷJavaScriptࡇ in mixi 2017 2017.11.18 tipo159

Slide 2

Slide 2 text

ൃද಺༰ • ”Regarding the broken promise of Web Components”ͷ೔ ຊޠͷهࣄ͕ݟ͔ͭΒͳ͔ͬͨͷͰࠓճ঺հ • ”The broken promise of Web Components”ʹର͢Δճ౴ʁ • https://dmitriid.com/blog/2017/03/the-broken-promise-of- web-components/ • http://robdodson.me/regarding-the-broken-promise-of-webcomponents/ 2

Slide 3

Slide 3 text

ϕϯμʔϩοΫΠϯ • Webඪ४Λ໨ࢦ͍ͯͨ͠ʹ΋ؔΘΒͣɼطଘͷWeb ComponentsΛ࢖͏ͨΊʹ͸Polymer͕ඞਢ ಛʹ൓࿦ͳ͠ • WEBCOMPONENTS.ORGʹొ࿥͞Ε͍ͯΔWeb Componentsͷ΄ͱΜͲ ͕Polymerʹґଘ͠ɼͦͷόʔδϣϯ΋༷ʑ 3

Slide 4

Slide 4 text

DOM • ࣮DOMΛॻ͖׵͑Δͷ͸஗͍ • DOMૢ࡞API͕ॻ͖ʹ͍͘ Ծ૝DOMͷDOMॻ͖׵͑଎౓͸଎͍͕ɼϥΠϒϥϦϩʔ υ͕࣌ؒ௕͍ DOMૢ࡞APIΑΓJSXͱԾ૝DOMͷํ͕ྑ͍͜ͱ͸ಉҙ 4

Slide 5

Slide 5 text

σʔλόΠϯσΟϯά • σʔλόΠϯσΟϯά͕ඪ४Խ͞Ε͍ͯͳ͍ Web ComponentsఏҊ࣌ʹModel Driven Views(MDL)͕ಉ ࣌ʹఏҊ͞Ε͕ͨɼMDL͸ඪ४Խ͞Ε͍ͯͳ͍ʢεςʔΫ ϗϧμؒͷ߹ҙ͕ग़དྷͳ͔ͬͨΒ͍͠ʣ PolymerͷσʔλόΠϯσΟϯά͸MDLΛϕʔεʹ͍ͯ͠Δ Β͍͠ 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Web ComponentϥΠϒϥϦ 7 ໊শ ֓ཁ αϙʔτاۀ 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ͷܧ ঝͰఏڙ