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
79
How to hack VS Code: evil ways (Japanese)
fand
5
3.5k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
500
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.7k
Real World GLSL
fand
0
260
APIs for VJ-ing
fand
1
6.8k
Other Decks in Programming
See All in Programming
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.1k
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
390
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
170
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
Swift Testingのモチベを上げたい
stoticdev
2
140
Rubyと自由とAIと
yotii23
6
1.8k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
sappoRo.R #12 初心者セッション
kosugitti
0
280
[JAWS DAYS 2025] 最近の DB の競合解決の仕組みが分かった気になってみた
maroon1st
0
140
楽しく向き合う例外対応
okutsu
0
700
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
51
11k
GitHub's CSS Performance
jonrohan
1030
460k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Documentation Writing (for coders)
carmenintech
68
4.6k
Side Projects
sachag
452
42k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
The Cult of Friendly URLs
andyhume
78
6.2k
Being A Developer After 40
akosma
89
590k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
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 ίʔυಡΉͱ݁ߏటष͔ͬͨΓ͢Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