JavaScript LA, July 20, Back to React prep

An early version of a talk being prepped for React Rally 2017

Transcript

1. BACK TO REACT
4. YOU KNOW ENOUGH
5. YOU DON'T DO ENOUGH
15. PRIORITIES
16. YOU CAN ONLY DO ONE THING
23. HOW TO THINK ABOUT DEVELOPING REACT APPS
24. A TAIL OF TWO APPS
25. APP ONE: JUST THE REACT, MA'AM
27. APP TWO: WITNESS ME, HACKER NEWS
29. HARMFUL THINKING
30. "WHAT ARE YOU USING FOR {X}?"
31. REACT++
33. THE MISSING PIECE
34. REACT
35. You're responsible to manage this zone. REACT FLUX APP
36. REACT FLUX APP REACT ROUTER Most people fail to mention that most flux implementations are really React agnostic. They are independent of React, just global state managers
37. REACT FLUX APP REACT ROUTER Most people fail to mention that most flux implementations are really React agnostic. They are independent of React, just global state managers REACT-ROUTER-REDUX
38. REACT FLUX APP REACT ROUTER REACT-ROUTER-REDUX
39. You're responsible to manage this zone. REACT FLUX APP ROUTER REACT-ROUTER-REDUX
44. WHAT ROLE DOES REACT PLAY IN YOUR APP?
45. WHAT ROLL DOES REACT PLAY IN YOUR APP?
46. FRAMEWORK OR VIEW LIB
47. *-REACT OR REACT-*
48. {RAILS}-REACT
49. {REDUX}-REACT
50. {RELAY}-REACT
51. {REACT-ROUTER(V3)}-REACT
52. We write React that is informed by a library. — I see this pretty clearly because I work at a company where we have 8 apps and 8 teams. So we do things very differently. And part of my job at the company is to evaluate things in retrospect. See what seems to be working, what doesn’t seem to be working, and slowly steer us toward working better together. — I’ll be real honest, the job is rough. Because no matter what, I’m always asking someone to thing about React in a way that they’d prefer not to. !!! But I’ve also started to learn how adaptable people are. {RAILS}- {REDUX}- {REACT-ROUTER(V3)}-REACT
53. REACT-*
54. REACT-{JSXSTYLE}
55. REACT-{REACT-ROUTER(V4)}
56. REACT-{*}
57. REACT-ROUTER V3 >> V4
58. KNOW WHO’S DRIVING make decisions out of your app
59. ASK "WHAT'S THE COST OF ADOPTING THIS?" make decisions out of your app
60. A STYLED-COMPONENTS STORY make decisions out of your app
62. CHOOSE WISELY make decisions out of your app
63. "EVERYTHING IS REUSABLE"
64. We’ll start by looking at AppButton. See what that’s about.
65. We see that it’s in 3 places. So, we need to tread with caution.
66. We learn that it isn’t a button. And it’s surrounded by about 20 additional lines of boilerplate and flow annotations. To what amounts to misusing an anchor and applying very specific classes.
67. ok. Lets see what the story with dropdown is. We're defining it and then using it. So this one is safe.
69. And here my heart breaks because this isn’t a list item. That’s not a big deal, I can fix it by wrapping it in a list item. But you can see that we’ve hidden important information by extracting components Here’s we’re suing the AppButton again. Which is fine.
72. be quick to hear, slow to anger.
73. –Me, when I'm blistering “Can you tell me why you did this?”
74. THESE ARE THE ANSWERS I GET
75. “It’s reusable”
76. “It's faster”
77. “It’s easier to reason about”
78. WHAT I NEVER HEAR
79. “It's easy to change.”
80. We’ll start by looking at AppButton. See what that’s about. ?
82. THIS STYLE FAVORS AUTHORING NOT EDITING
83. REUSABILITY IS A TRAP CHACE encapsulation!!!
84. DRY Sandy Metz. “So dry it chafes”
85. –The Ruby Community “So DRY it chafes”
86. THE RULE OF THREE
87. –Martin Fowler (Refactoring) “code can be copied once, but when the same code is used three times, it should be extracted”
88. https://i.ytimg.com/vi/r4MmSmv_0yo/ maxresdefault.jpg
89. EXTRACT LAZILY this'll be a good place to talk about strategies for when, where, and why to extract
90. EXTRACT FOR LOCAL STATE
91. EXTRACT FOR PERFORMANCE
92. START WITH PRIVATE COMPONENTS
93. "ALWAYS WRITE TO OPTIMIZE PERF"
94. WHEN DO YOU HAVE A PERF PROBLEM? flesh this out to talk about different types of performance and how you can optimize against yourself
95. A PURECOMPONENT STORY
96. class App extends React.Component { render() { <button type="button" onClick={() => console.log(this)} >Click me</button> } }
97. class App extends React.Component { render() { <button type="button" onClick={() => console.log(this)} >Click me</button> } }
98. class App extends React.Component { constructor() { super() this.doSomething = () => this.doSomething.bind(this) } doSomething() { console.log(this) } render() { return <button type="button" onClick={this.doSomething} >Click me</button> } }
99. class App extends React.Component { constructor() { super() this.doSomething = () => this.doSomething.bind(this) } doSomething() { console.log(this) } render() { return <button type="button" onClick={this.doSomething} >Click me</button> } }
100. class App extends React.Component { doSomething = () => console.log(this) render() { return <button type="button" onClick={this.doSomething} >Click me</button> } }
101. class App extends React.Component { doSomething = () => console.log(this) render() { return <button type="button" onClick={this.doSomething} >Click me</button> } }
102. AVOID NAMING
103. FIGHT INDIRECTION
104. OPTIMIZE LAZILY
105. "CONTEXT AND SETSTATE ARE BROKEN"
106. YOU HAVE TO LEARN REACT
107. USE SETSTATE
108. 4 THINGS YOU NEED TO KNOW
109. 1. IT'S ASYNC
110. render() { <input type="text" onChange={e => this.setState({ name: e.target.value })} /> }
111. render() { <input type="text" onChange={e => this.setState( { name: e.target.value }, () => console.log("The new state", this.state) )} /> }
112. componentDidUpdate() { console.log("The new state", this.state) } render() { <input type="text" onChange={e => this.setState({ name: e.target.value })} /> }
113. 2. IT TWO FORMS
114. OBJECT & FUNCTION
115. onChange={e => this.setState({ name: e.target.value })} Object Form
116. onClick={() => this.setState(previousState => ({ counter: previousState.counter + 1 }))} Function Form
117. 3. IT QUEUES UPDATES
118. this.setState(previousState => ({ counter: previousState.counter + 1 }))
119. previousState => ({ counter: previousState.counter + 1 })
120. previousState => ({ counter: previousState.counter + 1 }) // => { counter: 1 } previousState => ({ counter: previousState.counter + 1 }) // => { counter: 2 } previousState => ({ counter: previousState.counter + 1 }) // => { counter: 3 } previousState => ({ counter: previousState.counter + 1 }) // => { counter: 4 } previousState => ({ counter: previousState.counter + 1 }) // => { counter: 5 } previousState => ({ counter: previousState.counter + 1 }) // => { counter: 6 } previousState => ({ counter: previousState.counter + 1 }) // => { counter: 7 }
121. 4. IT MERGES SHALLOWLY
122. Working with Objects onChange={e => this.setState(prevState => ({ myObject: { ...prevState.myObject, firstName: e.target.value, } }))}
123. RAMDA AND LODASH
124. ONE PLACE I LIKE FLUX
125. NORMALIZING MULTI-SOURCE ACTIONS
126. SERVER-SIDE RENDERING
127. USE CONTEXT
128. CONTEXT IS A CLASS SYSTEM
129. REACT ROUTER
130. REDUX
131. STYLED-COMPONENTS
132. DON'T BE AFRAID
133. USE CONTEXT RESPONSIBLY
134. WHAT YOU NEED TO KNOW
135. 1. THE CONTEXT API WILL EVENTUALLY CHANGE
136. 2. IT HASN'T IN ALMOST 3 YEARS
137. 3. INSULATE CONSUMERS WITH AN HOC
138. WTF IS AN HOC??!
139. KNOW YOUR COMPONENT PATTERNS dive into the mental model for a component being a function
140. 5 COMPONENTS
141. CONTAINER COMPONENTS
142. CONTAINER COMPONENT
143. lifecycle events state props render context lifecycle events state props render context
144. lifecycle events state props render context lifecycle events state props render context
145. SMART lifecycle events state props render context DUMB lifecycle events state props render context
146. CONTAINER lifecycle events state props render context PRESENTATION lifecycle events state props render context
147. CONTROLLER lifecycle events state props render context VIEW lifecycle events state props render context
148. DATA lifecycle events state props render context DISPLAY lifecycle events state props render context
149. CIRCLE lifecycle events state props render context SMALL CIRCLE props render context
150. STATEFUL STATELESS
151. W/ LIFECYCLES W/O LIFECYCLE
152. CONTAINER COMPONENT
153. HOLD UP
154. 1 CIRCLE
155. 2 CIRCLES
156. 2 DIFFERENT CIRCLES
157. 1, 2 DIFFERENT CIRCLE TOGETHER
158. ? WHY
160. SMALL CIRCLE IN GREEN CIRCLE
161. SMALL CIRCLE IN RED CIRCLE
162. SMALL CIRCLE IN BLUE CIRCLE
163. WE CAN REUSE SMALL CIRCLE
164. CONTAINER COMPONENT
165. ONLY HALF A SOLUTION
166. I WANT TO REUSE BOTH CIRCLES
167. HIGHER-ORDER COMPONENT
168. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: "smarts" } } render() { return <AnyCircle {...this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } var SmallCircleInCircle = DottedCircle(SmallCircle)
169. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: "smarts" } } render() { return <AnyCircle {...this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } var SmallCircleInCircle = DottedCircle(SmallCircle)
170. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: "smarts" } } render() { return <AnyCircle {...this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } var SmallCircleInCircle = DottedCircle(SmallCircle)
171. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: "smarts" } } render() { return <AnyCircle {...this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } var SmallCircleInCircle = DottedCircle(SmallCircle)
172. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: "smarts" } } render() { return <AnyCircle {...this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } var SmallCircleInCircle = DottedCircle(SmallCircle)
173. CONTAINER COMPONENT
174. MIX AND MATCH
175. COMPONENT W/ RENDER CALLBACKS
176. class Circle extends React.Component { constructor() { super() this.state = {smarts: "smarts"} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
177. class Circle extends React.Component { constructor() { super() this.state = {smarts: "smarts"} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
178. class Circle extends React.Component { constructor() { super() this.state = {smarts: "smarts"} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} /> this.state
179. class Circle extends React.Component { constructor() { super() this.state = {smarts: "smarts"} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
180. class Circle extends React.Component { constructor() { super() this.state = {smarts: "smarts"} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
181. CONTAINER COMPONENT
182. NOW YOU'RE A MASTER
185. THE OTHER HALF IS AN EMOTIONAL BATTLE
186. ANOTHER STORY OF PERSONAL FAILURE
187. FUCK IT !== CAN'T
188. FUCK IT !== WON'T
189. PROBLEM !== BIG ENOUGH
190. TENSION === GOOD john mayer and tension interview when writing continuum, which is regarded as his best album
191. –Edsger Dijkstra (On the nature of Computer Science) “Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better”
192. –Confucious Life is really simple, but we insist on making it complicated.
193. BE LAZY
194. EXTRACT LAZILY
195. OPTIMIZE LAZILY
196. ENJOY THE ADAPTABILITY
197. KNOW WHAT'S DRIVING
198. LEARN REACT
199. HAVE FUN
200. @CHANTASTIC
201. LEARNREACT.COM