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"  ),  );  );

10. Calling Todo() “Stuff” “li” “ul” props.children props.children

11. Chrome dev tools?

14. AMOUNT OF MAGIC SO FAR? 0%

15. WHY REACT?

16. DOM is slow Lets minimise writes…

17. Our Sample App Todos Header TodoTodo App

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); } };

23. Introducing BORIS JS

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

34. Introducing BORISJS 2.0

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 ﬁrst time?

38. Introducing BORISJS 3.0

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

47. React.createElement(App);  Starting

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

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

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

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

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

53. 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 DOM

54. 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 DOM

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

56. 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 DOM “div”

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

58. DOM IS READY! Or is it?

59. DOM and React

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

61. Connection React onClick DOM React DOM Our Code

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

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

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’

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’

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’

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?

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

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

94. shouldComponentUpdate

95. Why? class Todo extends React.Component {  shouldComponentUpdate(nextProps) {  return nextProps.title !== this.props.title;  }    render() {  return (  <li>{ this.props.title }</li>  )  }  }

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

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

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

From render() to DOM

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie From render() to DOM

Ähnlich wie From render() to DOM (20)

Mehr von Boris Dinkevich

Mehr von Boris Dinkevich (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

From render() to DOM