6 Best Front-end JavaScript Frameworks: Multi-Year Developer Surveys Visualized [2021 Update]

JavaScript's popularity has only grown over time and this meteoric rise has resulted in widespread usage from standard front-end development, to server-side usage through node.js to mobile application development. A plethora of front-end JavaScript frameworks and JS libraries have been created by developers, for developers helping to save time and improve application quality. The 6 most popular options are:

Data courtesy of StateOfJS Surveys 2016, 2017, 2018, 2019, 2020. View an interactive version of these charts on our blog.

1. React.js

React.js is the leading JavaScript library for building user interfaces. Often erroneously referred to as a front-end JavaScript framework, the React library handles only the View layer of the complete Model View Controller (MVC) for building user interfaces and facilitates the creation of reusable user interface components. React is an open-source library that uses a virtual DOM that optimizes DOM updates to only those components that are changed while giving front end developers the freedom to code as if the page is rendered for each change. React uses JSX which appears similar to HTML, and is a syntax extension to JavaScript. JSX gives developers a helpful visual aid for user interface development inside of JavaScript code. JSX also provides native XSS protection by sanitizing inputs by default. It's also possible to use React without JSX working with native JavaScript. Babel supports syntax highlighting for JSX in your favorite Javascript Editors. React's use of JSX results in a steeper learning curve as you must learn this on top of familiarizing yourself with the library. Unlike other JS frameworks, you need to build your own workflow rather than using integrated framework tools. React helps create complex user interfaces using components that split the UI into reusable sections. Components accept inputs (termed props which are similar to JavaScript functions) and return React elements describing what should be rendered on screen. React does not require a dependency injection library or framework since it is based on reusable user interface components. React Native provides mobile app development for iOS and Android offering the best parts of native development with React for mobile app user interfaces. For enhanced performance, React allows for server-side rendering to static markup with ReactDOMserver typically used with node.js. React apps enable you to set up a modern react web app with a single command and one dependency.

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.

2. Vue.js

Vue.js bills itself as the progressive JavaScript framework, which allows for adoption incrementally within your application architecture from single-page applications to full-stack integrations. Vue was created by Evan You after working at Google. Evan wanted to build a JavaScript framework that would extract the best parts of AngularJS while being much more lightweight. One potential downside of Angular's influence is the support for two way data binding which has faced criticism (see Angular below for more details). While lightweight, Vue offers an "incrementally adoptable ecosystem" which scales between a JavaScript library and a full-featured popular JavaScript framework for complex web applications. Vue enables you to create reusable components encapsulating HTML, CSS, and JavaScript for common user interface elements. Vue has a gentler learning curve compared with Angular and React as you are not required to learn typescript (Microsoft's superset of JavaScript required for Angular) or JSX (Typically used with React) and can leverage existing vanilla JavaScript knowledge. Vue shows Github "used by" of 1.2 million. You should choose Vue if you want a framework with excellent documentation that is easy to start with.

3. Angular

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.

4. Preact

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.

5. Ember.js

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.

Bonus: 6. Svelte

An honorable mention to Svelte which is a JavaScript framework that compiles to JavaScript at build time resulting in better client-side performance. Svelte has no virtual DOM or client-side dependencies and is the most recent framework to gain popularity according to the StateOfJS surveys. Billed as "a radical new approach to building user interfaces," Svelte shifts the bulk of the work that occurs in the browser for other frameworks and libraries, to compilation that happens when you build your application. Originally released in 2016 and recently passing a version 3 milestone, Svelte is growing in popularity for developers that value performance. This performance does come at the cost of compatibility where browsers such as IE11 and older are not supported with generated code and the overall ecosystem is not as developed as frameworks that have a larger and more established user base. Github Used by 11k. You should choose Svelte if you are looking for a lightweight framework that is high performance and reasonable learning curve.

Up and coming

For the 2020 survey results that were published January 2021, some up and coming options surfaced including:

LitElement

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.

Alpine.js

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.

Stimulus

A self-described framework with modest ambitions, Stimulus doesn't render HTML or aspire to manage your complete frontend, but rather augment HTML. Stimulus was created by the Basecamp team who ate their own dogfood with the recently launched HEY email service. You should take a closer look at stimulus if you have projects that are primarily HTML and use JavaScript sparingly to improve the user experience.

Conclusion

From single web pages to advanced business logic and data flows for complex applications, there is a framework, library and developer community that is here to help. We hope this look at the best JavaScript frameworks and libraries helps you explore new options or affirm your current choices and ultimately push your software development forward. While developer's needs are as diverse as the options available, if you aren't already working with React, we suggest you do so. Not only is it the most used library by far, it's also the most likely to be reused by those that have used it previously.

Explore an Interactive version of this dashboard.

Add to the Discussion

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.