Guiding Through The JavaScript Frameworks

Angular.jsやBackbone.jsを始めとした『MV* フレームワーク』とカテゴライズされるJavaScriptのフレームワークは今、まさに百花絢爛。
本セッションでは、そんなJavaScriptフレームワークの歩き方について、
『もう迷わない』ではなく、正しい『迷い方』について紹介します。

Transcript

1. Guiding Through THE JAVASCRIPT FRAMEWORKS Yuya Saito @ Rich Media JavaScriptϑϨʔϜϫʔΫͷา͖ํ Version 2.0.0 Developers Summit 2015
2. UX Engineer @ Rich Media Yuya Saito
4. Frontend Weekly Curated by @cssradar @t32k @hiloki frontendweekly.tokyo
5. JAVASCRIPT FRAMEWORKS The Map of JavaScriptϑϨʔϜϫʔΫͷ஍ਤ
6. Backbone Angular Ember MVC Data Binding Unit Testing Dependency Injection Conventions E2E Testing Structure ES6 Modules Web Components More comprehensive More Flexibility Router
7. Angular.js & Ember.js Data Binding Web Components
8. Angular.js Dependency Injection
9. POPULAR FRAMEWORKS Comparison of ஶ໊ϑϨʔϜϫʔΫͷൺֱ
10. Angular.js
11. Pros
12. Pros 1. ؆୯ʹར༻Ͱ͖Δ 2. खް͍αϙʔτ 3. ଟ͘ͷϢʔβ͕͍Δ
13. Cons
14. Cons 1. Angular.jsͷ࢖͍ํΛ֮͑Δඞཁ͕͋Δ 2. ʰؔ৺ͷ෼཭ʱͷ๏ଇҧ൓ 3. ʰຐ๏ʱͩΒ͚
15. Ember.js
16. Pros
17. Pros 1. “The Ember Way”ͱ͍͏Ұ؏ͨ͠఩ֶ 2. ଟ͘ͷ໰୊͕ղܾࡁΈ 3. ༏ΕͨυΩϡϝϯτ / Ϣʔβϕʔε
18. Cons
19. Cons 1. “The Ember Way”͸ॾਕͷ݋ 2. ॊೈੑʹ͚ܽΔ
20. Backbone.js
21. Pros
22. Pros 1. খ͘͞ɺ ॊೈͰΑ͘ςετ͞ΕͨϞδϡʔϧ܊ 2. ଟ͘ͷجຊతͳ໰୊͕ղܾ͞Ε͍ͯΔ 3. ιʔείʔυ΋୹͘ɺ ཧղ͠΍͍͢
23. Cons
24. Cons 1. ͢΂ͯͷ໰୊ʹର͢ΔղܾΛఏ͍ࣔͯ͠ͳ͍ 2. Backbone.jsϕʔεɾϑϨʔϜϫʔΫͷඞཁੑ
25. React.js
26. Pros
27. Pros 1. ϋΠɾύϑΥʔϚϯεͷϨϯμϦϯά 2. εςʔτ؅ཧͷ؆қԽ 3. ୯ͳΔViewϨΠϠ
28. Cons
29. Cons 1. ςϯϓϨʔτͷγϯλοΫε͕ෆࣗવ 2. ϑΝΠϧαΠζ
30. FLUX
31. Action Dispatcher Store View Unidirectional data flow
32. Action Dispatcher Store View ༣ศड͚ͷ࣋ͪओ ༣ศड͚ ༣ศ԰͞Μ ༣ศ෺
33. Flux by Facebook git.io/MFS1QA
34. Delorean by Delorean.js git.io/z3LsQw
35. Fluxxor by Brandon Tilley git.io/udBcxg
36. Ampersand.js
37. Pros
38. Pros 1. ॊೈੑͱ݁߹ੑͷόϥϯε͕͍͍ 2. ίϚϯυϥΠϯɾπʔϧ͕ศར 3. ଟ͘ͷϓϥάΠϯͷଘࡏ
39. Cons
40. Cons 1. ·ͩʰए͍ʱ 2. IE8ҎԼͷαϙʔτͳ͠
41. Aurelia.js
42. Pros
43. Pros 1. ॊೈੑͱ݁߹ੑͷόϥϯε͕͍͍ 2. ES6/ES7΁ͷϑΥʔΧε 3. Ϟδϡϥʔੑ͕ߴ͍
44. Cons
45. Cons 1. ·ͩʰए͍ʱ 2. IE11ҎԼͷαϙʔτͳ͠
46. IDENTIFYING PROBLEMS Lost in ໰୊͸໰୊ͦͷ΋ͷͷൃݟʹ͋Δ
47. “ Choose tools you'll use. New to front-end dev? Just use HTML/CSS/JS. Add tools & abstractions when they improve your productivity. — Addy Osmani
48. πʔϧΛ୳͠ग़͢͜ͱ͸ΰʔϧͰ͸ͳ͍
49. ͲΜͳ໰୊Λղܾ͠Α͏ͱ͍ͯ͠Δͷ͔
50. How to Solve it by George Pólya amzn.to/1pnZ3L9
51. 4  ໰୊Λཧղ͢Δ
     Ͳ͏ղܾ͢Δ͔ઓུΛߟ͑Δ
     ઓུΛ࣮ߦ͢Δ
     Ͳ͏໰୊Λղܾ͔ͨ͠ΛৼΓฦΔ
