Web Cross Talk @yosuke_furukawa @laco2net @1000ch @kazu_pon

ΈΜͳԿΛ΍ͬͯΔਓʁ 1000ch: Web ։ൃશൠ laco2net: ࣾ಺πʔϧߏஙɺSPA։ൃ kazu_pon: ελʔτΞοϓͷϑϧε λοΫΤϯδχΞɺγεςϜશൠɺ Web/backend ԿͰ΋԰͞Μ

full single page application vs partial single page application kazu_pon: Vue.js ͸෦෼తʹ࢖͍ͬͯΔ 1000ch: SSRαʔόΛ࡞ͬͯɺ͔ͦ͜Βฦͨ͠ޙ΋SSR x Full SPA Ͱ΍ͬͯͨɻpartial SPA͸΄΅ແ͍ɻ merpayͰ͸ɺVue.js Nuxt.js Ͱ΍ͬͯΔ laco2net: SSR͸΍ͬͯͳ͍͕ɺAngularͷfull SPA, Service Worker Λ࢖ͬͯ͸͍ΔɻReactͷϧʔλʔ͸ηϯε͕ѱ͔ͬͨ

Router: Angularͷ৔߹͸ angular/router Vue.js ͷ৔߹͸ vue-router ͕͋Δ React ͸ react-router͕ͩɺർฐ͠ ͍ͯΔ

ΈΜͳ͕SPAͰ࡞ͬͯΔ΋ͷ kazu_pon: Α͋͘ΔΞϓϦ͕ͩɺࠓ·Ͱ໭ͬͨ࣌ʹεΫ ϩʔϧҐஔ͕ճؼͯ͘͠Εͳ͍͜ͱ͕͋ͬͨɻ laco2net: ࣾ಺ͷਓͱࣾ֎ͷਓ͕Ұॹʹ࢖͏πʔϧɺ Service Worker ͰΩϟογϡ͕ύʔδ͞Εͳ͍ɻɻɻ QAͯ͘͠ΕͯΔਓͷΩϟογϡͷύʔδΊͬͪΌΊΜͲ ͍ɻService Worker ʹߋ৽͕͋Δ࣌ʹ࣮ࡍʹऔ͖ͬͯͯߋ ৽͢Δͱ͍͏ॲཧΛඪ४Ͱཉ͍͠ɻ

ΈΜͳ͕SPAͰ࡞ͬͯΔ΋ͷ 1000ch: ঢ়ଶ؅ཧ͕ۤ࿑͍ͯ͠Δ JSͷঢ়ଶͱϖʔδͷঢ়ଶͷsync τϥϯβΫγϣϯڥք͕յΕΔ

ΈΜͳ͕SPAͰࠔͬͨ͜ͱ ো֐ͳͲ

JS Fatigue ࣮ײ͋Δʁ kazu_pon: Vue.js͕޷͖ͳ͚ͩͰ௥ͬͯΔΘ͚͡Όͳ͍ͷͰ࣮ײ͸ͳ͍͕ɺ৽ ͍͠bundleπʔϧͱ͔͕ग़ͯ͘ΔͱɺͦΕʹରԠ͠ͳ͍ͱ͍͚ͳ͍ͷͰେม Vue.js͸Flow/TypeScriptͰॻ͚Δ͕ɺࠓͷͱ͜Ζ͸TypeScript͕ϝϯςφ͕ ڧ͍͕த਎͸Flow laco2net: Angular ͸جຊTypeScript, Firefox଎͘Shadow DOM࣮૷͞ΕΖͱ ࢥͬͯΔɻNode.jsͷϒϥ΢βͱcommonjsͱͰർฐ͢Δ͜ͱ΋͋Δɻ Custom ElementsͰԿ͔࣮૷͢ΔͱɺFirefoxͷͨΊʹPolyfill͕ඞཁɻ 1000ch: webpack͕ݏͩɻCSS in JS͕Ұൠతʹͳͬͯͬ͘͠Γདྷͯͳ͍ɻ

ࠓޙͷWebඪ४Ͱظ଴͍ͨ͜͠ͱ͸ʁ kazu_pon: WebAssemblyɺϙʔλϏϦ ςΟ͕૿ͯ͠ϥΠϒϥϦͱͯ͠ೖΕΒΕΔ Α͏ʹͳͬͨΓɺWebҎ֎ͷϥΠϒϥϦ΋ ͖࣋ͬͯͯಈ͘ͱ໘ന͍

ࠓޙͷWebඪ४Ͱظ଴͍ͨ͜͠ͱ͸ʁ laco2net: template-instantiation, DOMChangeList https://github.com/whatwg/dom/ issues/270

ࠓޙͷWebඪ४Ͱظ଴͍ͨ͜͠ͱ ͸ʁ 1000ch: vdom͕΍ͬͯΔ͜ͱΛඪ ४Ͱ΍ͬͯ΄͍͠

ࠓޙͷWebඪ४Ͱظ଴͍ͨ͜͠ͱ ͸ʁ

ࠓޙͷAngular SPAͷ։ൃϓϥοτϑΥʔϜ͸׬੒ ࡁΈɿ࢒Γ͸Ͳ͏଎͘͢Δ͔ SPA͡Όͳ͍จ຺ͰϢʔεέʔεΛ ૿΍͢

ࠓޙͷVue.js kazu_pon: WebͰՁ஋ͷ͋Δ΋ͷΛ ͙͢ʹఏڙͰ͖ΔΑ͏ʹͯ͘͠ɻෳ ࡶͳ΋ͷΛ؆୯ʹ͢ΔͨΊͷ࢓૊Έ Λఏڙ͢Δɻ

ࠓޙͷWebඪ४ Service Worker, Web Components, Web Payments ͜ΕΒ͕ਐΜͰཉ͠ ͍ɻ ීٴ͖͠Ε͹Angularͱ͔Vue ͱ͔ͷϑϨʔϜϫʔΫ΋ͳ͘ͳͬͯ ΑΓྑ͘ͳΔɻ