Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
crosstalk
Yosuke Furukawa
PRO
March 24, 2018
Programming
0
470
crosstalk
manabiya.tech でみんなで話した内容の議事録です。
Yosuke Furukawa
PRO
March 24, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.9k
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
6
3.7k
Node.js / Deno 徹底討論の時のスライド
yosuke_furukawa
PRO
2
2.3k
Browser の話
yosuke_furukawa
PRO
4
220
A Philosophy of Software Design 前半
yosuke_furukawa
PRO
24
7.3k
開発組織の持続可能性について
yosuke_furukawa
PRO
16
9.7k
How I run JS / Web Community
yosuke_furukawa
PRO
0
2k
性能に関する考え方
yosuke_furukawa
PRO
7
6.3k
レビューの仕方
yosuke_furukawa
PRO
56
28k
Other Decks in Programming
See All in Programming
大規模プロダクトにLinterを導入し運用している話
hirokiotsuka
0
240
Get Ready for Jakarta EE 10
ivargrimstad
0
2.9k
CakePHPの内部実装 から理解するPSR-7
boro1234
0
260
模組化的Swift架構(二) DDD速成
haifengkao
0
390
競プロのすすめ
uya116
0
680
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
500
Chart実装が楽になりました。
keisukeyamagishi
0
120
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
5
260
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
250
UI Testing of Jetpack Compose Apps, AppDevCon
alexzhukovich
0
170
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
0
270
こそこそアジャイル導入しようぜ!
ichimichi
0
1.3k
Featured
See All Featured
Embracing the Ebb and Flow
colly
73
3.4k
The Mythical Team-Month
searls
209
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.3k
We Have a Design System, Now What?
morganepeng
35
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Product Roadmaps are Hard
iamctodd
34
6.6k
Why Our Code Smells
bkeepers
PRO
324
55k
A better future with KSS
kneath
225
15k
YesSQL, Process and Tooling at Scale
rocio
157
12k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Transcript
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.jsFlow/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
ͱ͔ͷϑϨʔϜϫʔΫͳ͘ͳͬͯ ΑΓྑ͘ͳΔɻ