4.
2 - Why frontend frameworks
Reconcilers and Intro to React
Jargon - DOM Manipulation
What happens when you scroll down
Jargon - DOM Manipulation
Jargon - DOM Manipulation
getNextPosts
New Items get pushed
to the DOM
Jargon - DOM Manipulation
getNextPosts
New Items get pushed
to the DOM
This is called DOM manipulation
DOM manipulation is very hard to write as a developer
Making dynamic websites, with the primitives that DOM provides you is very hard
Let’s try to create a TODO application using DOM manipulation
document.createElement
document.appendChild
element.setAttribute
element.children
https://gist.github.com/hkirat/e61655a7d93ce06810488be402adebee
Let’s try to create a TODO application using DOM manipulation
JS
HTML
Let’s try to create a TODO application using DOM manipulation
Problem with this approach - Very hard to add and remove elements
No central State
What if there is a server where these todos are put
What if you update a TODO from your mobile app
You will get back the new array of TODOs on the frontend
How will you update the DOM then?
You only have a addTodo function
You don’t have an updateTodo or removeTodo function yet
Let’s try to create a TODO application using DOM manipulation
What do I mean when I say State
State
Let’s try to create a TODO application using DOM manipulation
What do I mean when I say State
If you can write a function, that takes this state as an input
and creates the output on the right, that is much more
powerful that our original approach
Let’s try to create a TODO application using DOM manipulation
What do I mean when I say State
Fn
Let’s try to create a TODO application using DOM manipulation
What do I mean when I say State
Let’s try to create a TODO application using DOM manipulation
Dumb Solution
Fn
1. Clear the parent element
2. Call addTodo on every element
https://gist.github.com/hkirat/cb9d7e2f75617ac281427276e20a691c
Let’s try to create a TODO application using DOM manipulation
Better Solution
Don’t clear the DOM upfront, update it based on what has changed.
Question is, how does it calculate what all has changed?
Has a todo been marked as complete?
Has a todo been removed from the backend?
Let’s try to create a TODO application using DOM manipulation
Better Solution
Don’t clear the DOM upfront, update it based on what has changed.
Question is, how does it calculate what all has changed?
Has a todo been marked as complete?
Has a todo been removed from the backend?
By remembering the old todos in a variable (Virtual DOM)
Let’s try to create a TODO application using DOM manipulation
Better Solution (Take home assignment)
https://gist.github.com/hkirat/ed34df967f162d152e35537cb8215144
What is the easiest way to create a dynamic frontend website?
1. Update a state variable
2. Delegate the task of guring out di to a hefty function
3. Tell the hefty function how to add, update and remove elements
fi
ff
What is the easiest way to create a dynamic frontend website?
1. Update a state variable
2. Delegate the task of guring out di to a hefty function
3. Tell the hefty function how to add, update and remove elements
fi
ff
What is the easiest way to create a dynamic frontend website?
1. Update a state variable
2. Delegate the task of guring out di to a hefty function
3. Tell the hefty function how to add, update and remove elements
fi
ff
What is the easiest way to create a dynamic frontend website?
1. Update a state variable
2. Delegate the task of guring out di to a hefty function
3. Tell the hefty function how to add, update and remove elements
fi
ff
Usually done by the FE developer
What is the easiest way to create a dynamic frontend website?
1. Update a state variable
2. Delegate the task of guring out di to a hefty function
3. Tell the hefty function how to add, update and remove elements
fi
ff
Usually done by the React
What is the easiest way to create a dynamic frontend website?
1. Update a state variable
2. Delegate the task of guring out di to a hefty function
3. Tell the hefty function how to add, update and remove elements
fi
ff
Let’s see how you would do the same thing in React
npm create vite@latest
