Render to DOM

1. from render() to DOM Boris Dinkevich boris@500tech.com

2. COMPLICATED BAD ARCHITECTURE OPTIMISATIONS

3. Boris Dinkevich - React evangelist - Cat aficionado - Co-Author of   “The complete Redux book” Co-Founder @ 500Tech

4. A WORD ON TREES

5. Our code today const Todos = () => (  <ul>  <li>Todo</li>  </ul>  ); 

6. De-JSX const Todos = () => (  <ul>  <li>Stuff</li>  </ul>  );  const Todos = () => (  React.createElement("ul", null,  React.createElement("li", null,  "Stuff"  ),  );  );

7. Chrome dev tools?

8. WHY REACT?

9. DOM is slow Lets minimise writes…

10. Our Sample App Todos Header TodoTodo App

11. 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

12. Introducing BorisJS! 1.Call render() to build tree - ”Future Tree” 2.Compare each element to DOM 3.Change when needed 4.Win!

13. React docs: “reads are slow” Lets open PR

14. Simple diff function updateNode(node, value) {  if (node.innerText !== value) {  node.innerText = value;  }  } 

15. 60fps Time per frame: 16.6ms Time for 1000 read / write cycles: 36.15ms

16. Read & Write Read then Write

17. Introducing BorisJS 2.0 1.Call render() to build tree 2.Read DOM into temp tree - “Current Tree" 3.Compare each element to temp tree 4.Change when needed 5.Win! “temp tree”… sounds familiar

18. Pre cache 1. Call render() to build “Future Tree” 2. Compare each element to “Current Tree“ 3. Change DOM when needed 4.Save “Future Tree” as “Current Tree” 5. Win! What about ﬁrst “Current Tree”?

19. Introducing BorisJS 3.0 Initial Render 1.Call render() to build tree 2.Save as “Current Tree” 3.Create initial DOM Updates 1.Call render() to build “Future Tree” 2.Compare each element to “Current Tree” 4.Change DOM when needed 5.Save “Future Tree” as “Current Tree” 6.Win!

20. NO READS?

21. Todos.setState({ todos: [’Uno’, ‘Two’] });  Todos • One • Two Todos • Uno • Two

22. todos = document.getElementById('app').children[0].children[1];  todos.removeChild(todos.childNodes[0]); Todos.setState({ todos: [‘Uno’, ‘Dos’] }); Todos • Dos Todos • One • Two Todos • Two

24. I Lied Get <input /> values?

25. In React • Initial Render • Updates

26. FIRST RUN

27. React.createElement(App);  Starting

28. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() Mounting markup

29. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() Mounting markup

30. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() “Welcome” “h1” “div” Mounting markup

31. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() “Welcome” “h1” “div” Mounting markup

32. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() “Welcome” “h1” “div” “One” “li” Mounting markup

33. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() “Welcome” “h1” “div” “One” “li” Mounting markup

34. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() “Welcome” “h1” “div” “Two” “li” “One” “li” Mounting markup

35. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() “Welcome” “h1” “div” “Two” “li” “ul” “One” “li” Mounting markup

36. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() “Welcome” “h1” “div” “Two” “li” “ul” “One” “li” Mounting markup “div”

37. “div” “Welcome” “h1” “div” “Two” “li” “ul” “One” “li” #app markup <body>  <div id="app"></div>  </body>  render(  React.createElement(App),  document.getElementById('app')  );

38. DOM IS READY! Or is it?

39. DOM and React

40. Event Handers <Component onClick={} /> 

41. Connection React onClick DOM React DOM Our Code

42. Different renderers DOM - onClick Native - onPress

43. What does this mean? <Header onClick={} />  <Header onPress={} /> 

45. 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

46. TREE UPDATE

47. What will cause React to render again? • setState() • forceUpdate()

48. 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

49. Todos.setState({ todos: ['Uno', 'Dos'] }); 

52. 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’

55. 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’

56. 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’

60. 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’

61. 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’

65. 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

66. AGAIN?

67. Todos.setState({ todos: ['Uno', 'Dos'] }); 

68. 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

69. 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

74. LIFE CYCLE

75. function Todos() “div” function Todo() { title } “li” “ul” function Todo() { title } “li” function App() React Tree componentWillMount componentDidMount componentWillUpdate componentDidUpdate componentWillUnmount …

76. MULTIPLE UPDATES

77. Multiple setState calls Todos.setState({ todos: [‘Uno’, ‘Dos’] }); App.setState({ title: ‘Bye’ }); Todos.setState({ todos: [‘Raz’, ‘Dva’] });

78. How many render() ? App() Todos() Todos() Todos() Todo() App()

81. How many render() ? App() Todos() Todos() Todos() Todo() App() 0 1 1

90. transactions

91. How do we group? Todos.setState({ todos: [‘Uno’, ‘Dos’] }); App.setState({ title: ‘Bye’ }); Todos.setState({ todos: [‘Raz’, ‘Dva’] });

92. Callback Before After Transaction

93. Callback Before After • Prepare • Calculate ﬁnal state • Update DOM • Run Callbacks Transaction • multiple setState() • Build list of changes

94. Todos dirtyComponents Todos.setState({ todos: [‘Uno’, ‘Dos’] }); { todos: [‘Uno’, ‘Dos’] }

95. App dirtyComponents Todos.setState({ todos: [‘Uno’, ‘Dos’] }); App.setState({ title: ‘Bye’ }); { todos: [‘Uno’, ‘Dos’] } Todos { title: ‘Bye’ }

96. dirtyComponents Todos.setState({ todos: [‘Uno’, ‘Dos’] }); App.setState({ title: ‘Bye’ }); Todos.setState({ todos: [‘Raz’, ‘Dva’] }); { todos: [‘Uno’, ‘Dos’] } { todos: [‘Raz’, ‘Dva’] } Todos { title: ‘Bye’ } App

97. Finalize Transaction

98. How many render() ? App() Todos() Todos() Todo() App() 0 0 0

100. How many render() ? App() Todos() Todos() Todo() App() 0 0 0 Update the state to it’s latest version

105. How many render() ? App() Todos() Todos() Todo() App() 0 1 1 Update the state

107. How many render() ? App() Todos() Todos() Todo() App() 1 1 1 New props from App?

110. WAIT A MINUTE…

111. SORT BY ORDER Set order as components are mounted

113. How many render() ? App() Todos()Todos() Todo() App() 0 0 0

115. How many render() ? App() Todos()Todos() Todo() App() 0 0 0 Update the state

117. How many render() ? App() Todos()Todos() Todo() App() 1 0 0 Update the state

122. Callback order in transaction Todos.setState({ todos: [‘Uno’, ‘Dos’] }); App.setState({ title: ‘Bye’ }); Todos.setState({ todos: [‘Raz’, ‘Dva’] }); 1. App setState 2. Todos setState 3. Todos setState Callbacks order

123. Transactions In React Preserving input selection Suppressing events during DOM work Collecting “componentDidUpdate” etc

124. FINAL WORDS

125. REACT IS COMPLICATED SO YOUR CODE DOES’T HAVE TO BE

126. http://redux-book.com The Complete Redux Book

127. And read our blog: http://blog.500tech.com Don’t <React />, Plan!

Render to DOM

Recommended

Recommended

More Related Content

Similar to Render to DOM

Similar to Render to DOM (20)

More from 500Tech

More from 500Tech (20)

Recently uploaded

Recently uploaded (20)

Render to DOM