Upgrade to Pro — share decks privately, control downloads, hide ads and more …

crosstalk

 crosstalk

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

March 24, 2018
Tweet

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

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