$30 off During Our Annual Pro Sale. View Details »

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

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

Kyoto.js #9

fand/amagitakayosi

February 03, 2016
Tweet

More Decks by fand/amagitakayosi

Other Decks in Programming

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