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

Safia Abdalla: Don’t overreact: getting into React

1fa9cb8c7997c8c4d3d251fb5e41f749?s=47 Realm
March 01, 2017

Safia Abdalla: Don’t overreact: getting into React

Video: https://www.youtube.com/watch?v=gobXaxlGw7k&feature=youtu.be

Speaker: Safia a data scientist and software engineer with an interest in open source software and data science for social good. She is one of the maintainers of nteract, a desktop-based interactive computing experience and the organizer of PyData Chicago. In her free time, she enjoys running, working out, and drinking tea.

Abstract: React is a front-end JavaScript framework that’s grown popular over the past few years. Perhaps you’ve used React for a project before or perhaps you're familiar with other front-end frameworks? This talk will explore the technical implementation of React, go through the pros and cons of the framework, and leave the audience with a technically-backed understanding of the best situations to use React in their web applications.

Twitter Link: https://twitter.com/captainsafia

1fa9cb8c7997c8c4d3d251fb5e41f749?s=128

Realm

March 01, 2017
Tweet

Transcript

  1. None
  2. Good morning! I’m Safia (like Mafia)! I’m @captainsafia on the

    Internet.
  3. What’s up, doc? • Discover the motivations for creating React

    • Discuss the central underlying technical themes of the library • Examine the pros and cons of using the library • Analyze the situations that React is best suite for • Yay! Knowledge!
  4. Questions? After the talk, in the hallway, or via Twitter/email!

  5. Don’t Overreact It’s Just React

  6. Let’s get in the zone.

  7. 2011 What does the front-end ecosystem look like?

  8. Random Tangent #1

  9. Back to the year 2011.

  10. !(MVC Framework)

  11. Use JavaScript to create views.

  12. But how does it work? Let’s break it down.

  13. The Component <AwesomeButton value=”MWDCON” func={awesomeFunction}/>

  14. const AwesomePill = React.createClass({ render: function() { return ( <button

    onClick={this.props.func}> {this.props.value} </button> ); } });
  15. Props (to you)!

  16. const AwesomePill = React.createClass({ render: function() { this.props.value = ‘new-value’;

    return ( <button onClick={this.props.func}> {this.props.value} </button> ); } });
  17. State

  18. const AwesomePill = React.createClass({ constructor: function() { this.state = {

    value: ‘not-started’, }; } render: function() { return ( <button onClick={this.props.func}> {this.props.value} </button> ); } });
  19. Lifecycle Methods Mounting • constructor • componentWillMount • render •

    componentDidMount Updating • componentWillReceiveProps • shouldComponentUpdate • componentWillUpdate • render • componentDidUpdate Unmounting • componentWillUnmount
  20. Lifecycle Methods Mounting • constructor • render • componentDidMount Updating

    • componentWillReceiveProps • shouldComponentUpdate • componentWillUpdate • render • componentDidUpdate Unmounting • componentWillUnmount
  21. Lifecycle Methods Mounting • constructor • render • componentDidMount Updating

    • componentWillReceiveProps • shouldComponentUpdate • componentWillUpdate • componentDidUpdate Unmounting • componentWillUnmount
  22. Lifecycle Methods Mounting • constructor • render • componentDidMount Updating

    • componentWillReceiveProps • shouldComponentUpdate • componentWillUpdate • componentDidUpdate Unmounting • componentWillUnmount
  23. Components = Pure Props + Mutable State + Lifecycle Methods

  24. The virtual DOM. Who needs reality anyways?

  25. The DOM

  26. The DOM is yuuugee.

  27. Virtual DOM to the rescue.

  28. The Virtual DOM is an abstract representation of our DOM.

  29. Yay for performance!

  30. What happens when the data changes?

  31. To update or not to update. That is the question.

  32. Tear it all down! And render again!

  33. React’s Diffing Algorithm A heuristic solution.

  34. Reconciling Elements of Different Types const one = <h1>Hello, #MWDCON!</h1>;

    const two = <h2><Hello, #MWDCON!</h2>;
  35. Reconciling Elements of Different Types const one = <h1>Hello, #MWDCON!</h1>;

    const two = <h2><Hello, #MWDCON!</h2>; updated(newElement) { if (this.element.type === newElement.type) { replace attributes in element with those in newElement } else { parentNode.replaceChild(newElement, this.element); } }
  36. Reconciling Elements of Different Types const one = <h1>Hello, #MWDCON!</h1>;

    const two = <h2><Hello, #MWDCON!</h2>; updated(newElement) { if (this.element.type === newElement.type) { replace attributes in element with those in newElement } else { replace element with newElement } }
  37. Reconciling DOM Elements of The Same Type const one =

    <p className=”cool”>Cool!</p>; const two = <p className=”way-cool”>Way cool!</p>;
  38. Reconciling DOM Elements of The Same Type const one =

    <p className=”cool”>Cool!</p>; const two = <p className=”way-cool”>Way cool!</p>; updated(newElement) { if element.attributes.length != element.attributes.length update element attributes if element.attributes.values != element.attributes.values update element attributes else return element }
  39. Reconciling DOM Elements of The Same Type const one =

    <p style={ {color: ‘red’ } }>Cool!</p>; const two = <p style={ {color: ‘blue’ } }>Way cool!</p>; updated(newElement) { if (element[attri][key] !== newElement[attr][key]) { element[attr][key] = newElement[attr][key]; } }
  40. Reconciling Component Elements of the Same Type const one =

    <MyComp value=’cool’ action={theCoolness}/> const two = <MyComp value =’way-cool’ action={theWayCoolness}/> update(newElement) { if element.componentName === newElement.componentName) { for (prop in props) { if element[prop] !== newElement[prop] { element[prop] = newElement[prop] } } } }
  41. These heuristics are applied recursively on the nodes of the

    tree.
  42. Shortcuts to success.

  43. Let’s duke it out! The good, the bad, the ugly.

  44. Random Tangent #2

  45. “We should use React as our front-end library of choice

    because it is so freakin’ awesome!”
  46. “Yes, we can reuse common components throughout our application.”

  47. “Yes, but writing those components can be very verbose as

    opposed to writing pure HTML.”
  48. “Yes, but it’ll be easy to write tests for our

    UI because React leverages the virtual DOM.”
  49. “Yes, but it has quite a big learning curve for

    beginners.”
  50. “Yes, but debugging is easy because we can use things

    like the React Chrome DevTools extension.”
  51. There’s a time and place for everything. When should you

    use React?
  52. When should I use React? Building front ends with data

    that changes frequently.
  53. Recap! • Learned about the reasons why React was created

    • Learned some of the core underlying technical concepts in React • Learned about the pros and cons of using the React framework in our projects • Learned about situations where using React can bring the most benefit
  54. Thanks! @captainsafia OR safia.rocks