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

Transcript

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