Technology comparison

What will be the best JavaScript framework in 2021?

Introduction

The world of the front end is dominated by 3 technologies - Angular, React and Vue. Increasingly, however, there is talk of a triumphant return of plain JavaScript (a.k.a "Vanilla JavaScript").

This can be seen for example in the Bootstrap approach, which in version 5 dropped jQuery and announced the migration to pure JavaScript.

However, this does not make it any easier to choose between the available options, and the competition between technologies and their supporters (who are often more like fanatics) sometimes takes the form of a real war.

What would a front-end look like in a fantasy world?

Watching these tribal battles, one gets the impression that the most important question any programmer has to answer is:

What technology is the best?

Contrary to appearances, the answer to this question is extremely simple:

There is no such thing as "best technology"

Why? Because all of the above options are great and any of them can help you create a fantastic project.

Both Angular, React, Vue and pure JavaScript are very mature and stable technologies, with huge and active communities. Each of them provides all the necessary tools and support needed in modern web development.

Therefore, the question you should ask is:

Which solution will be the most reasonable for me, with the project I am working on and with my resources?

Much better.

The answer to this question is also simple:

Choose the solution that will lead you to your goal (i.e. build the specific project you are working on) in the most efficient way


Where to start?

Now let's leave these very general questions and get down to business.

Typically, technologies are judged in such categories like:

  • popularity
  • job market demand
  • community and development
  • performance
  • flexibility
  • maturity
  • tooling

But let's be honest - each of the technologies mentioned in this article performs very well in all of these categories.

However, there is one thing where these technologies differ significantly from each other and that is crucial when choosing first:

Learning curve
Education

Why is this issue crucial?

Because if you are already a seasoned developer technology is of secondary importance to you. With appropriately advanced skills, you are able to create a high-quality project and solve any problem, regardless of whether you work in Angular, React, Vue or plain JavaScript.

However, the problem is how to get to that level. And that is why the learning curve is crucial, because it determines how efficiently our technology learning progresses.

Assume the following scenarios:

  1. You are a beginner without knowing the basics of web development
  2. You already know HTML, CSS and the basics of plain JavaScript
  3. You already know Bootstrap well, and you have at least an intermediate level of knowledge of plain JavaScript
  4. You are a seasoned developer with advanced knowledge of JavaScript

Now let's consider them step by step.


Scenario 1 - You are a beginner without knowing the basics of web development

At this point, you shouldn't think about frameworks and libraries at all. You must first build a solid foundation and learn the basics of web development well.

Recommended choice: Start by learning HTML, CSS, and the basics of JavaScript.

If you try to skip this stage and start, e.g. with React, you will get discouraged from programming very quickly. It's like writing an essay in a foreign language without knowing even the basic vocabulary and grammar.

Our basic courses are the best place to start your coding adventure.

They are free, easy to follow and will allow you to learn the necessary basics to work with more advanced tools like MDB.

Get started

Scenario 2 - You already know HTML, CSS and the basics of plain JavaScript

You're on the right track, but it's still too early for solutions like Angular, React or Vue. You should significantly strengthen your knowledge of plain JavaScript and become familiar with Bootstrap - preferably its latest, fifth version.

Recommended choice: Get started with MDB 5 Standard, which is made of pure JavaScript and the latest Bootstrap 5.

MDB 5 Standard is an extremely powerful (and at the same time extremely easy to use) tool, thanks to which you will not only improve your knowledge of pure JavaScript, but also learn concepts such as responsive web design and good web development practices.

Get started

After downloading and installing MDB Standard, you can start learning our tutorials right away. In the first one, you will learn how to create an impressive, responsive landing page.


Scenario 3 - You already know Bootstrap well, and you have at least an intermediate level of knowledge of plain JavaScript

This is a good time to start your adventure with frameworks. The knowledge you have and a solid foundation in plain JavaScript will allow you to smoothly implement more advanced technologies.

Recommended choice: Get started with Vue & MDB Vue.

