Why do frontend frameworks exist?

While taking a course on React.js, I came across an interesting concept:

Why do frontend frameworks even exist?

The answer is quite interesting. In the early days of web, webpages were rendered entirely on server. You would have the data and the views/templates defined on the server. A webpage would be rendered by passing in the data to the view.

However, as web applications became more interactive, and as a result, implementing more JavaScript, this traditional approach started showing limitations, especially in terms of updating DOM.

Updating a section of webpage meant:

• Traversing the entire DOM to find the relevant element

• Manually updating it with javascript

• Then setting the target element equal to the updated state

All of which was way too manual. Oftentimes you would be manipulating the state ( data ) in memory itself which could be accessed and directly modified from different parts of the application, hence introducing a lot of bugs.

Then came in React!

As the javascript interaction increased on the client-end the pages had to be more dynamic and more responsive. JavaScript heavy apps gave birth to client-side rendering. Now:

• The servers would still contain the data ( provided usually via APIs ),

• The client side would contain the view

• The data is then passed to the views which are then rendered accordingly and React ensures that the UI ( views ) are 𝗶𝗻 𝘀𝘆𝗻𝗰 with the data, basically 𝗿𝗲𝗮𝗰𝘁𝗶𝗻𝗴 to the change in state

React uses a virtual DOM and a declarative approach making state management far more easy, efficient and predictable as compared to the traditional approach.

Another concept that ensures the predictability in the state is React's recommendation to create 𝗣𝘂𝗿𝗲 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀, which means that a component must produce the same output for the same input everytime it is used. Or it should only return its own JSX.

Also with 𝗡𝗲𝘅𝘁.𝗷𝘀 we have come a full circle to supporting server-side rendering again with server-components, but in a more optimised way and with the flexibility to choose between client side rendered components vs server-side rendered component using just a simple "use client" directive.

Frontend frameworks exist to bridge the gap between dynamic UIs and complex state management while keeping everything in sync and performant.