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

14084b6462b19a8512ce5208a76f8925?s=47 fand/amagitakayosi
January 21, 2017
Technology
15
6.1k

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

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

14084b6462b19a8512ce5208a76f8925?s=128

fand/amagitakayosi

January 21, 2017
Tweet

Want more?

14084b6462b19a8512ce5208a76f8925?s=48 fand
5
2.5k
14084b6462b19a8512ce5208a76f8925?s=48 fand
1
350
14084b6462b19a8512ce5208a76f8925?s=48 fand
2
1.3k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
43
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
2
98
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
140
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
1
210
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
370
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
100
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
190
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
60
250k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
5
780

Transcript

  1. 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. 2.

    @amagitakayosi

  3. 3.

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

  4. 4.
    None
  5. 5.

    IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!! ࠓ͙͢ొ࿥ʂ !!!!!!!!!!! !!!!!!!!!! !!!!!!!!!! !!!!!!!!!!! !!!!!!!!!!

  6. 6.
    None
  7. 7.

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

  8. 8.

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

  9. 9.

    /PEFֶԂࡇͰ࿩͠·ͨ͠

  10. 10.

    લճͷ͋Β͢͡

  11. 11.

    + ౰ॳͷٕज़ελοΫ

  12. 12.

    ཱͪ͸͔ͩΔ໰୊ͨͪ

  13. 13.

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

  14. 14.

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

  15. 15.

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

  16. 16.

    CSPXTFSJGZͰϞδϡʔϧԽ

  17. 17.

    DPODBUͭͭ͠CVOEMF

  18. 18.

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

  19. 19.

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

  20. 20.
    None
  21. 21.

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

  22. 22.

    ೥·Ͱʹ ΍ͬͨ͜ͱ

  23. 23.

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

    ΦϨΦϨ'MVY੔උ
  24. 24.

    ͦΕͧΕʹ͍ͭͯ ղઆ͠·͢

  25. 25.

    Mission 1: SPLIT THE
 CODE

  26. 26.

    2015೥11݄·Ͱͷάϥϑ

  27. 27.

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

  28. 28.
    None
  29. 29.

    2017೥1݄·Ͱͷάϥϑ

  30. 30.

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

  31. 31.
    None
  32. 32.

    TEST THE
 COMPONENT Mission 2:

  33. 33.

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

  34. 34.

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

  35. 35.

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

  36. 36.

    &4-JOUςετͷ༷ࢠ

  37. 37.

    &4-JOUςετͷ༷ࢠ

  38. 38.

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

    TPVSDFNBQ෇͚Δ
  39. 39.

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

    ༗ࢤʹΑΔҠ২൛ΛΠϯετʔϧ
  40. 40.
    None
  41. 41.

    jQueryUI୤ग़ w EBUFQJDLFSΛQJLBEBZʹ w UBCT BVUPDPNQMFUFΛ
 ࣗ෼Ͱ࣮૷ w ·ͩTPSUBCMF͕࢒ͬͯΔʜʜ

  42. 42.
    None
  43. 43.

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

  44. 44.

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

  45. 45.

    SlackͰप஌

  46. 46.

    Mission 3: MVVM OR
 FLUX?

  47. 47.

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

  48. 48.
    None
  49. 49.
    None
  50. 50.

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

  51. 51.

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

  52. 52.

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

  53. 53.

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

  54. 54.

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

  55. 55.

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

  56. 56.

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

  57. 57.

    ྫࣸਅαΠυόʔ

  58. 58.

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


    ෭࡞༻ͱΈͳ͢
  59. 59.

    Storeͷߋ৽ॲཧΛreducerʹ w SFEVDFS TUBUF BDUJPO TUBUF w ෳ਺ͷTUPSFΛ߹੒Ͱ͖ΔΑ͏ʹ w ςετ͠΍͍͢

  60. 60.

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

  61. 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. 62.

    ·ͩ·ͩ ൃల్্

  63. 63.

    վળʹ ΰʔϧ͸ ແ͍ʂʂ

  64. 64.

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

  65. 65.

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

  66. 66.

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

  67. 67.

    ͋Γ͕ͱ͏͍͟͝·ͨ͠

  68. 68.

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