Frameworks in 2015

Transcript

1. Frameworks in 2015 Andrey Listochkin @listochkin github.com/listochkin github.com/dev-ua
2. Frameworks in 2015
3. @listochkin frontendua.im
6. Angular Ember React
7. MVC
8. MV*
9. *V*
10. ***
11. Architecture
12. BIG Apps
13. GMail ~2007 800k
14. Your App Today ~1.5m
15. Frameworks Matter
16. bootstrap server DOM data 3rd-party ...
17. Write It By Hand
18. Ecosystems
19. Ember Ember Data Ember CLI Ember Inspector Ember Deploy LiquidFire EmberFire Ember Paper
20. Ember vs React
21. Ember Ecosystem vs React Ecosystem
23. Missing Piece?
24. Abandon
25. Wait
26. Implement
27. and Share
28. Dynamics of Ecosystems
29. Dynamics of Open Source
30. Done == Dead
31. jQuery
32. Backbone
33. It Works!
34. All Bugs Fixed
35. No one wants it :(
36. Reinvent
37. Refactor
38. Bikeshed
39. Change!
40. Abandon
41. Batman JS Spine Knockout Can JS Durandal JavaScript MVC
42. Wait
43. Ember FastBoot
44. Angular 2
45. Mixins in React
46. Implement
47. Builds
48. Ember CLI
49. Grunt vs Gulp Browserify vs Webpack Test’em vs Karma Selenium vs Protractor
50. and Share
51. Gold Rush
52. Young Ecosystems
53. React Flux
54. 493 results for 'flux' https://www.npmjs.com/search?q=flux
55. We've found 1,276 repository results https://github.com/search? q=flux&l=JavaScript&type=Repositorie s
56. Facebook Flux Reflux Fluxxor Fluxible by Yahoo Alt Flummox Marty.js McFly Lux Fynx Fluxy
57. Rivalry
58. AngularStrap vs UI Bootstrap
59. Unification
60. Ember CLI Deploy
61. 3 projects
62. merged into one
63. 6 core contributors
64. 925 packages http://www.emberaddons.com/
65. Open Source is HARD
66. Github stars Green Badges Great Docs Big Early Adopters API compatibility Issues Triaging
67. Dynamics
68. forced to change
69. missing pieces
70. great artists steal Steve Jobs Pablo Picasso Igor Stravinsky William Faulkner T. S. Eliot W. H. Davenport Adams
72. common future
73. Predict to Future-proof
74. framework-agnostic architecture
75. since summer 2013
76. architecture = decisions
77. code
78. tools
79. dependencies
80. code
81. spacial
83. components
84. YUI 2007
85. Widgets
86. Angular Directive 2009
87. custom elements
88. Twitter Flight January 31, 2013
89. Modern Components
90. data down events up
91. React sans vDOM
92. Polymer May 16, 2013
93. <stock-badge ticket=”msft” range=”yoy” chart=”linear”>
94. React May 29, 2013
95. Ember 1.0 rc8 Aug 29, 2013
96. Ember Components
97. Rethinking Best Practices video Oct 30, 2013
98. components
100. dumb vs smart
101. dumb UI-only No dependencies No domain state
102. dumb is good
103. double wrap
104. smart wraps dumb
105. higher-order components
106. Route-driven Views
107. Nested UI
109. global UI state vs local UI state
110. Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'
111. Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'
112. Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'
113. Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'
114. {{outlet}}
115. components = tags
116. outlets = iframes
117. shallow hierarchies
118. UI-only components
119. livereloadability
120. share
121. Router + Components
122. Route Handler loads data handles actions
123. Component shows DOM DOM events => actions manages children
124. Router + Components
125. got a form? write a component! even when you don’t reuse
126. Ember
127. controllers views components++
128. Angular
129. smallest controllers possible
130. directives++
131. angular 1.4 router UI router
132. React
133. react-router
134. depth
135. MVC
137. “easy”
138. Backbone
139. Models Sync Data binding
140. better
141. Identity
142. Unidirectional Data flow
143. immutability+FP
144. CQRS
145. Operation Transforms
146. Offline Mode
147. distributed systems
149. Battlefield
150. flux
151. flux in any framework
152. Monadic Data Dependencies Declaration
153. GraphQL
156. Write-Only DOM
157. Ember Glimmer
158. JSX as a Data Structure
159. future
160. ES6
161. ES.Next + addons
162. @Decorators async type annotations JSX
163. @Stateful({ initialize (props) { return { count: 0 }; }, reducers: { increment (props, state) { return { count: state.count + 1 }; } } }) class Counter { static propTypes = { count: PropTypes.number.isRequired, increment: PropTypes.func.isRequired }; render () { const { count, increment } = this.props; return ( <button onClick={increment}> Pressed {count} times. </button> ) } }
164. class MyComponent extends HTMLElement { ... }
165. Aurelia Angular 2.0 React Ember
166. tools
167. Ember CLI
168. Build Test Runner Dependencies Dev Server Generators Addons
169. generators
170. tool enforces conventions
171. Angular React
172. React Hot Loader
173. live reload++
174. Ember Inspector
175. Render Tree Routing Data Explorer DI Container Deprecations Promises Performance
176. Chrome Firefox IE Safari
177. dependencies
178. ember install:addon liquid-fire
179. component library build step tool ...
180. testing
181. UI tests
182. visit('talks/new'); fillIn('input.title', 'My Cool Talk'); click('button.submit'); andThen(() => { equal( find('ul.talks li:last').text(), 'My Cool Talk'); });
183. Selenium
184. “Native”
185. pluggable renderers
186. jQuery vs Zepto
187. DOM vs Cocoa, QT
188. Native UI JS for App and Network
189. Rolling Releases
191. challenges
192. Angular 2 React Ember Router y y y Components y y y ES.next y y y vDOM w y w FP+immutable n w w monadic declarations n w n Data n w y Asset Pipeline n n y Addons n n y UI testing n n y Browser Tools n n y Hot Reload n y n Isomorphic w y w Native n y n Rolling Releases n n y
193. Ember Productivity
194. React Innovation
195. Angular Popularity
196. you don’t have to be productive, innovative, or popular to be successful
197. @listochkin frontendua.im