crosstalk

manabiya.tech でみんなで話した内容の議事録です。

Transcript

1. Web Cross Talk @yosuke_furukawa @laco2net @1000ch @kazu_pon
2. ΈΜͳԿΛ΍ͬͯΔਓʁ 1000ch: Web ։ൃશൠ laco2net: ࣾ಺πʔϧߏஙɺSPA։ൃ kazu_pon: ελʔτΞοϓͷϑϧε λοΫΤϯδχΞɺγεςϜશൠɺ Web/backend ԿͰ΋԰͞Μ
3. 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ͷϧʔλʔ͸ηϯε͕ѱ͔ͬͨ
4. Router: Angularͷ৔߹͸ angular/router Vue.js ͷ৔߹͸ vue-router ͕͋Δ React ͸ react-router͕ͩɺർฐ͠ ͍ͯΔ
5. ΈΜͳ͕SPAͰ࡞ͬͯΔ΋ͷ kazu_pon: Α͋͘ΔΞϓϦ͕ͩɺࠓ·Ͱ໭ͬͨ࣌ʹεΫ ϩʔϧҐஔ͕ճؼͯ͘͠Εͳ͍͜ͱ͕͋ͬͨɻ laco2net: ࣾ಺ͷਓͱࣾ֎ͷਓ͕Ұॹʹ࢖͏πʔϧɺ Service Worker ͰΩϟογϡ͕ύʔδ͞Εͳ͍ɻɻɻ QAͯ͘͠ΕͯΔਓͷΩϟογϡͷύʔδΊͬͪΌΊΜͲ ͍ɻService Worker ʹߋ৽͕͋Δ࣌ʹ࣮ࡍʹऔ͖ͬͯͯߋ ৽͢Δͱ͍͏ॲཧΛඪ४Ͱཉ͍͠ɻ
6. ΈΜͳ͕SPAͰ࡞ͬͯΔ΋ͷ 1000ch: ঢ়ଶ؅ཧ͕ۤ࿑͍ͯ͠Δ JSͷঢ়ଶͱϖʔδͷঢ়ଶͷsync τϥϯβΫγϣϯڥք͕յΕΔ
7. ΈΜͳ͕SPAͰࠔͬͨ͜ͱ ো֐ͳͲ
8. 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͕Ұൠతʹͳͬͯͬ͘͠Γདྷͯͳ͍ɻ
9. ࠓޙͷWebඪ४Ͱظ଴͍ͨ͜͠ͱ͸ʁ kazu_pon: WebAssemblyɺϙʔλϏϦ ςΟ͕૿ͯ͠ϥΠϒϥϦͱͯ͠ೖΕΒΕΔ Α͏ʹͳͬͨΓɺWebҎ֎ͷϥΠϒϥϦ΋ ͖࣋ͬͯͯಈ͘ͱ໘ന͍
10. ࠓޙͷWebඪ४Ͱظ଴͍ͨ͜͠ͱ͸ʁ laco2net: template-instantiation, DOMChangeList https://github.com/whatwg/dom/ issues/270
11. ࠓޙͷWebඪ४Ͱظ଴͍ͨ͜͠ͱ ͸ʁ 1000ch: vdom͕΍ͬͯΔ͜ͱΛඪ ४Ͱ΍ͬͯ΄͍͠
12. ࠓޙͷWebඪ४Ͱظ଴͍ͨ͜͠ͱ ͸ʁ
13. ࠓޙͷAngular SPAͷ։ൃϓϥοτϑΥʔϜ͸׬੒ ࡁΈɿ࢒Γ͸Ͳ͏଎͘͢Δ͔ SPA͡Όͳ͍จ຺ͰϢʔεέʔεΛ ૿΍͢
14. ࠓޙͷVue.js kazu_pon: WebͰՁ஋ͷ͋Δ΋ͷΛ ͙͢ʹఏڙͰ͖ΔΑ͏ʹͯ͘͠ɻෳ ࡶͳ΋ͷΛ؆୯ʹ͢ΔͨΊͷ࢓૊Έ Λఏڙ͢Δɻ
15. ࠓޙͷWebඪ४ Service Worker, Web Components, Web Payments ͜ΕΒ͕ਐΜͰཉ͠ ͍ɻ ීٴ͖͠Ε͹Angularͱ͔Vue ͱ͔ͷϑϨʔϜϫʔΫ΋ͳ͘ͳͬͯ ΑΓྑ͘ͳΔɻ