Angular and React requires a deep level of Javascript knowledge and experience to hand decision making regarding third-party libraries. Additionally, many companies are rapidly switching to Vue as it has the most straightforward learning curve as compared to Angular and React.

Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components. Hence, the transition to Vue from either of the two is an easy option.

MDB Vue will help you smoothly enter the world of frameworks and libraries. Thanks to it, you will learn how to fully use the potential of Vue and gain additional tools that will further improve your work and increase the skills of modern web development.

Get started

Advanced comparison

After scenario 3, the "learning curve" is no longer a key issue when choosing a technology.

Assuming you are a seasoned developer with advanced JavaScript knowledge, we can consider each technology in detail in the following categories:

  • Designation
  • Code Style
  • Performance
  • Flexibility
  • Tooling
  • Mobile
  • Maturity
  • Support
  • Usage
  • Works demand
  • Popularity

Designation
Angular bootstrap logo

Meant to build whole applications.

React bootstrap logo

Focused on building user interfaces.

Vue bootstrap logo

Focused on building user interfaces.

Code style

How readable and intuitive is the code and conventions of the framework?

Angular bootstrap logo

With Angular the official site provides example code in several languages; JavaScript, TypeScript, and Dart, though TypeScript is the most commonly used. As per styles, Angular utilizes Sass.

React bootstrap logo

React uses JSX (a simple JavaScript that uses HTML quoting). You can also use HTML tag syntax to render subcomponents, or write in good old-fashioned JavaScript, meaning you have flexibility as you code, either way.

Vue bootstrap logo

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.

Performance

Package size

Angular bootstrap logo

Library size (over the network):
-runtime.js (runtime) 1.05 kB
-polyfills.js (polyfills) 59.6 kB
-main.js (main) 172 kB
Together: 232,65 kB

React bootstrap logo

Library size (over the network / uncompressed): 32.5KB / 101.2KB

Vue bootstrap logo

Library size (over the network / uncompressed): 31KB / 84.4KB

How well-performing are apps built with the framework?

Performance benchmarks vary for some use cases — that said, each of these frameworks offers broadly similar performance. You can find very interesting comparisons in this post.

How big is the footprint of the framework with regards to package size and memory usage?

Duration in milliseconds ± standard deviation (Slowdown = Duration / Fastest)

Loading duration comparison

Memory allocation in MBs ± standard deviation

Memory usage comparison

Source: JS framework benchmark

Flexibility

How many features is the framework offering out of the box?

Angular bootstrap logo

It's an all-inclusive framework that provides more in the box than React or Vue.

React bootstrap logo

Because it's focused on building UI, you'll likely need to extend react with 3rd party libraries.

Vue bootstrap logo

It's not as all-inclusive as Angular but it offers more out of the box than a react.

Tooling

What tools are available for the framework?

All three frameworks provide CLIs. These CLIs make it easy to create a new project, support local development and prepare for deployment.

Angular bootstrap logo

The most capable CLI of the three, it furthermore offers a lot of built-in features, which are missing in competitors out of the box. Yet, the number of available plugins is huge and still growing.

React bootstrap logo

There are lots of great choices for fulfilling almost any requirement.

Vue bootstrap logo

Although it has fewer plugins and tools available, there is a sufficient number of plugins for most common cases. Taking into account the rapidly growing community of Vue, new plugins are released on a daily basis.

Note:All three frameworks have a great support within code editors like Visual Studio Code or Atom. However to get the best experience you will have to install the appropriate extensions.

Mobile

Does it offer a way to build native mobile applications?

Angular bootstrap logo

NativeScript doesn't require Angular, but it's even better when you use it. NativeScript features deep integration with Angular, the latest and greatest (and fastest) Angular framework.

Alternatively:
Ionic is a framework that allows us to develop mobile apps and websites using web technologies – HTML, CSS and Javascript basically. The app on a mobile device is running inside a WebView, but of course, you don’t see a navigation bar inside that app later! It looks and feels like a regular app, and can be installed from the app store of course.

React bootstrap logo

