From Backbone to React: How to write great code

Richard spent the last 16 months migrating a large Backbone codebase to React. Learn why this has made their team so very happy and what it can say about good code vs great code.

Transcript

2. 16 200 Unit tests written per month
3. usability testing added keyboard controls
4. 7 10 Views or components written per month
5. apples and pears comparison http://bit.ly/1MvDN1h
6. 1. Simplicity 2. Predictability 3. Composability
7. 1 Simplicity
8. data = _.extend({ isHighlighted: this.isHighlighted }, this.user.toJSON(), this.account.toJSON() }); html = Mustache.render(Template, data); this.$el.html(template); return this.$el;
9. var classes = "user-wrapper" if (this.state.isHighlighted) { var classes += " is-highlighted" } return ( <div className={classes}> <strong>{this.props.userName}</strong> <img src={this.props.avatar} /> <span>account: {this.props.accountName} </div> );
10. Reducing short term memory usage simplicity
11. this.render = _.debounce( this.render )
12. React Runtime render input input input input input
13. Remove, don’t conquer complexity simplicity
14. emails = this.user.get(‘emails') data = { hasEmail: emails.length > 0 } html = Mustache.render(Template, data)
15. simplicity complexity
16. 1. Reduce short term memory usage 2. Remove, don’t conquer complexity simplicity:
17. 2 Predictability
18. propTypes: { firstName: React.PropTypes.string.isRequired, emails: React.PropTypes.arrayOf([ React.PropTypes.string ]), permission: React.PropTypes.oneOf([ "admin", "limited", "normal" ]) } PropTypes: http://bit.ly/1FDQmuq & Model: http://bit.ly/1PsG9mf
19. incorrect type: duplicate keys: mutating props incorrectly:
20. defending against future mistakes predictability
21. if (!Array.isArray(instances)) { type = typeof instances; msg = "listenToEvents expects array,not:"; console.warn(msg + " " + type); }
22. “our powers to visualize processes evolving in time are relatively poorly developed Edsger W. Dijkstra http://bit.ly/1fzrqcm
23. Async Data Fetching User Interaction Flow breaking code
24. Data 1. WillRecieveProps 2. ShouldUpdate 3. WillUpdate 4. Render 5. DidUpdate component 1: component 2: Data 1. WillRecieveProps 2. ShouldUpdate 3. WillUpdate 4. Render 5. DidUpdate
25. Data lifecycle methods component 1: lifecycle methods lifecycle methods lifecycle methods lifecycle methods component 2: component 3: component 4: component 5:
26. http://bit.ly/1R69Xsi
27. initialize: function(model) { this.model = model this.listenTo( this.model, "change:name", this.changeName ) } changeName: function() { name = this.model.get('name') this.$el.find('.name').html(name) }
28. make the model of time simpler predictability
29. initialize: function(model) { this.model = model this.listenTo( this.model, "change:name", this.changeName ) } changeName: function() { name = this.model.get('name') this.$el.find('.name').html(name) }
30. 1. lifecycle methods 1. render? 2. manual dom updates? 3. data binding? 4. updating children?
31. slow enough to be unpredictable fast enough to be predictable
32. Standardise the effects of time predictability
33. 1. Defend against future mistakes 2. Make the model of time simpler 3. Standardise the effects of time predictability:
34. 3 composability
35. “"A highly composable system provides ... components that can be selected and assembled in various combinations to satisfy specific user requirements" blog.kissmetrics.com/loading-time/
36. dropdown controls 1 2 3 4 5 6
37. render: function() { this.$el.html(Mustache.render(Template)); $wrapper = this.$el.find(‘.childView'); this.childView.setElement($wrapper); this.childView.render(); return this.$el; } Backbone: Add a child view?
38. Make component interfaces performant composability
39. Backbone: Extend a class? SelectableRow = Row.extend({ events: function() { oldEvents = Row.prototype.events; newEvents = {'click': 'select'}; return _.extend(oldEvents, newEvents}); } template: require('selectable-row.html'), getViewData: function() { return model.toJSON(); } });
40. toggleOpen: function() { this.setState({open: !this.state.open}) }, render: function() { return ( <DropdownControls toggleOpenState={this.toggleOpen} open={this.state.open} > <div>shown when state.open</div> </DropdownControls> ) } React: Add a child component
41. Make component interfaces explicit composability
42. 14 25 Generic components vs views
43. 2.2 4.8 Generic component/view usage
44. 1. Performant component interfaces 2. Explicit component interfaces composability:
45. 4 Summary
46. What is good code?
47. 1. Simple 2. Predictable 3. Composable
48. Good code
49. 1. Fewer regressions 2. Less serious regressions 3. More code re-use 4. Shipping faster
 5. Better usability & UX
50. 8 22 DEC 09:23AM Simple and beautiful
51. Further reading Functional programming Predictable Composabilty State Complect Implicit vs Explicit
52. @byrichardpowell follow me for musings on React.js, UI Development & Product Design