crosstalk

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

    ͱ͔ͷϑϨʔϜϫʔΫ΋ͳ͘ͳͬͯ ΑΓྑ͘ͳΔɻ