What is the web?? Whenever, we try to access a website (say forbes.com) i.e. we enter the URL in our browser and press enter, a http request goes to the server to provide the requested data.

The server responds with the requested data in the form of 3 file types (.html, .css, .js) why? Because our browsers are only capable of understanding and rendering files on the screen, which contain code comprising these 3 categories. Any other files types sent by the server (if), cannot be rendered on the browser. Files sent by the server (super-compiled and bundled/minified) server the following purposes:

HTML - Created the Document Object Model (DOM) tree-like structure and renders the contents on the client screen. CSS - Styles the rendered content. JavaScript - Adds interactivity/functionality to the rendered content.

This also means that code returned by the server written in some high-level framework (react/next) is also bundled and rendered as vanilla JS.

Note : Code rendered on the web page runs on the browser’s local JS engine (e.g.., Google V8) but code run locally in Node.js environment doesn’t require help from that Js engine to run the code as it runs in the local runtime env.

JS runs on a single thread i.e. only 1 thread of our machine’s multi threaded CPU…so if the main thread is occupied and there are pending functions in the task queue waiting to execute, they will starve till the current CPU-intensive code has finished executing and the main thread is free.

CPU-intensive tasks block the main thread (execution context) which means other synchronous tasks scheduled to execute later have to wait. After both of these are completed, the I/O intensive tasks (asynchronous tasks) which run and execute externally and are present in the callback queue, enter the EC for execution.

Examples of both CPU and I/O intensive tasks:

CPU-intensive : a loop running for 1000000 iterations I/O intensive ; setTimeout/setInterval (webAPI’s), promises, async await functions

Note : async function doesn’t execute further till it gets the data from await function i.e. it doesn't block the main thread, which means the next synchronous functions can execute but it blocks the further execution of the current function.

Similarly, in case of promises (objects which represent eventual completion of a task), until the promise returns a resolve or reject, the control doesn’t go to the .then or .catch part (hence, the name asynchronous tasks).

We know the DOM is a tree style rep of the web document, where scripts can be used to manipulate the document’s content:

querySelector querySelectorAll getElementbyId removeChild appendChild

Example of complex DOM manipulation:

Expected functionality : On clicking the Add button, a new span and button should be created on a new div

• const sp = document.createElement(”span”)
• const button = document.createElement(”button”)
• sp.innerHTML = “Hello”
• button.innerHTML = “Delete”
• const div = document.createElement(”div”)
• div.appendChild(”sp”)
• div.appendChild(”button”)
• document.querySelector(”body”).appendChild(”div")

Since its not efficient to do DOM manipulations this way, in frontend frameworks like React/Next/Vue, we only need to worry about writing components & managing state. The actual updates to DOM are done by React itself.

Rendering is taking the data(state) and the wireframe(component) together and rendering it on the DOM. This is taken care by React )rendering on the dom). We only need to give it data+component.

Reconciliation is the process of finding the diff between the old state and the new state and updating the diff in the DOM.