The document explains the workflow of rendering a web page and the role of the virtual DOM (vDOM) in React. It details how changes in the virtual tree are handled efficiently by comparing old and new trees to minimize the costly reflow and repaint processes. The vDOM facilitates performance improvements for complex applications by allowing only necessary changes to be made in the real DOM.

1. The Virtual DOM
And how React uses it internally

2. A first look
Let’s see how is the browser workflow, to render a
web page, before we go into deeper details
Mozilla's Gecko rendering engine main flow
Webkit rendering engine main flow
http://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_general
Collected from the MDN documentation

3. The basic data flow
1. The rendering engine will start parsing the HTML document and turn the tags to DOM nodes in a
tree called the "content tree”
2. The styling information together with visual instructions in the HTML will be used to create
another tree - the render tree.
3. After the construction of the render tree it goes through a "layout" process. This means giving
each node the exact coordinates where it should appear on the screen.
4. the render tree will be traversed and each node will be painted using the UI backend layer.
http://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_generalData collected from:

4. Since DOM is represented as a tree structure,
the first render into the DOM is pretty quick!

5. So, why do we need to use
VDOM?

6. Mozilla's Gecko rendering engine main flow
Webkit rendering engine main flow
Can you see something in common on the
main browsers workflow after the tree is
processed and attached into the DOM?

7. Mozilla's Gecko rendering engine main flow
Webkit rendering engine main flow
Can you see some thing in common on the
main browsers workflow, after the tree is
processed e anexada no DOM?

8. Since DOM is represented as a tree structure, the first
render into the DOM are pretty quick but the changed
element, and its children have to go through Reflow/
Layout stage and then the changes have to be Re-
painted which takes a long time. Therefore the more
items you have to reflow/repaint, the slower your app
becomes.

9. it's all about rendering
https://www.youtube.com/watch?v=9-ezi9pzdj0

10. VDOM
"it’s a virtual tree which is kept in the browser memory
and updated in runtime and therefore minimize those
two stages (reflow/repaint) and thereby having a better
performance for a big and complex app”
—Nevinha

11. How does it work?
When we change something in our Virtual DOM Tree, we get a new
Virtual Tree. The algorithm compares these two trees (old and new),
finds differences and makes only the necessary changes on the DOM,
so at the end it will reflect the virtual DOM.

12. How is it divided?
1. Node mount representation — React uses JSX and CreateElement
function in order to put it on the virtual tree later. (here) and (here)
2. Mount of the initial virtual tree — It’s possible on web because of
react-dom. (here)
3. Append the VDOM into the DOM — It can be done on the same
function that mounts the virtual tree.
4. For each changes on the virtual tree, the VDOM will compare the
old tree with the new one, in order to see what have been changed
and just re-render the necessary nodes, if and only if it’s necessary.

13. Node Representation
Basically an element is represented on the VDOM as an object that
contains the following attributes:
• type — The type of the element, which can be a tag name, a function
component (state less) or a class component (state full)
• props or attributes — The attributes of the tag or the custom props
• children — The children that are inside the tag or your component

14. {
type: "ul",
props: {className: "list"},
children: [
{
type: "li",
props: {},
children: ["item 1"]
},
//{...}
]
}

15. Stay tuned, it’s react based
https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js#L312
The next slides will be based on the source code of React.js v16.11.0
which can be founded on the link bellow:

16. BUT DON’T WORRY ABOUT THE VERSION, IT DOESN'T CHANGE TO
OFFEN 😂

17. See the node representation that
we’ve just talked few minutes ago?

18. Mount of the props, if they are custom props, if they
aren’t later react adds then on the element before
append the element into the tree

19. Also the default props that we define on a
component, they are handled on this function.

20. Them it returns the a ReactElement ready to use it inside an
existent component or append into the VDOM at the end of the
createElement function

21. So far…
Right?

22. Mount of the initial virtual tree
As you already know the basic idea to represent and mount a virtual
node, let’s suppose that we have defined a function called
createElement
Obs: This code doesn’t transpile, because it is pseudo code

23. As you already have the virtual element creation done, mount
the tree is really easy… you just need to create a function
that get the node representation as argument node and use
recursion to get its virtual children
PS: ignore that we could receive a function or class component on node.type, we will do it later.

24. Append the VDOM into the DOM
This is the easiest part of the VDOM algorithm, it just uses a function
that takes a component and a container as argument and append the
virtual component, which contains the VTree and append it into the
container.

25. Obs: This code doesn’t transpile, because it is pseudo code.

26. Compare changes - DIFF
This is the most important part of the virtual DOM algorithm, it is where
you application get its performance improvement. So basically we
need to write an algorithm, that will compare two virtual trees — old
and new — and make only necessary changes into real DOM.

27. How react does it?
Actually who is responsible for the DIFF is the react-dom package, on
this link, basically it does diff for the props of a current VTree node,
children and texts.
Let’s see the logic behind the DIFF algorithm that react-dom uses
internally

28. We will handle the following cases
• There isn’t old node at some place — so node was added and we
need to appendChild(…) that
• There is no new node at some place — thus node was deleted and
we need to removeChild(…)
• Nodes are the same — so we need to go deeper and diff child nodes
We also have the diff of the state and props of a vnode but it won’t be
covered on this presentation.

29. First things first
We’ll separate a function that does all the magic for us, which we will
call updateElement.
This function will be recursive on the future ;)

30. There isn’t old node at some place
What is a pretty straightforward operation

31. There is no new node at some place

32. Nodes are the same, so we need to go deeper
At this part, we’ll need to adopt the recursion
strategy in order to go deeper into the Tree

33. First, we’ll create a function that takes two
nodes and see if they are equals

34. Then we call the changed function inside the update
element function, if the direct children has been
changed, we need to replace the old for the new one

35. If anything changes between the new and the old
node, it means that we need to go deeper if the new
node is a tag or a component.

36. The magic is DONE!

39. You can go beyond

40. Questions?