React, Angular and Vue compared, which should you learn in 2021?

One of the most common questions I get as a coding mentor when it comes to moving on from learning the basics of HTML/CSS and JavaScript is:

which is the best JavaScript framework to learn, right now, in 2021? Should I learn React, Angular or Vue?

I recently released a brand-new course for React students, The Beginner's Guide to Real-World React, where you can learn how to go from complete React beginner to building realistic UI applications using the React framework. Hot on the heals of the course release, I thought it would be good time to answer this very important question.

Let's dive in!

Similar frameworks and their comparisons

There are many JavaScript libraries, frameworks, tools, projects, and platforms out there that help solve developers’ problems, help them build user interfaces, and ship excellent products faster. When it comes to the building user interfaces part, arguably the most popular libraries out there are Angular, VueJS, and ReactJS.

Much like React (which I'm a huge fan of) both Vue and Angular are concerned with empowering developers to build complex user interfaces in a modular way, breaking down parts of those interfaces into component parts.

Looking at the search data from Google Trends, you can see that Vue has been steadily gaining interest over the past few years, only dipping over the course of late 2020. React has increased dramatically, whilst Angular has declined over the same time frame. Both React and Angular have dropped off in search interest over the course of late 2020, with React gaining more popularity once more towards present day (June 2021)

Comparing Angular, React and Vue frameworks

Let's take a quick tour of each of these three big players in the front-end web application building space and see if we can help you determine which of the popular JavaScript frameworks you should be learning in 2021.

React

React came onto life in 2013 and has gone from strength to strength. React is more of a library than a complete framework and it has many missing pieces of the overall development puzzle (this is one of the things The Beginner's Guide to Real-World React aims to address!).

React is declarative, meaning it allows us to break down our complex user interfaces into smaller, bite-sized pieces of functionality that operate on their own; managing their state, given some sort of input data referred to as props. These smaller components can be brought together as building blocks for larger, more complex user interfaces that interact via passed in data and events.

Benefits

• Small and relatively lightweight as libraries go.
• Declarative in nature; you can write your UI as you want it to be rendered.
• Shallow learning curve, especially when it comes to learning the essentials.
• Works a lot on an 'opt-in' fashion where you can adopt as much or as little as you need.
• React is very unopinionated, it gets out of your way.

Drawbacks

• Some library differences can cause confusion and add to the learning curve (e.g. classes vs. function components).
• React is very unopinionated, you're going to have to fill in the blanks to add things like navigation to your app.
• It's made by Facebook -- this could be a deal-breaker for some developers.
• Because of its free and easy approach, there aren't a lot of best-practices or clear guidelines around developing with React.

Vue

VueJS came onto the scene around 2014 and was developed by a former Google employee Evan Yu. Vue is a progressive JavaScript framework, similar to React, and has a rich ecosystem of additional libraries and plug-ins to enable additional functionality.

Benefits

• Empowered HTML: Vue has a lot of similarities with Angular in the way that it decorates HTML blocks within its components.
• Detailed documentation: one of the best features of Vue is the hugely detailed and informative documentation that helps developers at either end of the experience scale.
• Ease of integration: whether you’re building single-page applications (SPA’s) or more complex applications, Vue’s smaller, interactive parts mean it can be integrated into existing infrastructure without affecting the wider * system.
• Large scaling: Vue can be used to develop pretty large, reusable templates to power very complex apps.
• Small code footprint: Vue weighs in at around 20KB keeping its size small, but also aiding in increasing its speed and performance.
• Short learning curve

Drawbacks

• Lack of support and resources: whilst rising in interest and boasting a loyal and growing community, Vue has the smallest market share and so naturally has limited resources and solutions out there for budding developers or those seeking answers.

Angular

Angular (formerly AngularJS, which is a very different beast), is a fully-fledged framework released back in 2009. It boasts a very mature framework that handles everything you need to build rich, data-driven user interfaces right out of the box. It offers an MVVM (Model, View, View Model) approach to development structure that separates the working parts into their respective areas of responsibility.

Benefits

• MVVM structure: this allows developers to work on the same area of the app without stepping on colleagues’ toes. However, the MVVM approach is not as intuitive to those starting out or those unfamiliar with this particular project structure.
• Two-way data-binding: this enables singular behaviour within the app, reducing the risk for errors.
• Dependency injection of the required features that the current components depend on.
• Deep coupling with TypeScript: including excellent TypeScript support.
• Very detailed documentation and guides
• Mature ecosystem: similar to the documentation, Angular is widely used and has a large ecosystem of resources, guides, help, and advice for just about any situation you’ll come across.
• Opinionated approach: even down to the structure and architecture to make sure your project can scale well.

Drawbacks

• Steep learning curve: Angular is very complex and has an equally steep learning curve which is a big barrier to entry, especially for new developers
• Migration: is often a problem when moving from older versions to new
• Deep coupling with TypeScript: yes, this is also a benefit, but TypeScript is not widely adopted by new developers and adds yet another few degrees to an already steep learning curve

When it comes to React, Angular and Vue, which framework is best?

This is really a deceitful question as it pits each framework against one another and it really boils down to opinions and preference. There are many solid reasons to choose any of these three frameworks, or indeed, none at all.

Remember, that any library, framework, platform, language, design, pattern, whatever, they’re all just tools.

In the same way that you wouldn’t use a hammer to unscrew a bolt, sometimes it’s about finding the right tool for the job. When you have a choice of hammers, then it can be a simple as ‘I prefer this one over that one’. And it’s just as easy to write bad code in a good library.

Should I learn React, Angular or Vue to get a job?

If you're coming here with the angle of looking for a job then the best advice is to take a look at the local job market where you are. For example, here in Yorkshire, we have the two cities of York and Leeds, the latter being a huge tech-hub for the North of England.

It’s very diverse as tech goes with a wide variety of technologies, languages and sectors that you can choose to apply for roles within. In terms of tech stack, the job market in this part of the world is very React and Angular dense at the front-end, with PHP and .NET forming the largest part of the server-side technologies.

So, if I were in the market for a job, I’d be focusing on those languages and tech-stack.

What about other frameworks, which should I learn?

There are, of course, about as many user interface building libraries, frameworks, and platforms as there are hairs on your head, with more popping up all the time. The big question you should be asking is "which one is right for me, my team, my project(s)?".

You might not have much of a choice in this, depending on where you choose to work and what projects you choose to work on. This article is really about comparing the good and bad parts of the three heavy hitters in the market today, midway through 2021.

If you’re interested in looking at other front-end, UI-building libraries and frameworks then some other popular choices include:

• Preact, a tiny alternative to React that operates in a very similar way.
• Svelte, a very popular alternative to other interactive UI building languages that shifts to a compiled step (as opposed to React and Vue that do work in the browser).
• Ember, a very robust and battle-tested JS framework for building modern web applications.

Further reading and other resources

Whilst I have a lot of love for the other JavaScript frameworks on show here, React is my first love and where I spend most of my time building funky things. If you're interested in learning React then I recommend the following:

• Check out my recently launched novice guide to those just starting out learning the library, The Beginner's Guide to Real-World React.
• Talk to me about my mentorship options, even if it's just a one-off email to ask questions or pick my brains.