Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript LA, July 20, Back to React prep

JavaScript LA, July 20, Back to React prep

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

Ad9e927bce4bd0519631296b5af7af83?s=128

Michael Chan

July 21, 2017
Tweet

Transcript

  1. BACK TO REACT

  2. None
  3. None
  4. YOU KNOW ENOUGH

  5. YOU DON'T DO ENOUGH

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. PRIORITIES

  16. YOU CAN ONLY DO ONE THING

  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. HOW TO THINK ABOUT DEVELOPING REACT APPS

  24. A TAIL OF TWO APPS

  25. APP ONE: JUST THE REACT, MA'AM

  26. None
  27. APP TWO: WITNESS ME, HACKER NEWS

  28. None
  29. HARMFUL THINKING

  30. "WHAT ARE YOU USING FOR {X}?"

  31. REACT++

  32. None
  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
  40. None
  41. None
  42. None
  43. None
  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

  61. None
  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.
  68. None
  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.
  70. None
  71. None
  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.

    ?
  81. None
  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

  159. None
  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

  183. None
  184. None
  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