52. ໰୊Λཧղ͢Δ
53. ໰୊Λཧղ͢Δ
54. ϓϩμΫτͷεςʔδ͸Ͳ͜ͳͷ͔
55. eg ৽نϓϩδΣΫτͷ։ൃεςʔδ طଘϓϩδΣΫτͷϦχϡʔΞϧεςʔδ
56. Angular.js & Ember.js
57. ΞʔΩςΫτͷ૑ੈస׵ظ
58. Angular.jsͷεϐʔυ
59. Ember.jsͷݎ͞
60. Backbone.js & Ampersand.js
61. ঃʑʹMV*ͳઃܭʹ଩Λ੾Δ
62. ϑΝΠϧαΠζ͸େ͖͘มΘΒͳ͍
63. มߋʹڧ͍ઃܭͱ͸
64. 25 Years Old
65. มΘΓଓ͚Δ͜ͱ
66. Web Components
67. ECMA Script 6 & 7
68. มΘΔ͜ͱΛલఏͱ͢Δ
69. “ — Me ׬ᘳͳߏ଄Λ࡞Ζ͏͢ΔͷͰ͸ͳ͘ɺ
    յΕͨͱ͖༐ؾΛ࣋ͬͯมߋͰ͖ΔΑ͏ͳ
    ઃܭΛɻ
70. Remember the Foundation
71. “ 1. Small is beautiful. 2. Make each program do one thing well. 3. Build a prototype as soon as possible. 4. Choose portability over efficiency. 5. Store data in flat text files. 6. Use software leverage to your advantage. 7. Use shell scripts to increase leverage and portability. 8. Avoid captive user interfaces. 9. Make every program a filter. — Mike Gancarz
72. 1. Small is beautiful. 2. Make each program do one thing well. 3. Build a prototype as soon as possible.
73. มΘΓଓ͚Δ͜ͱ
74. Node.js & Ecosystem
75. Learn JavaScript
76. “ The most important thing is that your team becomes familiar with building well-structured apps in JavaScript. — Henrik Joreteg
77. Read Backbone.js Source
78. And Underscore.js
79. Books to Read
80. Speaking JavaScript by Axel Rauschmayer speakingjs.com
81. Eloquent JavaScript by Marijn Haverbeke eloquentjavascript.net
82. Effective JavaScript by David Herman effectivejs.com
83. Learn CSS and HTML, too
84. “ — My Friend )5.-͕Ԛ͍ͱ$44΋Ԛ͍ɻ
    ͦͷ྆ऀͷଘࡏ͕ͦ͜+BWB4DSJQUͷϩδοΫ Λࢧ͑Δج൫͔ͩΒɺ͔ͬ͠Γॻ͍ͯཉ͍͠ɻ
85. A FRAMEWORK? How Do I Review ϑϨʔϜϫʔΫͷબ୒๏
86. Lock-In ғ͍ࠐΈ
87. Opinionated Architecture ʰؤݻʱͳઃܭ
88. Accidental Complexity ෆཁͳෳࡶੑ
89. Testability ςετͷ͠΍͢͞
90. “ Replace "can you build this?" with "can you maintain this without losing your minds?" — Nicolas Gallagher
91. NOT LEAST Last but ऴΘΓʹ
92. “ — Nicholas Zakas Enough with the JavaScript already!
93. Content Presentation JavaScript Progressive Enhancement
94. Stability Performance Reach
95. It’s Your ResponsibilityTM
96. “ — TJ Holowaychuk Programming would be pretty boring if everyone agreed.
97. THANK YOU! @CSSRADAR