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

Kyoto.js #9

Transcript

1. *TPNPSQIJD
   Α΋΍·࿩
   @amagitakayosi
   Kyoto.js #9
   

   View Slide

2. @amagitakayosi
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   

   View Slide

4. ΦϨΦϨ'MVYߏங
   *TPNPSQIJDԽϋϚΓॴ
   

   View Slide

5. ΦϨΦϨ
   'MVY
   

   View Slide

6. https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa
   /PEFֶԂࡇͰ΋঺հ͠·ͨ͠
   

   View Slide

7. ͸ͯͳϒϩάͷFlux
   w &WFOU&NJUUFSϕʔε
   w ୞ͷ0CTFSWFSύλʔϯ͔Β

   ن໛ʹԠͯ͡εέʔϧͤ͞Δ
   

   View Slide

8. https://gist.github.com/fand/cc70b35eb901bd0ccb24
   ݱࡏ

   ͸ͯͳϒϩάͰಈ͍ͯΔίʔυ
   

   View Slide

9. EventEmitter͚ͩͰFlux
   $PNQPOFOU
   Πϕϯτ
   ൓ө
   Action
   σʔλมߋ
   %JTQBUDIFS
   "DUJPO
   $SFBUPS
   4UPSF
   

   View Slide

10. ։ൃ߹॓
    d
    

    View Slide

11. ߹॓
    w ͓୊ʮ৽ٕज़Λࢼ͢ʯ
    w ฐνʔϜશһ5ZQF4DSJQUͰ
    w ීஈ+4ॻ͍ͯͳ͍ਓ΋ʂ
    

    View Slide

12. ߹॓ΞϓϦͷߏ੒
    w ΫϥΠΞϯτ
    w 543FBDUΦϨΦϨ'MVY
    w αʔόαΠυ
    w 54FYQSFTT BTZODόϦόϦ
    
    

    View Slide

13. BTZOD࠷ߴʂʂ
    

    View Slide

14. ݁Ռ
    

    View Slide

15. View Slide

16. View Slide

17. ௕͍໨Ͱ΍Ζ͏
    w 'MVYͷϦϑΝΫλ࠶ߏ੒
    w ͍ͭͰʹ৭ʑ࣮ݧ͠Α͏
    w ͸ͯͳϒϩάͷ'MVYʹ΋

    ϑΟʔυόοΫ͠Α͏
    

    View Slide

18. *TPNPSQIJD
    *TPNPSQIJD
    *TPNPSQIJD
    *TPNPSQIJD
    

    View Slide

19. *TPNPSQIJD
    w αʔόΫϥΠΞϯτͰ

    ಉ͡ίʔυΛڞ༗͢Δ͜ͱ
    

    View Slide

20. https://speakerdeck.com/koichik/isomorphic-survival-guide
    *TPNPSQIJDͷղઆ
    

    View Slide

21. IsomorphicԽͷϝϦοτ
    w ॏෳ͢ΔίʔυΛݮΒͤΔ
    w αʔόαΠυϨϯμϦϯά 443
    
    w ϊ΢ϋ΢Λڞ༗͠΍͍͢
    

    View Slide

22. *TPNPSQIJDԽͷϝϦοτ
    w ॏෳ͢ΔίʔυΛݮΒͤΔ
    w αʔόαΠυϨϯμϦϯά 443
    
    w ϊ΢ϋ΢ڞ༗͠΍͍͢
    ʮαʔό͔͠ग़དྷͳ͍ʯ
    ʮΫϥΠΞϯτ͔͠৮Εͳ͍ʯ
    ʹͳΓʹ͍͘
    ……͸ͣ
    

    View Slide

23. *TPNPSQIJDԽʹඞཁͳ͜ͱ
    

    View Slide

24. SFBDUSPVUFS ؾ߹
    JTPͱ͔
    ؾ߹
    

    View Slide

25. 4JOHMFUPO
    'SFF
    

    View Slide

26. ୤γϯάϧτϯ
    w ΫϥΠΞϯτPOMZͷ৔߹ɺ

    4UPSF΍%JTQBUDIFS͸

    γϯάϧτϯͰ0,
    w 'BDFCPPLͷυΩϡϝϯτͰ΋

    lBTJOHMFUPONPEFMPGBMPHJDBMEPNBJOz

    ͬͯݴͬͯΔ

    

    View Slide

27. View Slide

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

    

    View Slide

29. SSR͢Δ৔߹
    w ϦΫΤετຖʹ'MVYΞϓϦ͕Ұݸ
    αʔό
    

    View Slide

30. ඞཁͳมߋ
    w ɹɹɹɹɹ΍ΊΔ
    w ΞϓϦͷΤϯτϦʔϙΠϯτͰ

    OFXͯ͋͛͠Δඞཁ͕͋Δ
    

    View Slide

