Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Kyoto.js #9

14084b6462b19a8512ce5208a76f8925?s=128

fand/amagitakayosi

February 03, 2016
Tweet

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ͷυΩϡϝϯτͰ΋
 lBTJOHMFUPONPEFMPGBMPHJDBMEPNBJOz
 ͬͯݴͬͯΔ


  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. ͋Γ͕ͱ͏͍͟͝·ͨ͠