Let's actually ask ourselves one very important question.
Why do front-end frameworks like React, actually exist in the first place?
Why not simply use Vanilla JavaScript to build our apps?
Back in the day, before around 2010, all websites were always rendered on the server. So in server-side rendering, a website is basically assembled on the backend. The resulting HTML, CSS, and JavaScript code is then sent to the client side, so to the web browser that requested the page. The browser then takes this code and basically paints it onto the screen. And a typical example of server-side rendered websites .eg WordPress. Now, the JavaScript that used to be included in these websites was initially only to add some simple dynamics to the page, like simple animations, hover effects, and other stuff like that. And usually, a very popular library at the time called jQuery was used for this because it made JavaScript work the exact same way across all browsers back then. However, over time, developers started writing more and more JavaScript code to be executed by the browser until, at some point, these became fully-fledged web applications, which then led to the rise of so-called single-page applications.
So these are basically webpages that are rendered on the client, not on the server. So in client-side rendering, basically, the work of rendering a webpage is shifted from the server to the client. And so now we don't call these webpages anymore but web applications. Now a web application still needs data, which usually comes from the backend in the form of an API. So the application consumes this API data and renders a screen for each view of the application. And these single-page applications essentially feel as if you were using a native desktop or phone application. So you can click on links or submit forms without the page ever reloading. So you're technically always on the same page, and therefore the name single a page app.
Single page application with vanilla javascript?
A most important task of a single-page app and really of any application and website is to keep the user interface in sync with the data, or in other words, to make sure that the UI always displays the current state of the data. As it turns out, displaying the correct data and ensuring that it stays correct over time is a really hard problem to solve. And to understand why that is, let's take a look at this Airbnb application.
So in this interface, we can identify a few pieces of data. First, we have this list of apartment, and then we have a search bar. We have some data about the filters that are being applied. And we also have this piece of data here, which indicates whether the search should be updated as the user removes the map. And all this is data that depends on, right? And actually, in the real-world Airbnb application, there is just so much data. So this list here is not even all of it. But anyway, as we know, all of this data needs to be always kept in sync with the user interface and also with the other pieces of data because they're all kind of interconnected. For example, when we change the data about location or dates, then the UI needs to show those new dates and also, the list of apartments needs to be updated. Or another example is the map needs to show the location of the apartments. And so, therefore, when the apartments change, the map must also change. And the same thing should happen the other way around. So when the map is moved, the list of apartments should change as well, but only when the user has previously clicked on the green checkbox. So these pieces of data here are even more interconnected, and it can become a real mess. Now, just as a side note, in a real-world app, we call each of these pieces of data a piece of state. So based on these examples I showed you, I would say that without a framework, it would be virtually impossible to keep this huge amount of data in sync with this super complex UI.
But still, you might be wondering why?
Why would it be so hard to build something like this with Vanilla JavaScript?
Well, it comes down to two big aspects.
The first is that building a complex front end with vanilla JavaScript alone requires large amounts of direct DOM traversing and manipulation. Like in this code right here, where we have manual element selection, class toggling, DOM traversing and even manipulation of text and CSS styles and this is guaranteed to become an absolute nightmare in a complex app like Airbnb, because our code would be extremely complex and really hard to understand, and we will probably just end up with a huge mess of entangled spaghetti code.
The second big problem is that in typical Vanilla JavaScript apps, state such as simple text or numbers are oftentimes simply stored right in the DOM so right in the HTML elements themselves rather than in a central place in the application. The result is that we end up with many parts of the app accessing and changing that DOM state directly, which makes the spaghetti code even harder to understand. And even worse, it'll most certainly introduce many bugs into our application. And no one wants bugs, right?
Now, of course, you could try to solve these problems on your own, but then you will end up creating your own framework, which will most likely be way worse than all the well-established frameworks that already exist. So at this point, you might as well use a battle-tested framework like React. Now, right, so now that we know why it's so hard to write a single-page app with just JavaScript.
So the fundamental reason these frameworks exist is that keeping a user interface in sync with data is really hard, and it's a lot of work too. So basically, frameworks like Angular, React, or View take this hard work of synchronizing data with the user interface away from us developers. So they solve this really hard problem so that we developers can focus only on the data and building our user interfaces.
Now, another extremely valuable thing that frameworks give us is that they enforce a correct way of structuring and writing code. So essentially, the authors of each of these frameworks came up with a good way of structuring applications so that other developers can follow these conventions to build better applications with hopefully a lot less spaghetti code. Finally, frameworks give developers, especially teams, a consistent way of building web applications. This way, everyone on the team will build their part of the app in the same style as everyone else, which will, in the end, create a more consistent code base and product.