Best JavaScript frameworks & libraries – 2018 November

Introduction - top JavaScript frameworks 2019


Introduction

Which technology should I choose for my new project/startup/application? If you haven't asked yourself this question yet, either you already know the answer or you probably will have to decide soon. Selecting a front-end framework can be a difficult and confusing process — you've heard of React, Angular and there's this new thing called Vue but you don't have time to learn all three so how do you choose?

As a technology company, building tools for technologies we use dozens of technologies on a daily basis. That's why we decided to share our experiencesof using the above-mentioned technologies in real life applications.

Before we move on to an actual comparison, you should understand one very important thingthere are no good or bad frameworks. They are all great and all of them will go down in the history of a web development.

You can be successful with any of these frameworks, Also learning one framework makes it easier to learn another; as when you learn everything you need to know about one framework you won't just learn about that specific framework you'll also learn about these shared concepts:

  • architecting single page applications or SPA's
  • designing and developing components
  • understanding how data flows through an application
  • properly managing state templating and data binding
  • working with back-end API s handling client-side routing
  • using language abstractions like Sass and TypeScript
  • applying testing in all of its various forms and leveraging front-end builds

You can think of frameworks as different types of cars. Each one can basically get you from point A to point B. However, while one accelerates faster, the other will be faster in winding-roads. The real question is what is more important for you? Therefore the real question isn't actually:

Which framework is better?

but:

Which framework suits my needs better?

As a team of developers we've been building both and huge applications, conducting discussions, interviewing colleagues with relevant experience in other companies, as well as reading tons of material online and today we would like to share with you our outcomes.

Similar to how the automotive market offers dozens of different car types, web development offers numerous solutions which could possibly help us build our new app. We can find Ember, AngularJS, Knockout, Polymer, Riot, Angular2, Vue, React and more. Back in the day (2012) AngularJS created by Google was very famous and almost dominated the world of open-source JavaScript frameworks. Technologies tend to change, progress and evolve at rapid speeds. Due to that, Google has decided to release Angular 2.0 in 2016, however, in order to apply new architecture (MVC vs components & directives, JavaScript vs TypeScript), the new version wasn't backwards compatible at all. As a result, the new framework came into existence, while the old one is still referred to as AngularJS, version 2 and next (currently 7) are just called Angular.

It took 5 years for the Angular team to release a new version, — though in web development 5 years is like an eternity. Therefore while Google was working on a new version, dozens of new libraries/frameworks were created. Some of them never got enough traction to become widely used, others survived till today but the community around them is marginal. In this article, I’m comparing the finalists in the race for the next framework we are going to be building our infrastructure with: Angular, React and Vue.

Hold on! What about jQuery?

jQuery is a JavaScript library designed to simplify the client-side scripting of HTML. jQuery was originally created in January 2006 and almost dominated the market. In 2015, jQuery was used on 63% of the top 1 million websites (according to BuiltWith), and 17% of all Internet websites. As of June 2018, jQuery is used on 73% of the top 1 million websites, and by 22.4% of all websites (according to BuiltWith).

Back in the day jQuery was making developers lives easier by solving issues which were difficult to deal with using plain JavaScript. The biggest advantage was cross-browser compatibility, you didn't have to worry whether given function is supported by a different browser. If you add on top of that, the fact that jQuery is very powerful in terms of available functions and ease of use, that might give you understanding why it became so popular that around 2009-2010, whenever you searched for a JS issue on stack overflow you've almost always found a jQuery solution.

However, although using jQuery is easier than plain JavaScript, new frameworks made it even easier thanks to the concept of templating (which isn't available in jQery). That shifted the logic to the view and made code much more readable and intuitive which is very important, especially in larger projects.

Does it mean that jQuery isn't important anymore? Definitely not! As I mentioned before — over 70% of the top 1 million websites still operates using jQuery. WordPress which powers over 32% of the web also uses jQuery as a core library, therefore it's still a very important part of web development environment. What is even more important - we should always choose the technology which covers the requirements of our project in a most efficient way. It doesn't make any sense to use i.e. Angular to build a personal blog or company website. In such cases, jQuery will provide the same performance and easier implementation in terms of time and difficulty

Although in this publication we will focus on Angular, React and Vue, jQuery is a still important player in the market.

Comparison method

To give you comprehensive answers we have compared all 3 in numerous, though not always obvious, aspects:

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

Learning Curve

How easy a framework is to learn for an experienced developer.
React React logo

Templates are written using JSX, not native HTML so expect a bit of an adjustment period.

Vue Vue logo

Vue offers an easy on-ramp for developers who are newer to client-side development. However it still lets you grow with it, which makes it a popular choice for beginners. Vue allows you to leverage native HTML and CSS skills and it's known for its well-written documentation.

Angular Angular logo

A TypeScirpt and binding syntax may take a bit to get used to. However, being able to leverage native HTML and CSS for component templates and styles is a plus. Since Angular is meant for building the entire application, it's bigger and more complex than Vue. Angular has the steepest learning curve of the three frameworks — the Angular code can also feel verbose and complex at times when compared to React and Vue.

Designation

React React logo

Focused on building user interfaces.

Vue Vue logo

Focused on building user interfaces.

Angular Angular logo

Meant to build whole applications.

Code Style

How readable and intuitive is the code and conventions of the framework?
React React 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 Vue 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.

Angular Angular 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.

Performance

Package size
React React logo

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

Vue Vue logo

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

Angular Angular 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

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?
React React logo

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

Vue Vue logo

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

Angular Angular logo

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

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.

How many stable plugins are there for the frameworks?
React React logo

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

Vue Vue 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.

Angular Angular 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.

Code Editors

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?
React React 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 Vue 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.

Angular Angular 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.

Maturity

How mature is the framework?
React React logo

Initially released in March 2013.

Vue Vue logo

Is the youngest, initially released in February 2014.

Angular Angular logo

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

How clear is its future?
React React logo

A strong community and Facebook support ensures that React is a key player and will stay that way over the coming years. Similar to Vue React don't publish estimated release dates.

Vue Vue logo

There are no future release dates announced, however taking into account the fastest growth of Vue users among others factors we can assume that it will be a key player in the coming years.

Angular Angular logo

Unlike Vue and React Angular announces expected dates for its future releases. Angular 8 is expected in March/April 2019, while Angular 9 should go live somewhere in September/October 2019.

Support

Long-term support and migrations:
React React 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 Vue logo

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

Angular Angular 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).

How big is the team behind the framework?
React React logo

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

Vue Vue logo

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

Angular Angular logo

Originally created by Google, there currently are 758 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:
React React logo

Popular within startups and smaller organizations.

Vue Vue logo

Popular within startups and smaller organizations.

Angular Angular logo

Focused on the application which makes it popular with enterprises.

Companies using these frameworks:
React React logo

Airbnb logo Airbnb
uber logo Uber
Twitter logo Twitter
Pinterest logo Pinterest
Codecademy logo Codecademy

Vue Vue logo

9gag logo 9GAG
Netflix logo Netflix
Adobe logo Adobe
Xiaomi logo Xiaomi
Alibaba logo Alibaba

Angular Angular logo

Google logo Google
Paypal logo PayPal
Microsoft logo Microsoft
AT&T logo AT&T
WWF logo WWF

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

React React logo

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

Vue Vue logo

Indeed ~2,500
LinkedIn: ~7,000

Angular Angular logo

Indeed: 17,500
LinkedIn: 82,398

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. Vue vs React stars 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