React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016

1. render() to DOM Boris Dinkevich MILAN 25-26 NOVEMBER 2016

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

3. COMPLICATED BAD ARCHITECTURE OPTIMISATIONS

4. Boris Dinkevich - React evangelist - Cat aficionado - Co-Author of “The Redux book” - Organiser AngularUP & ReactNext Co-Founder @ 500Tech

5. A WORD ON TREES

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

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

8. Chrome dev tools?

9. WHY REACT?

10. DOM is slow Lets minimise writes…

11. Our Sample App Todos Header TodoTodo App

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

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

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

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

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

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

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

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

20. Read & Write Read then Write

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

22. 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”?

23. 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!

24. NO READS?

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

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

28. I Lied Get <input /> values?

29. In React • Initial Render • Updates

30. FIRST RUN

31. React.createElement(App);  Starting

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

33. function Todos() function Header() “div” “Welcome” “h1” “div” function Todo() “Two” “li” “ul function Todo() “One” “li” function App() 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” 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” 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” “One” “li” Mounting markup

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

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

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

40. 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”

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

42. DOM IS READY! Or is it?

43. DOM and React

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

45. Connection React onClick DOM React DOM Our Code

46. Different renderers DOM - onClick Native - onPress

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

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

50. TREE UPDATE

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

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

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

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

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

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

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

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

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

70. AGAIN?

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

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

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

78. LIFE CYCLE

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

80. MULTIPLE UPDATES

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

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

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

94. transactions

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

96. Callback Before After Transaction

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

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

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

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

101. Finalize Transaction

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

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

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

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

114. WAIT A MINUTE…

115. SORT BY ORDER Set order as components are mounted

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

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

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

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

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

128. FINAL WORDS

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

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

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

React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016

Similar a React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016 (20)

Más de Codemotion

Más de Codemotion (20)

Último

Último (20)

React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016