React: Complexity to Components

A discussion of the problems we were facing in our large apps, why moving to React worked for us and lessons we learned from building React components that scale.

Transcript

1. React My Journey from Complexity to Components
2. Luke Hansell Software Engineer @luke_hansell
3. Holiday Extras
4. several large apps
6. complex data flow expensive re-rendering UI duplication
7. complex data flow
8. app model model api api view view view view view
9. complex data flow
11. uni-directional data flow
12. app model model api api view view view view view
13. app model model api api view view view view view
15. expensive re- rendering
21. rendering is expensive
22. Virtual DOM
23. Virtual DOM events
24. Virtual DOM events
25. Virtual DOM events
26. Virtual DOM events DOM manipulators
27. Virtual DOM events DOM manipulators
29. virtual DOM
30. UI duplication
31. App 1 App 2
32. App 1 App 2 checkout view
33. App 1 App 2 checkout view checkout view
35. UI duplication
36. App 1 App 2 checkout view checkout view
37. App 1 App 2 require(checkoutView) checkout view require(checkoutView)
38. UI Library App 1 App 2 require(checkoutView) checkout view require(checkoutView)
39. UI Library App 1 App 2 require(checkoutView) checkout view require(checkoutView) button logo product navbar
40. shared components
41. recap
42. complex data flow
43. uni-directional data flow
44. expensive rendering process
45. virtual DOM modifies only what changes
46. duplication of UI
47. shared components
49. What is React?
50. Just the UI
51. Virtual DOM
52. Data Flow
53. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
54. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
55. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
56. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
57. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
58. JSX
59. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
60. var Component = React.createClass({ render: function() { return React.createElement( “h1", null, "Hello World” ) } }) ReactDOM.render(<Component/>, document.body)
61. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
62. html properties rather than attributes
63. class = className for = htmlFor
65. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
66. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
67. pure functions
68. function add(x, y) { return x + y } add(2, 3) // 5 add(2, 3) // 5 add(2, 3) // 5
69. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
70. stateless functional components
71. var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
72. var Component = () => <h1>Hello World</h1> ReactDOM.render(<Component/>, document.body)
73. props
74. var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
75. var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
76. var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
77. var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
78. var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
79. var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
80. var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
81. var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
82. var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
83. var Component = (props) => ( <h1>Hello {props.name}</h1> ) Component.propTypes = { name: React.PropTypes.string.isRequired } ReactDOM.render(<Component name=“Jimmy”/>, document.body)
84. props are data passed in to components
85. state
86. var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
87. var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
88. var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
89. var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
90. var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
91. var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
92. var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
93. var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
94. React re-renders components on changes to state
95. component lifecycle
96. componentWillMount() COMPONENT componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() componentDidUpdate() componentWillUnmount() COMPONENT
97. props + state = DOM
98. Tips for Building Components
99. build small
100. build small
101. // BigComponents.js <div> <div> <img/> <h1></h1> </div> <div> <ul> <li><img /><span /></li> <li><img /><span /></li> <li><img /><span /></li> </ul> <div> <button /> <button /> </div>
102. // SmallComponent.js <div> <Avatar /> <FavouriteAlbumsList /> <FollowButton /> <MessageButton /> </div>
103. build compose-able
104. build compose-able move state higher
105. build compose-able use props and propTypes
106. build compose-able create UI components
107. build encapsulated
108. build encapsulated contain all functionality
109. build encapsulated use callback props as custom event hooks
110. small compose-able encapsulated
111. props + state = DOM
112. https://facebook.github.io/react/ http://hungrygeek.holidayextras.co.uk/ui-toolkit/ Thank you! @luke_hansell @TheHungryGeek