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

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. ݁Ռ

15. None
16. None

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
 ͬͯݴͬͯΔ


27. None

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िؒ΄Ͳઓͬͨ
 ݁Ռ

55. None
56. None

57. ·ͱΊ

58. ͚ͬ͜͏େม w *TPNPSQIJDͳ࢓૊Έ࡞Δͷ
 ͔͔࣌ؒΔ
    w Ұ౓׳ΕͨΒ؆୯͚ͩͲ
 νʔϜϝϯόʔͱͷϊ΢ϋ΢ڞ༗Ή͍ͣ

59. ϑϨʔϜϫʔΫ࠷ߴ w ϑϨʔϜϫʔΫ࡞ऀ͸
 ؤு͍ͬͯͯ͢͝
    w େ఍ͷਓؾϑϨʔϜϫʔΫ͸
 *TPNPSQIJDରԠͯ͠Δ
    w ίʔυಡΉͱ݁ߏటष͔ͬͨΓ͢Δ

60. ͋Γ͕ͱ͏͍͟͝·ͨ͠