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

Michael Chan

July 21, 2017
Tweet

More Decks by Michael Chan

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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.
  5. ok. Lets see what the story with dropdown is. We're

    defining it and then using it. So this one is safe.
  6. 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.
  7. –Martin Fowler (Refactoring) “code can be copied once, but when

    the same code is used three times, it should be extracted”
  8. EXTRACT LAZILY this'll be a good place to talk about

    strategies for when, where, and why to extract
  9. WHEN DO YOU HAVE A PERF PROBLEM? flesh this out

    to talk about different types of performance and how you can optimize against yourself
  10. 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> } }
  11. 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> } }
  12. class App extends React.Component { doSomething = () => console.log(this)

    render() { return <button type="button" onClick={this.doSomething} >Click me</button> } }
  13. class App extends React.Component { doSomething = () => console.log(this)

    render() { return <button type="button" onClick={this.doSomething} >Click me</button> } }
  14. render() { <input type="text" onChange={e => this.setState( { name: e.target.value

    }, () => console.log("The new state", this.state) )} /> }
  15. componentDidUpdate() { console.log("The new state", this.state) } render() { <input

    type="text" onChange={e => this.setState({ name: e.target.value })} /> }
  16. 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 }
  17. Working with Objects onChange={e => this.setState(prevState => ({ myObject: {

    ...prevState.myObject, firstName: e.target.value, } }))}
  18. 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)
  19. 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)
  20. 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)
  21. 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)
  22. 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)
  23. 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} /> )} />
  24. 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} /> )} />
  25. 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
  26. 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} /> )} />
  27. 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} /> )} />
  28. TENSION === GOOD john mayer and tension interview when writing

    continuum, which is regarded as his best album
  29. –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”