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
VanillaJSでIsomorphicなFluxアプリ作ってみた話
Search
Amagi
February 03, 2016
Programming
6
2.3k
VanillaJSでIsomorphicなFluxアプリ作ってみた話
Kyoto.js #9
Amagi
February 03, 2016
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
110
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
530
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.2k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
270
APIs for VJ-ing
fand
1
6.9k
Other Decks in Programming
See All in Programming
ふつうの技術スタックでアート作品を作ってみる
akira888
1
900
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
140
PipeCDのプラグイン化で目指すところ
warashi
1
280
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
940
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
190
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
0
130
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
590
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
930
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building Adaptive Systems
keathley
43
2.7k
For a Future-Friendly Web
brad_frost
179
9.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
How to train your dragon (web standard)
notwaldorf
96
6.1k
Being A Developer After 40
akosma
90
590k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Building an army of robots
kneath
306
45k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Scaling GitHub
holman
460
140k
Transcript
*TPNPSQIJD Α· @amagitakayosi Kyoto.js #9
@amagitakayosi
ࠓ͢͜ͱ
ΦϨΦϨ'MVYߏங *TPNPSQIJDԽϋϚΓॴ
ΦϨΦϨ 'MVY
https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa /PEFֶԂࡇͰհ͠·ͨ͠
ͯͳϒϩάͷFlux w &WFOU&NJUUFSϕʔε w ͷ0CTFSWFSύλʔϯ͔Β نʹԠͯ͡εέʔϧͤ͞Δ
https://gist.github.com/fand/cc70b35eb901bd0ccb24 ݱࡏ ͯͳϒϩάͰಈ͍ͯΔίʔυ
EventEmitter͚ͩͰFlux $PNQPOFOU Πϕϯτ ө Action σʔλมߋ %JTQBUDIFS "DUJPO $SFBUPS 4UPSF
։ൃ߹॓ d
߹॓ w ͓ʮ৽ٕज़Λࢼ͢ʯ w ฐνʔϜશһ5ZQF4DSJQUͰ w ීஈ+4ॻ͍ͯͳ͍ਓʂ
߹॓ΞϓϦͷߏ w ΫϥΠΞϯτ w 54 3FBDU ΦϨΦϨ'MVY w αʔόαΠυ w
54 FYQSFTT BTZODόϦόϦ
BTZOD࠷ߴʂʂ
݁Ռ
None
None
͍ͰΖ͏ w 'MVYͷϦϑΝΫλ ࠶ߏ w ͍ͭͰʹ৭ʑ࣮ݧ͠Α͏ w ͯͳϒϩάͷ'MVYʹ ϑΟʔυόοΫ͠Α͏
*TPNPSQIJD *TPNPSQIJD *TPNPSQIJD *TPNPSQIJD
*TPNPSQIJD w αʔόΫϥΠΞϯτͰ ಉ͡ίʔυΛڞ༗͢Δ͜ͱ
https://speakerdeck.com/koichik/isomorphic-survival-guide *TPNPSQIJD ͷղઆ
IsomorphicԽͷϝϦοτ w ॏෳ͢ΔίʔυΛݮΒͤΔ w αʔόαΠυϨϯμϦϯά 443 w ϊϋΛڞ༗͍͢͠
*TPNPSQIJDԽͷϝϦοτ w ॏෳ͢ΔίʔυΛݮΒͤΔ w αʔόαΠυϨϯμϦϯά 443 w ϊϋڞ༗͍͢͠ ʮαʔό͔͠ग़དྷͳ͍ʯ
ʮΫϥΠΞϯτ͔͠৮Εͳ͍ʯ ʹͳΓʹ͍͘ ……ͣ
*TPNPSQIJDԽʹඞཁͳ͜ͱ
SFBDUSPVUFS ؾ߹ JTPͱ͔ ؾ߹
4JOHMFUPO 'SFF
γϯάϧτϯ w ΫϥΠΞϯτPOMZͷ߹ɺ 4UPSF%JTQBUDIFS γϯάϧτϯͰ0, w 'BDFCPPLͷυΩϡϝϯτͰ lBTJOHMFUPONPEFMPGBMPHJDBMEPNBJOz ͬͯݴͬͯΔ
None
ΫϥΠΞϯτonlyͷ߹ w XJOEPXຖʹ'MVYΞϓϦ͕Ұݸ
SSR͢Δ߹ w ϦΫΤετຖʹ'MVYΞϓϦ͕Ұݸ αʔό
ඞཁͳมߋ w ɹɹɹɹɹΊΔ w ΞϓϦͷΤϯτϦʔϙΠϯτͰ OFXͯ͋͛͠Δඞཁ͕͋Δ
γϯάϧτϯͳStoreΛॻ͖͑Δ
C / S݉༻ͷॳظԽUtil࡞ͬͯ͏
ؾ߹Ͱॻ͖͑
3PVUJOH
react-routerΛ͍·͠ΐ͏ w υΩϡϝϯτʹ443ͷํ๏ࡌͬͯΔ w FYQSFTTͷSPVUFS Bɹɹɹɹɹͱ͔ w SFBDUSPVUFS͡Όͳ͍߹ؤுͬͯ
'FUDIJOH
ํ2ͭ w 3FMBZ 'BMDPSࢼ͢ w ૉʹBKBY͢Δ
Relay w 3FBDUίϯϙʔωϯτఆٛʹ ඞཁͳσʔλΛهड़͢Δͱ উखʹϑΣονͯ͘͠ΕΔ lϑϨʔϜϫʔΫz w ίετߴ͗͢Δ
Falcor w /FUqJY w 3FMBZͱࣅͨΑ͏ͳΜ w ίετߴ͗͢
݁ہૉʹajax w ΫϥΠΞϯτ͔Βݺͼ͍ͨ ΫΤϦϝιουશ෦ʹ ΤϯυϙΠϯτΛ༻ҙ͢Δ w Bͨ͠Β DPOUSJCVUPSTશ෦ฦͬͯདྷΔɺ Έ͍ͨͳ
ॳظԽͲ͏͢Δʁ w ॳظԽ࣌ʹHFU ͯ͠Δॴ ॻ͖͑Δඞཁ͕͋Δʁ w SFBDUEPNTFSWFSͩͱ DPNQPOFOU%JE.PVOUݺΕͳ͍ ɹˠॻ͖͑ෆཁ
componentDidMountͷΑ͏͢
)ZESBUJPO
Hydration/Dehydration w ΞϓϦέʔγϣϯͷঢ়ଶΛ ΫϥΠΞϯταʔόؒͰڞ༗͢Δ w 443ͰඞཁʹͳΔ
ϦΫΤετ͕དྷͨΒ αʔό
αʔό্ͰΞϓϦΛॳظԽͯ͠ HTMLʹrender αʔό )5.-
renderࡁΈHTMLʹ σʔλΛຒΊࠐΜͰฦ͢ αʔό )5.-
ΫϥΠΞϯτॳظԽ࣌ʹ ຒΊࠐ·ΕͨσʔλΛϩʔυ )5.-
ΫϥΠΞϯτͰrender্ͯ͠ॻ͖ αʔόͰ SFOEFS͞Εͨ %0. ৽͍͠ %0.
HydrationͲ͏Δͷ w ϑϨʔϜϫʔΫͷػೳΛ͏ w 'MVYJCMF "MU w HPBUTMBDLFSJTP͔ͭ͏ w "MU࡞ऀͷIZESBUJPOϥΠϒϥϦ
w ࠓճ+40/TUSJOHJSZQBSTFͰ
dehydrationͷΑ͏͢
dehydrationͷΑ͏͢
rehydrationͷΑ͏͢
3िؒ΄Ͳઓͬͨ ݁Ռ
None
None
·ͱΊ
͚ͬ͜͏େม w *TPNPSQIJDͳΈ࡞Δͷ ͔͔࣌ؒΔ w Ұ׳ΕͨΒ؆୯͚ͩͲ νʔϜϝϯόʔͱͷϊϋڞ༗Ή͍ͣ
ϑϨʔϜϫʔΫ࠷ߴ w ϑϨʔϜϫʔΫ࡞ऀ ؤு͍ͬͯͯ͢͝ w େͷਓؾϑϨʔϜϫʔΫ *TPNPSQIJDରԠͯ͠Δ w ίʔυಡΉͱ݁ߏటष͔ͬͨΓ͢Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