VanillaJSでIsomorphicなFluxアプリ作ってみた話

Kyoto.js #9

Transcript

1. *TPNPSQIJD
   Α΋΍·࿩ @amagitakayosi Kyoto.js #9
2. @amagitakayosi
3. ࠓ೔࿩͢͜ͱ
4. ΦϨΦϨ'MVYߏங
   *TPNPSQIJDԽϋϚΓॴ
5. ΦϨΦϨ
   'MVY
6. https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa /PEFֶԂࡇͰ΋঺հ͠·ͨ͠
7. ͸ͯͳϒϩάͷFlux w &WFOU&NJUUFSϕʔε
   w ୞ͷ0CTFSWFSύλʔϯ͔Β
 ن໛ʹԠͯ͡εέʔϧͤ͞Δ
8. https://gist.github.com/fand/cc70b35eb901bd0ccb24 ݱࡏ
 ͸ͯͳϒϩάͰಈ͍ͯΔίʔυ
9. EventEmitter͚ͩͰFlux $PNQPOFOU Πϕϯτ ൓ө Action σʔλมߋ %JTQBUDIFS "DUJPO
   $SFBUPS 4UPSF
10. ։ൃ߹॓ 
    d
    
11. ߹॓ w ͓୊ʮ৽ٕज़Λࢼ͢ʯ
    w ฐνʔϜ
    શһ5ZQF4DSJQUͰ
    w ීஈ+4ॻ͍ͯͳ͍ਓ΋ʂ
12. ߹॓ΞϓϦͷߏ੒ w ΫϥΠΞϯτ
    w 54
    
    3FBDU
    
    ΦϨΦϨ'MVY
    w αʔόαΠυ
    w 54
    
    FYQSFTT
    BTZODόϦόϦ
13. BTZOD
    ࠷ߴʂʂ
14. ݁Ռ
17. ௕͍໨Ͱ΍Ζ͏ w 'MVYͷϦϑΝΫλ
    
    ࠶ߏ੒
    w ͍ͭͰʹ৭ʑ࣮ݧ͠Α͏
    w ͸ͯͳϒϩάͷ'MVYʹ΋
 ϑΟʔυόοΫ͠Α͏
18. *TPNPSQIJD *TPNPSQIJD *TPNPSQIJD *TPNPSQIJD
19. *TPNPSQIJD w αʔόΫϥΠΞϯτͰ
 ಉ͡ίʔυΛڞ༗͢Δ͜ͱ
20. https://speakerdeck.com/koichik/isomorphic-survival-guide *TPNPSQIJD
    ͷղઆ
21. IsomorphicԽͷϝϦοτ w ॏෳ͢ΔίʔυΛݮΒͤΔ
    w αʔόαΠυϨϯμϦϯά 443
    w ϊ΢ϋ΢Λڞ༗͠΍͍͢
22. *TPNPSQIJDԽͷϝϦοτ w ॏෳ͢ΔίʔυΛݮΒͤΔ
    w αʔόαΠυϨϯμϦϯά
    443
    w ϊ΢ϋ΢ڞ༗͠΍͍͢
    ʮαʔό͔͠ग़དྷͳ͍ʯ
    ʮΫϥΠΞϯτ͔͠৮Εͳ͍ʯ ʹͳΓʹ͍͘ ……͸ͣ
23. *TPNPSQIJDԽʹඞཁͳ͜ͱ
24. SFBDUSPVUFS ؾ߹ JTPͱ͔ ؾ߹
25. 4JOHMFUPO
    'SFF
26. ୤γϯάϧτϯ w ΫϥΠΞϯτPOMZͷ৔߹ɺ
 4UPSF΍%JTQBUDIFS͸
 γϯάϧτϯͰ0,
    w 'BDFCPPLͷυΩϡϝϯτͰ΋
 lB
    TJOHMFUPO
    NPEFM
    PG
    B
    MPHJDBM
    EPNBJOz
 ͬͯݴͬͯΔ

28. ΫϥΠΞϯτonlyͷ৔߹ w XJOEPXຖʹ'MVYΞϓϦ͕Ұݸ

29. SSR͢Δ৔߹ w ϦΫΤετຖʹ'MVYΞϓϦ͕Ұݸ αʔό
30. ඞཁͳมߋ w ɹɹɹɹɹ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ΍ΊΔ
    w ΞϓϦͷΤϯτϦʔϙΠϯτͰ
 OFX
    ͯ͋͛͠Δඞཁ͕͋Δ
