From render() to DOM

1.
Boris Dinkevich boris@500tech.com REACTJS Andhow it works

2.
How it allstarted…

3.
Boris Dinkevich - 4years Dev Ops - 4 years Embedded C - 4 years Ruby on Rails - 4 years JavaScript (Angular/React) Developing stuff

4.
Boris Dinkevich - AngularJSIsrael (4K ppl) - ReactJS Israel (2K ppl) - Angular UP - React Next - React Courses These days

5.
- Frontend Projects -Consulting - Courses / Training - Fun!

6.
A WORD ONTREES

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 constTodos = () => (  <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?

12.
Chrome dev tools?

13.
Chrome dev tools?

14.
AMOUNT OF MAGICSO FAR? 0%

15.
WHY REACT?

16.
DOM is slow Letsminimise 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” OldNew 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” Ourtree 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” Ourtree 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” Ourtree 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: “readsare 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 DOMDirty? Update and get value1.If DOM not ready - rebuild 2.Get updated value 3.Update value 4.Make DOM dirty 1000x

33.
Hmmm…. // Is DOMDirty? 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() tobuild 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. Callrender() 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 InitialRender 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 • InitialRender • 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! Oris 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 thismean? <Header onClick={} />  <Header onPress={} /> 

65.
What is “React”? addons1,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 causeReact 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'] }); 

70.

71.

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.

74.

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.

78.

79.

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.

83.

84.

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

89.

90.

91.

92.

93.

94.
shouldComponentUpdate

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

96.

97.

98.

99.

100.

101.

102.

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 SOYOUR CODE DOES’T HAVE TO BE

107.
http://redux-book.com The Complete ReduxBook

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

From render() to DOM

More Related Content

What's hot

Similar to From render() to DOM

More from Boris Dinkevich

Recently uploaded

From render() to DOM