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

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

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΍ͬͯ·͢
5. IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!! ࠓ͙͢ొ࿥ʂ !!!!!!!!!!! !!!!!!!!!! !!!!!!!!!! !!!!!!!!!!! !!!!!!!!!!
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Α͘࢖͏
21. ͜ͷτʔΫͰ͸
    /PEFGFTUൃදͷ
    ͦͷޙ΍ͬͨ͜ͱΛ
    ঺հ͠·͢ʂʂʂʂ
22. ೥·Ͱʹ
    ΍ͬͨ͜ͱ
23. 2017೥1݄·Ͱʹ΍ͬͨ͜ͱ w ίʔυ෼ׂ͖ͭͮ
    w ςετվળ
    w σϓϩΠϏϧυϓϩηεվળ
    w ϥΠϒϥϦ·ΘΓ੔උ
    w ΦϨΦϨ'MVY੔උ
24. ͦΕͧΕʹ͍ͭͯ ղઆ͠·͢
25. Mission 1: SPLIT THE
 CODE
26. 2015೥11݄·Ͱͷάϥϑ
27. browserify؅ཧԼͷ ϑΝΠϧ਺ ϕλॻ͖ϑΝΠϧ਺
29. 2017೥1݄·Ͱͷάϥϑ
30. ৽ن։ൃʹΑΓ ૿͍͑ͯ͘ϑΝΠϧ ෼ׂ͍͍ͩͨ׬ྃ
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 ༗ࢤʹΑΔҠ২൛ΛΠϯετʔϧ
41. jQueryUI୤ग़ w EBUFQJDLFSΛ
    QJLBEBZ
    ʹ
    w UBCT
    BVUPDPNQMFUF
    Λ
 ࣗ෼Ͱ࣮૷
    w ·ͩTPSUBCMF͕࢒ͬͯΔʜʜ
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ͬΆ͘
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. גࣜձࣾ͸ͯͳͰ͸
    ࠷ߴͷΞʔΩςΫνϟΛ໨ࢦ͠
    ͋͘ͳ͖୳ٻΛ͚ͭͮΔ
    ΤϯδχΞΛืू͍ͯ͠·͢ʂ