There are quite a few reasons, but I want to talk about three main reasons why it's a good idea to use some type of framework. Those three reasons are going to be the tooling, structure, and then performance. I'm a very big fan of the idea that developers should use the right tool for the right job.

If you have some type of framework that can perform all kinds of different tasks that you're usually going to need to build out, then why wouldn't you take advantage of those?

For example, if you're going to use some type of React component, that kind of tooling comes with all kinds of different features you can use right out of the box. You can manage your state. You can work with properties, which means that you can pass data from one component to another.

If you try to do that with just Vanilla JavaScript, you would find that that program would very quickly become unwieldy to use, and very difficult to maintain. React has such a large ecosystem, and it's not just React.

The same thing really applies to Vue, Angular, and these other frameworks. Because these ecosystems have become so big, what they allow you to do is to set up a system for developing your applications.

If you just had your own idea for how you wanted to build apps, and you wanted to write it all just using Vanilla JavaScript.

Technically you could, but because there are so many commonalities among applications, such as working with form elements, working with lists, being able to call API and render that on the screen. All of those things can be systematized by working with a framework.

The second rationale I want to talk about is that these frameworks give you a common structure. I want you to imagine a scenario where you are working on some project, and it's going well, but you wrote it all in Vanilla JavaScript.

Say that you're a brilliant JavaScript developer, and it works perfectly, but now you want to start growing the team. Well, what happens when you bring on a new developer? They are not going to know how you built your application.

The first time that they look at your code file, their mind is going to explode because they have no clue where all of the code is supposed to go. Even if you wrote it well, there still would be a very steep learning curve for them.

Now compare that with if you wrote in, say the Vue framework, you'd be able to specifically go out and find a Vue developer. Have them come on board, and right away they would know where the components are located.

They would know what one component would do. They would know what the libraries are supposed to do.

They would have an idea for the overall structure right away, which means the learning curve for them coming on board would be much lower. They would be faster in being able to start building out those features.

The third rationale I want to discuss is performance. Technically, if you're a senior JavaScript developer with a decade of experience, you know the language inside and out. You could build an application that would theoretically be better performing than a React or a Vue application.

Now that is technically, however, my guess is that you probably don't have that level of experience. I don't have that level of experience in JavaScript, and so what these frameworks allow you to do is to cheat a little bit.

You don't have to understand all of the underpinnings of how JavaScript and tools like node work because they do a lot of that work for you. A great example is how React's Diff engine works.

If you have a React application, and it has 15 components on a page, and the data changes in just one of the components. Instead of re-rendering the entire page, all that React does is it looks at that one component, and it simply updates that single one.

That leads to a much faster experience. The performance with these applications, if they're written well, is typically much better than if you tried to write it all yourself using Vanilla JavaScript.

There's another reason as well. Usually, when you're working with one of these frameworks they're using a tool which is called the Virtual DOM. React and Vue do this where they don't actually tell you, or they don't really give you the ability to write DOM elements directly on the screen.

They create what is called a Virtual DOM. It kind of mimics the DOM on the page, the document object model, and so what this allows you to do is all of those different elements that you see on the page.

If you're writing those in Vanilla JavaScript those would be real, hard-coded elements that are being placed on the website or in the application. What happens with React and Vue in these frameworks is those elements simply look like they are those elements on the page.

What they really are behind the scenes is they are JavaScript objects. Those can be created, they can be pulled off, and they can be modified much faster than if you are manually doing that.

If you're writing your code in Vanilla JavaScript, typically, what you're doing is you're performing tasks such as creating a new DOM node, or searching for one and then updating it. If you have a large number of those, so if you have thousands of those, that process can be very memory and browser intensive.

What you can do with a virtual DOM is take a little bit of a shortcut, and the code itself in the framework, allows you to bypass a lot of that manual work that the system usually to has to do. It simply goes and it updates objects and updates the components on the page. Usually, that leads to a much better performing application.