Backbone to React. What it says about awesome UI Code.
0 likes642 views
The document discusses best practices for writing code, emphasizing simplicity, predictability, and composability as key principles. It outlines practical strategies for reducing complexity and improving user interaction flow through effective data lifecycle management and component design. Additionally, it highlights the importance of creating performant and explicit component interfaces to facilitate better usability and enhance user experience.
![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](https://image.slidesharecdn.com/backbone-to-react-presentation-160123133958/85/Backbone-to-React-What-it-says-about-awesome-UI-Code-18-320.jpg)
Backbone to React. What it says about awesome UI Code.
- 2. 16 200 Unit tests written per month
- 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. 1Simplicity
- 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
- 14. emails = this.user.get(‘emails') data = { hasEmail: emails.length > 0 } html = Mustache.render(Template, data)
- 16. 1. Reduce short term memory usage 2. Remove, don’t conquer complexity simplicity:
- 17. 2Predictability
- 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 methodscomponent 1: lifecycle methods lifecycle methods lifecycle methods lifecycle methods component 2: component 3: component 4: component 5:
- 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. 3composability
- 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
- 44. 1. Performant component interfaces 2. Explicit component interfaces composability:
- 45. 4Summary
- 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
- 52. @byrichardpowell follow me for musings on React.js, UI Development & Product Design