Ember + Redux - Odessa JS 2015

The state of Ember in 2015 and some ideas about how to integrate it with Redux. Presented at Odessa JS

Transcript

1. Ember + Redux
2. @listochkin
3. frontendua.im tinyurl.com/dev-ua-chats
4. Kottans.org
5. NodeSchool Events Kyiv + Kirovograd
6. @RustUkraine https://gitter.im/dev-ua/rust
7. Meetup II Lviv https://gitter.im/dev-ua/rust
8. NodeJS uk l10n WG https://github.com/nodejs/iojs-uk/
9. Node and API design
10. Ember
11. Before 1.0-rc.1
12. JS Frameworks Day 2014 Odessa JS 2014
13. The Rolling Scopes Conference 2015 JS Frameworks Day 2015
14. Convergence
15. Common Goal Common Architecture Common Princiles
16. Use Whatever
17. Ember is THE BEST
18. the most productive way to build large scalable and maintainable web applications
19. Years Ahead of Competition
20. React Angular Aurelia, Om, JSBlocks, etc. etc.
21. The State of Ember
22. Ember 2.0!
23. Cleanup Release No New Features Removed Deprecations
24. Ember Data CLI LiquidFire FastBoot Simple Auth Mirage EmberFire Deploy Paper Watson Try Dep Workflow Islands
25. ~1400
27. Facebook?
28. Ghost Travis CI Riak Consul Discourse
30. Jan 31 Twitter Flight Feb 15 Ember rc1 May 18 Polymer May 29 React Jun 23 Ember rc6 Aug 29 Ember rc8 Sep 20 Steve Kane talk Sep 15 Oct 30 R:RBP Pete Hunt
31. 2013 Nested Routing Nested Components
33. / <login-form> <search-box> /articles <article-list> /article <markdown-viewer> <comment-list> <comment-badge> <user-pic> <markdown-viewer> <add-comment-form>
34. Routes = Smart Components
35. Data Down Actions Up default since 1.0 - Aug 2013 mandatory since 2.0 - Aug 2015
36. Years Ahead of Competion
37. workflow today
38. build
39. common tool runner, builder incremental ES-next, TypeScript Sass, PostCSS, Lint, CodeStyle
40. generator
41. files placement directory structure test stubs custom generators
42. testing
43. test runner test stubs test helpers mocking embedded tests
44. tests are fast tests are easy to write strong testing culture
45. addons
46. common tool focus on addons focus on convergence
47. many addons covering different niches
48. LiquidFire - since Jul 2014 Ember CLI Deploy Apr 2014 - Feb 2015 Mirage
49. data layer
50. JSON API 1.0
51. “Standard for REST APIs”
52. REST <-> Graph
53. картинка
54. Ember Inspector
55. Components Routing Container Data Performance Async Flow extendible every browser
56. tooling integration view routing data access testing
58. “business logic”
59. Promise Pipes Flux
60. картинка
61. Flux for Other Frameworks
62. unidirectional data flow
63. Redux
64. Reducer
65. (state, action) => state
66. createStore(reducer, initialState) getState() dispatch(action) subscribe(listener) applyMiddleware(...)(createStore)
67. Redux in Ember
68. 3 Principles
69. Single source of truth State is read-only Mutations are written as pure functions
70. Single source of truth
71. Ember Data Store
72. State is read-only
73. Data Down Actions Up
74. Mutations are written as pure functions
75. Ember Actions
76. export default Ember.Route.extend({ model () { return this.store.findAll('tweet'); }, actions: { postNewTweet (text, username, postedAt) { this.store.createRecord('tweet', { text, username, postedAt }).save(); } } });
77. Route-as-an-App
78. / <login-form> <search-box> /articles <article-list> /article <markdown-viewer> <comment-list> <comment-badge> <user-pic> <markdown-viewer> <add-comment-form>
79. Global State + route state filters
81. Ember Redux
82. action wrapper
83. export default Ember.Route.extend({ model () { return this.store.findAll('tweet'); }, actions: { postNewTweet (text, username, postedAt) { this.store.createRecord('tweet', { text, username, postedAt }).save(); } } });
84. export default Ember.Route.extend(WithRedux, { state (state) { return state.tweets }, actionCreators: { model () { ... }, postNewTweet () { ... } } });
85. What About DX? where’s my hot reload?
86. Dan Abramov React Europe
87. tests
88. faster more reliable persistent reproducible
89. TDD is easy when it’s easy to write tests
90. Superior DX
91. 6 months from now other developer you next week
92. Ember
93. common toolchain addon ecosystem modern architecture performance
94. modern proven trusted evolving
96. The Best Stack since 2013