31. γϯάϧτϯͳStoreΛॻ͖׵͑Δ
    

    View Slide

32. C / S݉༻ͷॳظԽUtil࡞ͬͯ࢖͏
    

    View Slide

33. ؾ߹Ͱॻ͖׵͑
    

    View Slide

34. 3PVUJOH
    

    View Slide

35. react-routerΛ࢖͍·͠ΐ͏
    w υΩϡϝϯτʹ443ͷํ๏ࡌͬͯΔ
    w FYQSFTTͷSPVUFS͸

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

    

    View Slide

36. 'FUDIJOH
    

    View Slide

37. ํ਑͸2ͭ
    w 3FMBZ 'BMDPSࢼ͢
    w ૉ๿ʹBKBY͢Δ
    

    View Slide

38. Relay
    w 3FBDUίϯϙʔωϯτఆٛʹ

    ඞཁͳσʔλΛهड़͢Δͱ

    উखʹϑΣονͯ͘͠ΕΔ

    lϑϨʔϜϫʔΫz
    w ίετߴ͗͢Δ
    

    View Slide

39. Falcor
    w /FUqJY੡
    w 3FMBZͱࣅͨΑ͏ͳ΋Μ
    w ίετߴ͗͢
    

    View Slide

40. ݁ہૉ๿ʹajax
    w ΫϥΠΞϯτ͔Βݺͼ͍ͨ

    ΫΤϦϝιουશ෦ʹ

    ΤϯυϙΠϯτΛ༻ҙ͢Δ
    w Bͨ͠Β

    DPOUSJCVUPSTશ෦ฦͬͯདྷΔɺ

    Έ͍ͨͳ
    

    View Slide

41. ॳظԽͲ͏͢Δʁ
    w ॳظԽ࣌ʹHFU
    ͯ͠Δॴ

    ॻ͖׵͑Δඞཁ͕͋Δʁ
    w SFBDUEPNTFSWFSͩͱ

    DPNQPOFOU%JE.PVOU͸ݺ͹Εͳ͍

    ɹˠॻ͖׵͑ෆཁ
    

    View Slide

42. componentDidMountͷΑ͏͢
    

    View Slide

43. )ZESBUJPO
    

    View Slide

44. Hydration/Dehydration
    w ΞϓϦέʔγϣϯͷঢ়ଶΛ

    ΫϥΠΞϯταʔόؒͰڞ༗͢Δ
    w 443ͰඞཁʹͳΔ
    

    View Slide

45. ϦΫΤετ͕དྷͨΒ
    αʔό
    

    View Slide

46. αʔό্ͰΞϓϦΛॳظԽͯ͠
    HTMLʹrender
    αʔό
    )5.-
    

    View Slide

47. renderࡁΈHTMLʹ
    σʔλΛຒΊࠐΜͰฦ͢
    αʔό
    )5.-
    

    View Slide

48. ΫϥΠΞϯτॳظԽ࣌ʹ
    ຒΊࠐ·ΕͨσʔλΛϩʔυ
    )5.-
    

    View Slide

49. ΫϥΠΞϯτͰrender্ͯ͠ॻ͖
    αʔόͰ
    SFOEFS͞Εͨ
    %0.
    ৽͍͠
    %0.
    

    View Slide

50. HydrationͲ͏΍Δͷ
    w ϑϨʔϜϫʔΫͷػೳΛ࢖͏
    w 'MVYJCMF "MU౳
    w HPBUTMBDLFSJTP౳͔ͭ͏
    w "MU࡞ऀͷIZESBUJPOϥΠϒϥϦ
    w ࠓճ͸+40/TUSJOHJSZQBSTFͰ
    

    View Slide

51. dehydrationͷΑ͏͢
    

    View Slide

52. dehydrationͷΑ͏͢
    

    View Slide

53. rehydrationͷΑ͏͢
    

    View Slide

54. 3िؒ΄Ͳઓͬͨ

    ݁Ռ
    

    View Slide

55. View Slide

56. View Slide

57. ·ͱΊ
    

    View Slide

58. ͚ͬ͜͏େม
    w *TPNPSQIJDͳ࢓૊Έ࡞Δͷ

    ͔͔࣌ؒΔ
    w Ұ౓׳ΕͨΒ؆୯͚ͩͲ

    νʔϜϝϯόʔͱͷϊ΢ϋ΢ڞ༗Ή͍ͣ
    

    View Slide

59. ϑϨʔϜϫʔΫ࠷ߴ
    w ϑϨʔϜϫʔΫ࡞ऀ͸

    ؤு͍ͬͯͯ͢͝
    w େ఍ͷਓؾϑϨʔϜϫʔΫ͸

    *TPNPSQIJDରԠͯ͠Δ
    w ίʔυಡΉͱ݁ߏటष͔ͬͨΓ͢Δ
    

    View Slide

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

    View Slide