Webίϯϙʔωϯτؔ࿈ͷ࠷৽ಈ޲ ٢঵ࣉ.pm #13 2018.2.9 tipo159

ΞδΣϯμ • Webίϯϙʔωϯτؔ࿈࢓༷ͷ֤ϒϥ΢β࣮૷ঢ়گ • lit-html • HTML Template Instantiation • σʔλόΠϯσΟϯάͷ՝୊ 2

Custom Elements v1 • ৽͍͠DOMཁૉΛఆٛ͢ΔͨΊͷ࢓༷ • W3CͰ͸2016.10.13ͷϫʔΩϯάυϥϑτ͕࠷৽ https://www.w3.org/TR/custom-elements/ • ֤ϒϥ΢βͷαϙʔτঢ়گ(https://caniuse.com) 3

Shadow DOM v1 • ΧϓηϧԽ͞ΕͨϚʔΫΞοϓͱελΠϧΛఆٛ͢Δͨ Ίͷ࢓༷ • W3CͰ͸2017.9.5ͷϫʔΩϯάυϥϑτ͕࠷৽ https://www.w3.org/TR/shadow-dom/ • ֤ϒϥ΢βͷαϙʔτঢ়گ(https://caniuse.com) 4

HTML imports • HTMLυΩϡϝϯτΛଞͷHTMLυΩϡϝϯτͰ࠶ར༻ ͢ΔͨΊͷ࢓༷ • 2017.6.5ʹHTML imports͔ΒͷελΠϧ࡟আ͕ఏҊ ͞Εͨ https://github.com/TakayoshiKochi/ deprecate-style-in-html-imports • ES2015ͷϞδϡʔϧͰ୅ସՄೳ 5

HTML Template • ϚʔΫΞοϓͷஅยΛςϯϓϨʔτͱͯ͠ఆٛ͢ΔͨΊ ͷ࢓༷ • W3CͰ͸2014.3.18ͷϫʔΩϯάυϥϑτ͕࠷৽ https://www.w3.org/TR/html-templates/ • ֤ϒϥ΢βͷαϙʔτঢ়گ(https://caniuse.com) 6

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

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

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

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

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

HTML Template Instantiationͷྫ • ςϯϓϨʔτ

{{name}} h1>Email: {{email}}

• 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

R. Niwa

Email:[email protected] 12

σʔλόΠϯσΟϯάͷ՝୊ • σʔλόΠϯσΟϯάͷඪ४͕ͳ͍ • 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