Kyoto.js #9
*TPNPSQIJDΑ·@amagitakayosiKyoto.js #9
View Slide
@amagitakayosi
ࠓ͢͜ͱ
ΦϨΦϨ'MVYߏங*TPNPSQIJDԽϋϚΓॴ
ΦϨΦϨ'MVY
https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa/PEFֶԂࡇͰհ͠·ͨ͠
ͯͳϒϩάͷFluxw &WFOU&NJUUFSϕʔεw ͷ0CTFSWFSύλʔϯ͔Β نʹԠͯ͡εέʔϧͤ͞Δ
https://gist.github.com/fand/cc70b35eb901bd0ccb24ݱࡏ ͯͳϒϩάͰಈ͍ͯΔίʔυ
EventEmitter͚ͩͰFlux$PNQPOFOUΠϕϯτөActionσʔλมߋ%JTQBUDIFS"DUJPO$SFBUPS4UPSF
։ൃ߹॓d
߹॓w ͓ʮ৽ٕज़Λࢼ͢ʯw ฐνʔϜશһ5ZQF4DSJQUͰw ීஈ+4ॻ͍ͯͳ͍ਓʂ
߹॓ΞϓϦͷߏw ΫϥΠΞϯτw 543FBDUΦϨΦϨ'MVYw αʔόαΠυw 54FYQSFTT BTZODόϦόϦ
BTZOD࠷ߴʂʂ
݁Ռ
͍ͰΖ͏w 'MVYͷϦϑΝΫλ࠶ߏw ͍ͭͰʹ৭ʑ࣮ݧ͠Α͏w ͯͳϒϩάͷ'MVYʹ ϑΟʔυόοΫ͠Α͏
*TPNPSQIJD*TPNPSQIJD*TPNPSQIJD*TPNPSQIJD
*TPNPSQIJDw αʔόΫϥΠΞϯτͰ ಉ͡ίʔυΛڞ༗͢Δ͜ͱ
https://speakerdeck.com/koichik/isomorphic-survival-guide*TPNPSQIJDͷղઆ
IsomorphicԽͷϝϦοτw ॏෳ͢ΔίʔυΛݮΒͤΔw αʔόαΠυϨϯμϦϯά 443w ϊϋΛڞ༗͍͢͠
*TPNPSQIJDԽͷϝϦοτw ॏෳ͢ΔίʔυΛݮΒͤΔw αʔόαΠυϨϯμϦϯά 443w ϊϋڞ༗͍͢͠ʮαʔό͔͠ग़དྷͳ͍ʯʮΫϥΠΞϯτ͔͠৮Εͳ͍ʯʹͳΓʹ͍͘……ͣ
*TPNPSQIJDԽʹඞཁͳ͜ͱ
SFBDUSPVUFS ؾ߹JTPͱ͔ؾ߹
4JOHMFUPO'SFF
γϯάϧτϯw ΫϥΠΞϯτPOMZͷ߹ɺ 4UPSF%JTQBUDIFS γϯάϧτϯͰ0,w 'BDFCPPLͷυΩϡϝϯτͰ lBTJOHMFUPONPEFMPGBMPHJDBMEPNBJOz ͬͯݴͬͯΔ
ΫϥΠΞϯτ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͢Δ
Relayw 3FBDUίϯϙʔωϯτఆٛʹ ඞཁͳσʔλΛهड़͢Δͱ উखʹϑΣονͯ͘͠ΕΔ lϑϨʔϜϫʔΫzw ίετߴ͗͢Δ
Falcorw /FUqJYw 3FMBZͱࣅͨΑ͏ͳΜw ίετߴ͗͢
݁ہૉʹajaxw ΫϥΠΞϯτ͔Βݺͼ͍ͨ ΫΤϦϝιουશ෦ʹ ΤϯυϙΠϯτΛ༻ҙ͢Δw Bͨ͠Β DPOUSJCVUPSTશ෦ฦͬͯདྷΔɺ Έ͍ͨͳ
ॳظԽͲ͏͢Δʁw ॳظԽ࣌ʹHFU ͯ͠Δॴ ॻ͖͑Δඞཁ͕͋Δʁw SFBDUEPNTFSWFSͩͱ DPNQPOFOU%JE.PVOUݺΕͳ͍ ɹˠॻ͖͑ෆཁ
componentDidMountͷΑ͏͢
)ZESBUJPO
Hydration/Dehydrationw ΞϓϦέʔγϣϯͷঢ়ଶΛ ΫϥΠΞϯταʔόؒͰڞ༗͢Δw 443ͰඞཁʹͳΔ
ϦΫΤετ͕དྷͨΒαʔό
αʔό্ͰΞϓϦΛॳظԽͯ͠HTMLʹrenderαʔό)5.-
renderࡁΈHTMLʹσʔλΛຒΊࠐΜͰฦ͢αʔό)5.-
ΫϥΠΞϯτॳظԽ࣌ʹຒΊࠐ·ΕͨσʔλΛϩʔυ)5.-
ΫϥΠΞϯτͰrender্ͯ͠ॻ͖αʔόͰSFOEFS͞Εͨ%0.৽͍͠%0.
HydrationͲ͏Δͷw ϑϨʔϜϫʔΫͷػೳΛ͏w 'MVYJCMF "MUw HPBUTMBDLFSJTP͔ͭ͏w "MU࡞ऀͷIZESBUJPOϥΠϒϥϦw ࠓճ+40/TUSJOHJSZQBSTFͰ
dehydrationͷΑ͏͢
rehydrationͷΑ͏͢
3िؒ΄Ͳઓͬͨ ݁Ռ
·ͱΊ
͚ͬ͜͏େมw *TPNPSQIJDͳΈ࡞Δͷ ͔͔࣌ؒΔw Ұ׳ΕͨΒ؆୯͚ͩͲ νʔϜϝϯόʔͱͷϊϋڞ༗Ή͍ͣ
ϑϨʔϜϫʔΫ࠷ߴw ϑϨʔϜϫʔΫ࡞ऀ ؤு͍ͬͯͯ͢͝w େͷਓؾϑϨʔϜϫʔΫ *TPNPSQIJDରԠͯ͠Δw ίʔυಡΉͱ݁ߏటष͔ͬͨΓ͢Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