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

フロントエンドに秩序は戻ったか?

 フロントエンドに秩序は戻ったか?

Kyoto.js 12発表スライドです。
https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa の続編です。

14084b6462b19a8512ce5208a76f8925?s=128

fand/amagitakayosi

January 21, 2017
Tweet

Transcript

  1. IS THE ORDER
 RESTORED? IS THE ORDER
 RESTORED? IS THE

    ORDER
 RESTORED? IS THE ORDER
 RESTORED? IS THE ORDER
 RESTORED? IS THE ORDER
 RESTORED? ϑϩϯτΤϯυʹடং͸໭͔ͬͨʁ @amagitakayosi
  2. @amagitakayosi

  3. http://developer.hatenastaff.com/entry/2016/12/16/120000 1PEDBTU΍ͬͯ·͢

  4. None
  5. IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!! ࠓ͙͢ొ࿥ʂ !!!!!!!!!!! !!!!!!!!!! !!!!!!!!!! !!!!!!!!!!! !!!!!!!!!!

  6. None
  7. ͜͜ʹ4प೥ͷਤΛషΔ 2016-11-07 ͸ͯͳϒϩά प೥

  8. ೥෺ͷ ྺ࢙͋Δ ιʔείʔυ܊

  9. /PEFֶԂࡇͰ࿩͠·ͨ͠

  10. લճͷ͋Β͢͡

  11. + ౰ॳͷٕज़ελοΫ

  12. ཱͪ͸͔ͩΔ໰୊ͨͪ

  13. ஍ಓʹվળ w ίʔυ෼ׂϦϑΝΫλϦϯά w ϑϨʔϜϫʔΫಋೖ w ςετ؀ڥߏங

  14. ίʔυ෼ׂ w ैདྷ͸໊લۭؒͰ෼ׂͯ͠
 DPODBUͯͨ͠ w $PNNPO+4ܗࣜʹॻ͖௚͠
 CSPXTFSJGZͰϞδϡʔϧԽ

  15. ໊લۭؒͰ෼ׂͯͨ͠ w ैདྷ͸໊લۭؒͰ෼ׂͯ͠
 DPODBUͯͨ͠ w CSPXTFSJGZͰϞδϡʔϧԽ ໊લۭؒʹΑΔϞδϡʔϧ؅ཧ

  16. CSPXTFSJGZͰϞδϡʔϧԽ

  17. DPODBUͭͭ͠CVOEMF

  18. Reactಋೖ w ΦϨΦϨ'MVY؀ڥΛ࡞੒ w ͍ͭͰʹ#BCFMಋೖ

  19. ςετ؀ڥߏங w ,BSNB 1IBOUPN+4 w ϒϥ΢βґଘͷίϯϙʔωϯτ΋
 ςετՄೳ w MPDBM4UPSBHFΑ͘࢖͏

  20. None
  21. ͜ͷτʔΫͰ͸ /PEFGFTUൃදͷ ͦͷޙ΍ͬͨ͜ͱΛ ঺հ͠·͢ʂʂʂʂ

  22. ೥·Ͱʹ ΍ͬͨ͜ͱ

  23. 2017೥1݄·Ͱʹ΍ͬͨ͜ͱ w ίʔυ෼ׂ͖ͭͮ w ςετվળ w σϓϩΠϏϧυϓϩηεվળ w ϥΠϒϥϦ·ΘΓ੔උ w

    ΦϨΦϨ'MVY੔උ
  24. ͦΕͧΕʹ͍ͭͯ ղઆ͠·͢

  25. Mission 1: SPLIT THE
 CODE

  26. 2015೥11݄·Ͱͷάϥϑ

  27. browserify؅ཧԼͷ ϑΝΠϧ਺ ϕλॻ͖ϑΝΠϧ਺

  28. None
  29. 2017೥1݄·Ͱͷάϥϑ

  30. ৽ن։ൃʹΑΓ ૿͍͑ͯ͘ϑΝΠϧ ෼ׂ͍͍ͩͨ׬ྃ

  31. None
  32. TEST THE
 COMPONENT Mission 2:

  33. JSςετ΋CI·Θ͢Α͏ʹ w ݩʑ1FSMଆ͔͠$*ͯ͠ͳ͔ͬͨ w खݩͰςετ௨Ε͹0,ͯͨ͠ w +FOLJOTͰ+4ςετ͢ΔΑ͏ʹ

  34. Commit Statusʹ݁ՌΛදࣔ +4ςετ࣮ߦ݁Ռ

  35. ͦͷଞͷςετ w ͪΌΜͱϏϧυͰ͖Δ͔ςετ w &4-JOUςετ w มͳίʔυॻ͍ͯͨΒམͱ͢ w evalͱ͔withͱ͔

  36. &4-JOUςετͷ༷ࢠ

  37. &4-JOUςετͷ༷ࢠ

  38. CIͰຊ൪JS/CSSΛϏϧυ w Ϗϧυ݁ՌΛHJUJHOPSFͨ͠ w EJ⒎ಡΉͷָ͕ʹ w खݩͱຊ൪ͰϏϧυ؀ڥม͑Δ w NJOJGZ֎ͯ͠Ϗϧυ࣌ؒ୹ॖ w

    TPVSDFNBQ෇͚Δ
  39. bower୤ग़ w OQNʹ͋Δ΍ͭ͸OQNʹҠ؅ w OQNʹͳ͍৔߹ w (JU)VC͔ΒΠϯετʔϧ
 4)"Ͱόʔδϣϯࢦఆ  w

    ༗ࢤʹΑΔҠ২൛ΛΠϯετʔϧ
  40. None
  41. jQueryUI୤ग़ w EBUFQJDLFSΛQJLBEBZʹ w UBCT BVUPDPNQMFUFΛ
 ࣗ෼Ͱ࣮૷ w ·ͩTPSUBCMF͕࢒ͬͯΔʜʜ

  42. None
  43. yarnಋೖ w OQNͷόάͰ
 OQNTISJOLXSBQ͕࢖͑ͳ͘ͳΓ
 ࢓ํͳ͘ZBSOʹʜʜ w ݱࡏ͸OQN΋௚ͬͯΔΒ͍͠

  44. ఆظΞοϓσʔτσʔ w ຖ݄ୈҰ݄༵೔Λ
 OQNΞοϓσʔτσʔʹ w HSFFOLFFQFS࢖͍͍ͨʜʜ

  45. SlackͰप஌

  46. Mission 3: MVVM OR
 FLUX?

  47. 2015೥࣌఺ͰͷReactઃܭ w খن໛.77.ͬΆ͘ w େن໛'MVYͬΆ͘

  48. None
  49. None
  50. ΦϨΦϨFlux w %JTQBUDIFS͸&WFOU&NJUUFS w 4UPSF΋&WFOU&NJUUFS w this.stateʹঢ়ଶΛอଘ

  51. 4UPSF γϯάϧτϯ "DUJPO$SFBUPS

  52. ஈʑਏ͘ͳ͖ͬͯͨ w ৔ॴʹΑͬͯॻ͖ํ͕ҧ͏ w 3FBDU΁ͷ׳Ε w ίϯϙʔωϯτͷن໛ w աڈͷ࣮૷΁ͷ൓ল

  53. ઃܭํ਑ͷڞ༗Ή͍ͣ w 3FBDU'MVYք۾ͷ஌͕ࣝඞཁ w νʔϜͷΤϯδχΞ͸օ
 ϑϩϯτɾαʔό݉ۀ

  54. ࠷ۙ΍ͬͯͨ͜ͱ w ॳظͷΦϨΦϨ'MVY࣮૷Λ
 ϦϑΝΫλϦϯά w 3FEVYΞʔΩςΫνϟʹ͚ۙͮΔ

  55. Ұ൪ਓؾͷ'MVYϑϨʔϜϫʔΫ ✔υΩϡϝϯτɺπʔϧ͕ॆ࣮ ✗ඇಉظॲཧͷํ๏͕͍Ζ͍Ζ͋Δ

  56. Reduxʹ͚ۙͮΔ w ඇಉظॲཧ෭࡞༻͋ΔॲཧΛ
 "DUJPO$SFBUPSʹҠಈ w 4UPSFͷߋ৽ॲཧΛSFEVDFSʹ w 4UPSFΛ౷߹

  57. ྫࣸਅαΠυόʔ

  58. ඇಉظॲཧ/෭࡞༻ w ඇಉظॲཧࣸਅҰཡͷऔಘ w ෭࡞༻هࣄຊจ΁ͷૠೖ w هࣄຊจ͸ੜ%0.ʹ஋Λอଘ͢Δ w ੜ%0.ͷߋ৽ॲཧ͸
 αΠυόʔͷ4UPSFͱ͸ؔ܎ͳ͍ͷͰɺ


    ෭࡞༻ͱΈͳ͢
  59. Storeͷߋ৽ॲཧΛreducerʹ w SFEVDFS TUBUF BDUJPO TUBUF w ෳ਺ͷTUPSFΛ߹੒Ͱ͖ΔΑ͏ʹ w ςετ͠΍͍͢

  60. ͚ͬ͜͏͔͔࣌ؒͬͨ……

  61. IS THE ORDER
 RESTORED? IS THE ORDER
 RESTORED? IS THE

    ORDER
 RESTORED? IS THE ORDER
 RESTORED? IS THE ORDER
 RESTORED? IS THE ORDER
 RESTORED? ϑϩϯτΤϯυʹடং͸໭͔ͬͨʁ @amagitakayosi
  62. ·ͩ·ͩ ൃల్্

  63. վળʹ ΰʔϧ͸ ແ͍ʂʂ

  64. ࠓޙͷվળʹඞཁͳ΋ͷ w νʔϜϝϯόʔͱͷ૬ஊ w ࣮૷ํ਑ͷυΩϡϝϯτԽ w ޻਺

  65. Ί͛ͣʹ վળ͢Δ εϐϦοτ

  66. ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ

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

  68. גࣜձࣾ͸ͯͳͰ͸ ࠷ߴͷΞʔΩςΫνϟΛ໨ࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