Data courtesy of StateOfJS Surveys 2016, 2017, 2018, 2019, 2020. View an interactive version of these charts on our blog.
A Note on Web Components and React:
React and Web Components solve different problems and developers typically don't use Web Components with React although they are supported (for example if you have a UI component that was written using Web Components). As the React site clarifies, "Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary."
React is by far the most used with Github "used by" statistics exceeding 3 million. You should choose React if you prefer to have a virtual DOM and need a lot of ready-to-use components.
AngularJS or Angular 1 was created by Google as a front-end framework for MVC (Model-View-Controller) and MVVM (Model-View-ViewModel) implementations in 2009 for its web development projects. Subsequently, Google's Angular team lead the creation of Angular aka Angular 2 which is based on TypeScript and is a complete re-write undertaken by the original team that created AngularJS. Angular utilizes HTML as a template language and supports extending HTML's syntax. Unlike React, Angular is a full frontend framework. Angular has a steep learning curve and Angular 1 has faced criticism for two-way data binding that some consider an anti-pattern that is difficult to maintain and debug in complex applications or understand through code review. You should choose angular if you want a powerful framework backed by google and are already invested in typescript.
Preact is billed as a smaller, faster React alternative using the same API. Preact focuses on optimizing performance, size (~3kb vs ~45kb for React), efficient memory usage, and offers a low learning curve for React users and overall compatibility with the React API. While the project is lean and optimized for its goals, preact-compat offers drop-in compatibility for existing React code without any changes. This can be useful for projects that rely heavily on React features not in Preact; however, you give up some of the benefits of Preact using this compatibility layer. Github used by 19k. You should choose Preact if you want a fast and lean drop-in replacement for React.
Ember.js, the self-described "framework for ambitious web developers" is focused on developer productivity. Ideally suited for single-page applications based on the MVVM pattern, Ember.js was created by Yehuda Katz who was previously a core team member at jQuery. Useful for client-side applications, Ember also includes an official data layer which makes back-end integration easy with two-way data binding using Ember data. Ember has its own plugin repository that offers a variety of helpful integrations. Ember's Ember-CLI, a command-line add-on provides support for various technologies including CoffeeScript, Handlebars, SaaS/Less and more. Github Used by 20k. You should choose ember if you want an elegant and quick-to-develop framework with a great community.
For the 2020 survey results that were published January 2021, some up and coming options surfaced including:
LitElement evolved out of Polymer 3.0 and has a performance advantage over React as the number of rendered elements increases. A simple, lightweight framework, LitElement allows you to use other frameworks since it's a standard ES6 component itself and has an extensive library of web components available via NPM. There is a lot to like with LitElement.
Caleb Porzio created Alpine as leaner approach to reactive and declarative frameworks with the goal of reducing overhead while maintaining DOM. There is no build step and the library is under 5KB compressed. While it may not replace larger frameworks, it can also be used in combination with them similar to LitElement.
Explore an Interactive version of this dashboard.
Have a different opinion, framework or library of choice? Perhaps Backbone.js (with Underscore), aurelia, meteor.js, or Mithril.js have helped your development more than the top 6? Please share your feedback and recommendations!
If you have a developer topic or area of interest you would like to see visualized with charts and dashboards please let us know so we can address it in a future article.