31. γϯάϧτϯͳStoreΛॻ͖׵͑Δ
32. C / S݉༻ͷॳظԽUtil࡞ͬͯ࢖͏
33. ؾ߹Ͱॻ͖׵͑
34. 3PVUJOH
35. react-routerΛ࢖͍·͠ΐ͏ w υΩϡϝϯτʹ443ͷํ๏ࡌͬͯΔ
    w FYQSFTTͷSPVUFS͸

    
    
    
    
    
    
    
    
    
    
    
    Bɹɹɹɹɹ
    
    ͱ͔
    w SFBDUSPVUFS͡Όͳ͍৔߹͸ؤுͬͯ

36. 'FUDIJOH
37. ํ਑͸2ͭ w 3FMBZ
    'BMDPS
    ࢼ͢
    w ૉ๿ʹBKBY͢Δ
38. Relay w 3FBDUίϯϙʔωϯτఆٛʹ
 ඞཁͳσʔλΛهड़͢Δͱ
 উखʹϑΣονͯ͘͠ΕΔ
 lϑϨʔϜϫʔΫz
    w ίετߴ͗͢Δ
39. Falcor w /FUqJY੡
    w 3FMBZͱࣅͨΑ͏ͳ΋Μ
    w ίετߴ͗͢
40. ݁ہૉ๿ʹajax w ΫϥΠΞϯτ͔Βݺͼ͍ͨ
 ΫΤϦϝιουશ෦ʹ
 ΤϯυϙΠϯτΛ༻ҙ͢Δ
    w
    
    
    
    
    
    
    
    
    
    
    
    
    
    B
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ͨ͠Β
 DPOUSJCVUPSTશ෦ฦͬͯདྷΔɺ
 Έ͍ͨͳ
41. ॳظԽͲ͏͢Δʁ w ॳظԽ࣌ʹ
    HFU
    ͯ͠Δॴ
 ॻ͖׵͑Δඞཁ͕͋Δʁ
    w SFBDUEPNTFSWFSͩͱ
 DPNQPOFOU%JE.PVOU͸ݺ͹Εͳ͍
 ɹˠॻ͖׵͑ෆཁ
42. componentDidMountͷΑ͏͢
43. )ZESBUJPO
44. Hydration/Dehydration w ΞϓϦέʔγϣϯͷঢ়ଶΛ
 ΫϥΠΞϯταʔόؒͰڞ༗͢Δ
    w 443ͰඞཁʹͳΔ
45. ϦΫΤετ͕དྷͨΒ αʔό
46. αʔό্ͰΞϓϦΛॳظԽͯ͠ HTMLʹrender αʔό )5.-
47. renderࡁΈHTMLʹ σʔλΛຒΊࠐΜͰฦ͢ αʔό )5.-
48. ΫϥΠΞϯτॳظԽ࣌ʹ ຒΊࠐ·ΕͨσʔλΛϩʔυ )5.-
49. ΫϥΠΞϯτͰrender্ͯ͠ॻ͖ αʔόͰ
    SFOEFS͞Εͨ
    %0. ৽͍͠
    %0.
50. HydrationͲ͏΍Δͷ w ϑϨʔϜϫʔΫͷػೳΛ࢖͏
    w 'MVYJCMF
    "MU౳
    w HPBUTMBDLFSJTP౳͔ͭ͏
    w "MU࡞ऀͷIZESBUJPOϥΠϒϥϦ
    w ࠓճ͸
    +40/TUSJOHJSZQBSTF
    Ͱ
51. dehydrationͷΑ͏͢
52. dehydrationͷΑ͏͢
53. rehydrationͷΑ͏͢
54. 3िؒ΄Ͳઓͬͨ
 ݁Ռ
57. ·ͱΊ
58. ͚ͬ͜͏େม w *TPNPSQIJDͳ࢓૊Έ࡞Δͷ
 ͔͔࣌ؒΔ
    w Ұ౓׳ΕͨΒ؆୯͚ͩͲ
 νʔϜϝϯόʔͱͷϊ΢ϋ΢ڞ༗Ή͍ͣ
59. ϑϨʔϜϫʔΫ࠷ߴ w ϑϨʔϜϫʔΫ࡞ऀ͸
 ؤு͍ͬͯͯ͢͝
    w େ఍ͷਓؾϑϨʔϜϫʔΫ͸
 *TPNPSQIJDରԠͯ͠Δ
    w ίʔυಡΉͱ݁ߏటष͔ͬͨΓ͢Δ
60. ͋Γ͕ͱ͏͍͟͝·ͨ͠