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
78
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
color-scheme: light dark; を完全に理解する
uhyo
7
490
Rails アプリ地図考 Flush Cut
makicamel
1
130
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
860
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
940
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
Formの複雑さに立ち向かう
bmthd
1
930
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
220
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
920
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
The Cult of Friendly URLs
andyhume
78
6.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Navigating Team Friction
lara
183
15k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
A Philosophy of Restraint
colly
203
16k
Agile that works and the tools we love
rasmusluckow
328
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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 ίʔυಡΉͱ݁ߏటष͔ͬͨΓ͢Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