Essentially a framework is some JS code that makes it faster and easier to write interactive web apps with reusable components. If you have completed odin assignments such as the restaurant page, the library, or the todo-list you will know that you spend a lot of time manipulating the DOM with code like
element.innerHTML. Every time you wanted to change some data like marking a todo complete, or adding a book to your library you had run a function that updates your entire page just to keep your view in sync with the data. This is a very verbose and error-prone way of doing things!
Frameworks are there to ease that pain! The frameworks will automatically and efficiently keep your UI in sync with the data in your app. All the tedious code you had to write manually is now abstracted away letting you focus on more productive things.
The various frameworks (there are a lot of them) tend to have a few things in common. In general any given JS framework will have at least some sort of templating system that allows you to create reusable components (A templating system is nothing more than the ability to create bits of code that you can reuse). These components can be thought of as building-blocks that you use to build your project. For example, you could have a
header and a
footer component that you re-use on all your pages, or you could have something like a
card component that nicely wraps whatever you put inside of it with a div and a box-shadow or border.
Imagine the power of being able to do something like this as many times as you like across your whole project to get a nice looking card:
<my-card-component> <h1>Card title</h1> <p>Card Content</p> </my-card-component>
The way that these components are created differs greatly between frameworks, but re-usuable components are the foundation of all frameworks.
Most frameworks also include some sort of state-management system. State management means that your components can know certain things about the current environment and then present themselves differently based on those variables. For example if you have a header component with a
log-in button you would want to show it only when the user is not logged in (or replace it with a
log-out button). Somewhere in your app (again, this will differ greatly from framework to framework) you will have a variable like
user-is-logged-in that you can use to change the header-component content.
Different frameworks will have various other tools built-in (or easily included with plugins) such as routing, (changing the view based on the URL) rendering arrays as lists, and animation. In essense frameworks make creating complex and robust web applications much easier.
It’s no secret that there are a ton of Front-end frameworks in the world… so selecting one to learn is a daunting process. Here’s an incomplete and unordered list of JS frameworks you may have heard of.
Picking which framework to learn comes down to a few considerations. First and probably most importantly is your goal in learning. If you are looking to get a job or internship as soon as possible then you are going to want to look at which framework occurs most frequently in job-postings in your area. If you are looking to pick up a framework quickly to build a side-project, then you might consider which one seems easiest to getting started. If none of that matters to you then you can just pick whichever one suits your preferences at the moment.
The good news is that it doesn’t really matter which framework you select. Most of the big ones are similar enough that once you’ve learned one transitioning to another is relatively simple. If you’ve already mastered React, for example, but then notice job-postings that ask for experience with Vue, you will likely be able to pick up Vue and start using it in less than a week.
The rest of this section will go through the 3 most popular front-end frameworks (React, Angular and Vue), tell you a bit about them, and offer resources to get you started.