The document provides details about Boris Dinkevich's background and experience with frontend development. It discusses his experience with AngularJS, ReactJS, and JavaScript over the past 4 years. It also outlines some of the projects, consulting work, and courses he has done related to React and frontend development.
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
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 first time?
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!
63. What does this mean?
<Header onClick={} />
<Header onPress={} />
64.
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