From render() to DOM
1 like224 views
The document provides details about Boris Dinkevich's background and experience with frontend development. It discusses his experience with AngularJS, ReactJS, and JavaScript over the past 4 years. It also outlines some of the projects, consulting work, and courses he has done related to React and frontend development.
![NEW CHAPTER
[DELETE THIS]: Chapter name should be ALL CAPS
Please think twice before adding a chapter slide,
most chances you won’t need it.](https://image.slidesharecdn.com/rendertodom-170404164153/85/From-render-to-DOM-7-320.jpg)
![Todos.setState({ todos: [’XXXXX’, ‘Two’] });
Todos
• One
• Two
Todos
• XXXXX
• Two](https://image.slidesharecdn.com/rendertodom-170404164153/85/From-render-to-DOM-41-320.jpg)
![todos = document.getElementById('app').children[0].children[1];
todos.removeChild(todos.childNodes[0]);
Todos.setState({ todos: [‘XXXXX’, ‘Dos’] });
Todos
• Dos
Todos
• One
• Two
Todos
• Two](https://image.slidesharecdn.com/rendertodom-170404164153/85/From-render-to-DOM-42-320.jpg)
![Todos.setState({
todos: ['Uno', 'Dos']
});](https://image.slidesharecdn.com/rendertodom-170404164153/85/From-render-to-DOM-69-320.jpg)
![Flow
1. setState({ todos: [‘Uno’, ‘Dos’] });
2. Todos updated and rendering starts
3. Todo1 needs update
4. DOM updated
5. Todo2 needs update
6. DOM updated](https://image.slidesharecdn.com/rendertodom-170404164153/85/From-render-to-DOM-85-320.jpg)
![Todos.setState({
todos: ['Uno', 'Dos']
});](https://image.slidesharecdn.com/rendertodom-170404164153/85/From-render-to-DOM-87-320.jpg)
From render() to DOM
- 1. Boris Dinkevich boris@500tech.com REACTJS And how it works
- 2. How it all started…
- 3. Boris Dinkevich - 4 years Dev Ops - 4 years Embedded C - 4 years Ruby on Rails - 4 years JavaScript (Angular/React) Developing stuff
- 4. Boris Dinkevich - AngularJS Israel (4K ppl) - ReactJS Israel (2K ppl) - Angular UP - React Next - React Courses These days
- 5. - Frontend Projects - Consulting - Courses / Training - Fun!
- 6. A WORD ON TREES
- 7. NEW CHAPTER [DELETE THIS]: Chapter name should be ALL CAPS Please think twice before adding a chapter slide, most chances you won’t need it.
- 8. Our code today const Todos = () => ( <ul> <li>Todo</li> </ul> );
- 9. De-JSX const Todos = () => ( <ul> <li>Stuff</li> </ul> ); const Todos = () => ( React.createElement("ul", null, React.createElement("li", null, "Stuff" ), ); );
- 14. AMOUNT OF MAGIC SO FAR? 0%
- 15. WHY REACT?
- 16. DOM is slow Lets minimise writes…
- 18. Tree & DOM Todos Header “div” “Welcome” “h1” “div” Todo “Two” “li” “ul” Todo “One” “li” Old New App Todos Header “div” “Welcome” “h1” “div” Todo “Two” “li” “ul” Todo “Million” “li” App
- 19. Tree & DOM Todos Header “div” “Welcome” “h1” “div” Todo “Two” “li” “ul” Todo “One” “li” “div” “Welcome” “h1” “div” “Two” “li” “ul” “One” “li” Our tree Our DOM App
- 20. Tree & DOM Todos Header “div” “Welcome” “h1” “div” Todo “Two” “li” “ul” Todo “Million” “li” “div” “Welcome” “h1” “div” “Two” “li” “ul” “One” “li” Our tree Our DOM App
- 21. Tree & DOM Todos Header “div” “Welcome” “h1” “div” Todo “Two” “li” “ul” Todo “Million” “li” “div” “Welcome” “h1” “div” “Two” “li” “ul” “Million” “li” Our tree Our DOM App
- 22. The code? const updateNode = (treeNode, dom) => { if (treeNode.type !== dom.type) { // Delete the dom element // Create a new dom element } else { const styles = dom.getStyle(); const attrs = dom.getAttrs(); const listeners = dom.getListeners(); readAndUpdateStyles(treeNode, dom); readAndUpdateAttrs(treeNode, dom); readAndUpdateEventListeners(treeNode, dom); } };
- 24. 1. Call render() to build tree new tree 2. Compare each element to the real DOM 3. Update class/attrs/events when needed 4. Win! Base code
- 25. React docs: “reads are slow” Lets open PR
- 26. Simple diff const testAndUpdateInnerText = (node, value) => { if (node.innerText !== value) { node.innerText = value; } }
- 27. 60fps Time per frame: 16.6ms Time for 1000 read / write cycles: 36.15ms
- 28. Read
- 29. Write
- 30. Read & Write
- 31. Hmmm…. const updateNode = (elem, value) => { const prev = elem.innerText; if (prev !== value) { dom.innerText = value; }; }; // Mark DOM Dirty // Is DOM Dirty? Update and get value
- 32. Hmmm…. // Is DOM Dirty? Update and get value1.If DOM not ready - rebuild 2.Get updated value 3.Update value 4.Make DOM dirty 1000x
- 33. Hmmm…. // Is DOM Dirty? Update and get value1.If DOM not ready - rebuild 2.Get updated values into array - 1000x 3.Update values from array - 1000x 4.Make DOM dirty 1x
- 35. Updated 1.Call render() to build tree 2.Read DOM into “temp tree” 3.Compare each element to temp tree 4.Change when needed 5.Win! “temp tree”… sounds familiar
- 36. But wait 1.Call render() to build tree 2.Read DOM into “temp tree” 3.Compare each element in DOM to temp tree 4.Change DOM when needed 5.Win! Isn’t “temp tree” equal to DOM?
- 37. Pre cache 1. Call render() to build “next tree” 2. Compare each element to “prev tree” 3. Change DOM when needed 4.Save “next tree” as “prev tree” 5. Win! What is “prev tree” the first time?
- 39. Super duper algo Initial Render 1.Call render() to build tree 2.Save as “prev tree” 3.Create initial DOM Updates 1.Call render() to build “next tree” 2.Compare each element to “prev tree” 4.Change DOM when needed 5.Save “next tree” as “prev tree” 6.Win!
- 40. NO READS?
- 41. Todos.setState({ todos: [’XXXXX’, ‘Two’] }); Todos • One • Two Todos • XXXXX • Two
- 42. todos = document.getElementById('app').children[0].children[1]; todos.removeChild(todos.childNodes[0]); Todos.setState({ todos: [‘XXXXX’, ‘Dos’] }); Todos • Dos Todos • One • Two Todos • Two
- 44. <input />
- 45. In React • Initial Render • Updates
- 46. FIRST RUN
- 58. DOM IS READY! Or is it?
- 59. DOM and React
- 62. Different renderers DOM - onClick Native - onPress
- 63. What does this mean? <Header onClick={} /> <Header onPress={} />
- 65. What is “React”? addons 1,334 isomorphic 3,428 shared 7,058 renderers/ art 641 dom 12,337 native 2,735 noop 192 shared 9,368 * lines of code in 15-stable
- 66. TREE UPDATE
- 67. What will cause React to render again? • setState() • forceUpdate()
- 68. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “One” “li” “div” “Two” “li” “ul” “One” “li” DOMReact Tree prev Virtual DOM
- 70. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “One” “li” “div” “Two” “li” “ul” “One” “li” DOMReact Tree prev Virtual DOM
- 71. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “One” “li” “div” “Two” “li” “ul” “One” “li” DOMReact Tree prev Virtual DOM
- 72. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “One” “li” “div” “Two” “li” “ul” “One” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 73. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “One” “li” “div” “Two” “li” “ul” “One” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 74. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “One” “li” “div” “Two” “li” “ul” “One” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 75. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “One” “li” “div” “Two” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 76. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “Uno” “li” “div” “Two” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 77. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “Uno” “li” “div” “Two” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 78. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “Uno” “li” “div” “Two” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 79. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “Uno” “li” “div” “Two” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 80. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Two” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 81. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 82. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 83. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 84. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 85. Flow 1. setState({ todos: [‘Uno’, ‘Dos’] }); 2. Todos updated and rendering starts 3. Todo1 needs update 4. DOM updated 5. Todo2 needs update 6. DOM updated
- 86. AGAIN?
- 88. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM
- 89. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM
- 90. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 91. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 92. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 93. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 95. Why? class Todo extends React.Component { shouldComponentUpdate(nextProps) { return nextProps.title !== this.props.title; } render() { return ( <li>{ this.props.title }</li> ) } }
- 96. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM
- 97. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM
- 98. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 99. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 100. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 101. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 102. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() “div” “Dos” “li” “ul” “Uno” “li” “div” “Dos” “li” “ul” “Uno” “li” DOMReact Tree prev Virtual DOM ‘UNO’ ‘DOS’
- 103. LIFE CYCLE
- 104. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() React Tree componentWillMount componentDidMount componentWillUpdate componentDidUpdate componentWillUnmount …
- 105. FINAL WORDS
- 106. REACT IS COMPLICATED SO YOUR CODE DOES’T HAVE TO BE
- 108. And read our blog: http://blog.500tech.com Don’t <React />, Plan!