Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
crosstalk
Search
Yosuke Furukawa
PRO
March 24, 2018
Programming
0
590
crosstalk
manabiya.tech でみんなで話した内容の議事録です。
Yosuke Furukawa
PRO
March 24, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
9
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
680
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
650
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
130
PipeCDのプラグイン化で目指すところ
warashi
1
290
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
470
テスト駆動Kaggle
isax1015
1
510
What's new in AppKit on macOS 26
1024jp
0
140
ニーリーにおけるプロダクトエンジニア
nealle
0
890
Porting a visionOS App to Android XR
akkeylab
0
660
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
BBQ
matthewcrist
89
9.7k
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
ͱ͔ͷϑϨʔϜϫʔΫͳ͘ͳͬͯ ΑΓྑ͘ͳΔɻ