With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

Vue bootstrap logo

Vue.js is a lightweight framework for building engaging user interfaces. NativeScript powers cross-platform (truly native) mobile apps, using the web skills you already know. Combined they are a fantastic pair for developing immersive mobile experiences.

Maturity

How mature is the framework?

Angular bootstrap logo

While the AngularJS (the old one) was initially released in October 2010, the new Angular was introduced in September 2016.

React bootstrap logo

Initially released in March 2013.

Vue bootstrap logo

s the youngest, initially released in February 2014.

Support

Long-term support and migrations:

Angular bootstrap logo

According to an Angular team blog post, their major releases are scheduled every six months. Starting from Angular 4 the team has announced that each version will be supported for at least one year beyond the next major version release. In most cases updates are easy and supported by migration tools (if needed).

React bootstrap logo

React's API is quite stable as Facebook states in their design principles. Whenever a new API is released, there are some scripts that help you to migrate. The React team wrote a blog post about their versioning scheme. When they add a deprecation warning, they keep it for the rest of the current release version before the behavior is changed in the next major version.

Vue bootstrap logo

The Vue Team states that whenever a new major version is released, the previous major becomes LTS for 18 months.

How big is the team behind the framework?

Angular bootstrap logo

Originally created by Google, there currently are 758 contributors on GitHub.

React bootstrap logo

React seems to have the biggest team with 989 contributors on GitHub.

Vue bootstrap logo

Though the community is growing, it is not currently as established as or as big as the others counting 215 contributors on GitHub.

Is there a company or organization that owns the framework?

As already noted, Angular and React are supported and used by big companies. Facebook, Instagram, and Whatsapp are using it for their pages. Google uses it in a lot of projects: for example, the new Adwords UI was implemented using Angular & Dart. Again, Vue is realized by a group of individuals whose work is supported via Patreon and other means of sponsorship. You can decide for yourself whether this is a positive or negative.

Usage

Typical end user:

Angular bootstrap logo

Focused on the application which makes it popular with enterprises.

React bootstrap logo

Popular within startups and smaller organizations.

Vue bootstrap logo

Popular within startups and smaller organizations.

Companies using these frameworks:

Angular bootstrap logo

Google logo Google

Paypal logo PayPal

Microsoft logo Microsoft

AT&T logo AT&T

WWF logo WWF

React bootstrap logo

Airbnb logo Airbnb

uber logo Uber

Twitter logo Twitter

Pinterest logo Pinterest

Codecademy logo Codecademy

Vue bootstrap logo

9gag logo 9GAG

Netflix logo Netflix

Adobe logo Adobe

Xiaomi logo Xiaomi

Alibaba logo Alibaba

Works demand

What is the current and past demand in the market for people with certain skills? (job advertisements)

Disclaimer: values below are estimated. Due to the ambiguity of phrases like React, values are estimated based on 5 different search results and averaged

Angular bootstrap logo

Indeed: 17,500
LinkedIn: 82,398

React bootstrap logo

Indeed: ~7,000
LinkedIn: ~20,000

Vue bootstrap logo

Indeed ~2,500
LinkedIn: ~7,000

Popularity

Some time back there was a fairly momentous occurrence in the JavaScript framework world: Vue.js passed React.js in the number of people who have 'starred' it on Github. Using a tool called Star History, we can see that this measure, in particular tells a story of React's historical dominance being overtaken by the skyrocketing Vue.

This challenge was so exciting that one the developers created a dedicated website to track whether Vue has passed React yet?

Although GitHub stars can indicate an attitude that a community has to a certain technology, it has no correlation with actual usage. Github stars are more of a measure of the "hipness" of a project than its actual use.

Let me visualize why this apparent correlation is wrong:

As you can see, stars are important but they cannot be confused with actual usage


Summary

Picking the right front-end framework is important. But far more important is to focus on learning their shared concepts, as this will prepare you for whatever happens to come next. Make no mistake front-end web development like all programming specialties will continue to change and evolve over time