Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember + Redux - Odessa JS 2015

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

  26. None
  27. Facebook?

  28. Ghost Travis CI Riak Consul Discourse

  29. 2013

  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

  32. None
  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

  57. None
  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

  80. None
  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

  95. None
  96. The Best Stack since 2013

  97. None