React at Minbox

A high-level overview of why Minbox moved to React/Flux from Backbone and some tips for creating a performant and clean application.

Transcript

1. Lessons learnt React at Minbox
2. Simon Fletcher @simonify http://wakecodesleep.com Previously founder/engineer at Interstate Used Backbone.js extensively Started learning React last year Just passed 2 years at Minbox
3. JavaScript at Minbox Rails bootstrapped Backbone app React app with {Model, Collection, Router } = Backbone React app sans Backbone V1 V2 V3 Model, Collection, Router
4. V1 > V2
5. Learning as were were moving
6. We made the early decision to stick with Backbone
7. Lots of existing domain logic for re-use
8. A ~month of initial development time. Lots of iterations.
9. We ran in to some problems
10. Backbone is mutable by default
11. Large single-page application Mutations happening all over the place
12. Handling not just direct user actions but also push events
13. Not buying in to the Reactive way of thinking
14. Passing mutable models as props Two-way data binding Side effects Unpredictable behavior Component Component Component Model Model Model
15. Cascading changes cause cascading renders
17. Harder to optimize Can’t take advantage of shouldComponentUpdate
18. V2 > V3
19. ImmutableJS https://facebook.github.io/immutable-js/ A lightweight set of immutable functional data structures
20. Backbone > Flummox A minimal, isomorphic Flux implementation
21. The church of FSM
22. Finite State Machines
23. Uploader Action comes in Mutate the store Emit a change Compare what’s changed React to change using Store as the source of truth
24. Redux https://github.com/rackt/redux
25. Tips
26. Define your PropTypes
27. Separate your concerns Smart Components vs. Dumb Components
29. Try and keep things as pure as possible (props) => component
30. Take advantage of ES6/7 https://babeljs.io
31. Use ESLint http://eslint.org/ npm install eslint --save npm install eslint-config-airbnb --save npm install babel-eslint --save
32. http://wakecodesleep.com http://github.com/simonify Simon Fletcher @simonify