Skip to main content

What front-end framework should you choose ?

· 22 min read
Tony Cabaye
Tony Cabaye
Frontend expert

This article serves as a follow-up to my previous article on front-end architecture, which can be found here. While it's not necessary to have read the previous article before reading this one, if you're looking to make the best choice for selecting your frontend framework, it would be beneficial to take a look.

In this article, our main focus will be on effectively comparing different frameworks by examining various data, statistics, surveys, and more.

Here's an outline of what we'll cover:

  1. We'll begin by exploring client-side technologies such as React, Vue.js, and others (referred to as frontend frameworks).
  2. Next, we'll shift our attention to server-side technologies, which are often decided for their Server-Side Rendering capability (referred to as rendering frameworks).
  3. Lastly, we'll present some excellent contenders for frontend frameworks that you might consider.

Frontend frameworks​

Frontend frameworks are used to facilitate the development of intricate frontend applications.

These frameworks can be employed independently in the Single-Page Application (SPA) architecture or in conjunction with rendering frameworks in the Server-Side Rendered Single-Page Application (SSRSPA) architecture.

Now, let's delve into the available data concerning these frameworks (you will also find jQuery in the list I added for comparison).

GitHub statistics​

Here are some statistics retrieved from GitHub that primarily indicate the popularity and interest for each framework. The statistics are sorted in descending order based on the number of stars (as of September 12, 2023):

FrameworkStarForkWatchContributorsLast commitCreated
React213k44.7k6.7k162912/09/202324/05/2013
Vue.js v3 (v2)40.1k (205k)7.3k (34.4k)765
(6k)		407
(358)		06/09/2023 (27/04/2023)12/06/2018 (29/07/2013)
Angular90.1k24.2k3k177411/09/202318/09/2014
Svelte72.4k4k86963504/09/202320/11/2016
jQuery57.8k20.9k3.2k28412/09/202303/04/2009
Preact35k1.9k40730011/09/202311/09/2015
Solid.js28.9k80221715011/09/202324/04/2018
Backbone28k5.5k1.3k32411/08/202330/09/2010
Alpine.js24.8k1.1k21324211/09/202328/11/2019
Ember22.4k4.3k86882008/09/202325/05/2011
Lit15.7k81420716012/09/202329/06/2017
Omi12.7k1.3k3469011/09/202331/05/2015
Stencil11.9k75718319112/09/202315/02/2017

GitHub star history​

By utilizing Star history, we can generate an image illustrating the GitHub star history for various frameworks over time. This image provides us with valuable insights into the trends and levels of popularity (indicated by the shape of the curve, particularly rapid increases) for these frameworks:

Star history graph for frontend frameworks

It's important to note that the star count for Vue.js version 2 appears to be decreasing due to a repository change for version 3. As a result, the older version (v2) is not experiencing significant growth in popularity, while the newer version (v3) is steadily increasing but has not yet reached the same level as the v2 version. It is not advisable to simply combine the star counts for v2 and v3, as there is likely some overlap or intersection between the two.

Click here to view an updated graph based on the date you're reading this article (you will need to provide a GitHub token).

By utilizing Google trends, we can generate an image that illustrates the search trends on Google. This image provides valuable insights into the relative popularity and interest over time for various frameworks based on search queries:

Google trends graph for frontend frameworks

Click here to view an updated graph based on the date you're reading this article.

By referring to npm trends, we can obtain the number of downloads for various frameworks, providing insights into their usage. The download statistics indicate the level of adoption and utilization for each framework:

npm trends graph for frontend frameworks

Click here to view an updated graph based on the date you're reading this article.

Stack Overflow 2023 survey​

Here is a survey result from Stack Overflow about popular technologies and how much they are admired (people that have used and want to continue using it) or desired (people that want to use it) by developers.

We can extract the following information regarding the list of frameworks we want to focus on in this section:

FrameworkUsedDesiredAdmired
React40.58%35.25%62.61%
jQuery21.98%8.59%32.89%
Angular17.46%13.86%50.75%
Vue.js16.38%17.42%57.87%
AngularJS7.21%4.21%19.22%
Svelte6.62%14.18%74.50%
Solid.js1.36%4.93%71.71%
Lit0.68%0.92%55.71%

State of JS 2022 survey​

Here is another survey result from State of JS showing the percentage of people that knows some frameworks, have used them, are interested in them or who would use them again.

We can extract the following information regarding the list of frameworks we want to focus on in this section:

FrameworkAwarenessUsageInterestRetention
React99.9%81.8%47.2%83.0%
Angular99.6%48.8%20.4%42.7%
Vue.js99.5%46.2%50.7%77.4%
Svelte93.6%21.2%69.8%89.7%
Ember77.0%7.5%13.4%17.1%
Preact76.1%12.8%35.6%74.3%
Solid.js65.9%6.3%65.7%90.9%
Alpine.js51.6%6.2%32.7%76.1%
Lit41.7%6.2%36.8%70.8%
Stencil35.4%4.3%32.7%62.6%

State of Frontend 2022 survey​

Here is another survey result from State of Frontend showing the percentage of people that used and liked or disliked some framework and the percentage of people who would like to learn some framework.

We can extract following the information regarding the list of frameworks we want to focus on in this section:

FrameworkLikedDislikedLike to learn
React76.2%25.0%16.2%
Vue.js28.9%17.0%28.1%
Angular22.0%51.0%8.0%
Svelte16.9%4.6%49.2%
Ember4.5%9.4%3.2%
Backbone1.9%11.3%1.3%

JetBrains 2022 survey​

Here is another survey result from JetBrains showing the percentage of people that use some framework.

We can extract the following information regarding the list of frameworks we want to focus on in this section:

FrameworkUsing
React55%
Vue.js35%
Angular17%
Angular.js7%
Svelte5%

Jamstack.org 2022 survey​

Here is another survey result from Jamstack.org showing the percentage of people that use some framework and the satisfaction to use that framework.

We can extract the following information regarding the list of frameworks we want to focus on in this section:

React71%2.9
jQuery44%0.3
Vue.js33%3.1
Angular20%0.7
Svelte19%5.3
Angular.js14%0.3
Preact12%2.0
Solid6%2.0
Stencil5%1.5

Market share​

We can gather market share data for various frameworks using the following tools:

Here is the data we can collect from the following sources as of September 12, 2023:

FrameworkBuilt WithSimilarTechDatanyzeWappalyzer
jQuery79.3M19.1M12.9M5M
React12.4M1.4M500k2.3M
Vue.js1.7M343k87k663k
Angular.js1.0M390k-271k
Backbone1.0M784k17k444k
Alpine.js144k--48k
Lit113k---
Angular98k-89k209k
Ember32k13k-27k
Svelte31k--25k
Solid.js---5k

Summary​

Here's a summary based on the collected data:

FrameworksPopularityLove/InterestUsage
jQuery➕➕➖➖➕➕➕
React➕➕➕➕➕➕➕
Vue.js➕➕➕➕➕
Angular➕➕➖➕
Svelte➕➕➕➕➖
Preact➖➕➖
Backbone➖➖➖➖
Solid➖➕➕➕➖➖
Alpine.js➖➕➖➖
Ember➖➖➖➖➖
Lit➖➖➕➖
Omi➖➖➖➖➖➖
Stencil➖➖➕➖

In the table above, the more ➕ symbols indicate higher levels of popularity, love/interest, or usage, while the more ➖ symbols represent lower levels of popularity, love/interest, or usage.

Please note that this summary is based on the data collected and the assessment of each framework across these different aspects.

If you want, you can jump to the article’s conclusion directly.

Rendering frameworks​

Rendering frameworks are frequently built upon frontend frameworks, although this is not always the case.

They serve as an excellent solution for delivering an exceptional user experience while ensuring that website content remains indexable by search engines.

Now, let's explore some available data on these rendering frameworks to gain further insights.

GitHub statistics​

Here are some statistics retrieved from GitHub that primarily indicate the popularity and interest for each framework. The statistics are sorted in descending order based on the number of stars (as of September 12, 2023):

FrameworkStarForkWatchContributorsLast commitCreated
Next.js111k24.7k1.4k287312/09/202305/10/2016
Gatsby54.7k10.6k761398107/09/202321/05/2015
Nuxt47.4k4.3k78454312/09/202326/10/2016
Meteor43.7k5.3k1.6k70211/09/202319/01/2012
Astro34.8k1.8k17558911/09/202315/03/2021
Remix24.6k2k21558112/09/202326/10/2020
Quasar24.2k3.3k47065812/09/202305/10/2015
Qwik18.8k1.1k13543311/09/202319/05/2021
SvelteKit16k1.5k15347012/09/202315/10/2020
Marko12.8k67820811911/09/202307/01/2014
Fresh11.3k5238919911/09/202307/05/2021
Gridsome8.5k49812512422/09/202231/07/2018
Angular universal4k49914911205/09/202324/06/2015
Solid start3.8k3044115806/09/202330/03/2021
Enhance321112830/08/202318/07/2022

GitHub star history​

By utilizing Star history we can generate an image illustrating the GitHub star history for various frameworks over time. This image provides us with valuable insights into the trends and levels of popularity (indicated by the shape of the curve, particularly rapid increases) for these frameworks:

Star history graph for rendering frameworks

Click here to view an updated graph based on the date you're reading this article (you will need to provide a GitHub token).

By utilizing Google trends, we can generate an image that illustrates the search trends on Google. This image provides valuable insights into the relative popularity and interest over time for various frameworks based on search queries:

Google trends graph for rendering frameworks

Click here to view an updated graph based on the date you're reading this article.

By referring to npm trends, we can obtain the number of downloads for various frameworks, providing insights into their usage. The download statistics indicate the level of adoption and utilization for each framework:

npm trends graph for rendering frameworks

Click here to view an updated graph based on the date you're reading this article.

Stack Overflow 2023 survey​

Here is a survey result from Stack Overflow about popular technologies and how much they are admired (people that have used and want to continue using it) or desired (people that want to use it) by developers.

We can extract the following information regarding the list of frameworks we want to focus on in this section:

FrameworkUsedDesiredAdmired
Next.js16.67%20.27%65.95%
Nuxt3.69%4.85%57.24%
Gatsby2.33%1.54%28.66%
Remix1.27%3.19%57.02%
Qwik0.54%3.12%66.58%

State of JS 2022 survey​

Here is another survey result from State of JS showing the percentage of people that knows some frameworks, have used them, are interested in them or who would use them again.

We can extract the following information regarding the list of frameworks we want to focus on in this section:

FrameworkAwarenessUsageInterestRetention
Next.js97.8%48.6%65.2%90.0%
Nuxt84.5%18.1%45.9%79.9%
Gatsby84.5%23.0%31.5%38.4%
Remix73.8%7.8%56.5%81.8%
Astro64.0%8.8%67.3%92.8%
SvelteKit71.9%11.9%66.3%92.5%

State of Frontend 2022 survey​

Here is another survey result from State of Frontend showing the percentage of people that used and liked or disliked some framework and the percentage of people who would like to learn some framework.

We can extract following the information regarding the list of frameworks we want to focus on in this section:

FrameworkLikedDislikedLike to learn
Next.js73.1%8.3%33.5%
Gatsby11.6%17.7%10.5%
Nuxt9.4%4.1%13.0%
Remix8.8%2.5%36.2%

Jamstack.org 2022 survey​

Here is another survey result from Jamstack.org showing the percentage of people that use some framework and the satisfaction to use that framework.

We can extract the following information regarding the list of frameworks we want to focus on in this section:

FrameworkUsedSatisfaction
Next.js47%4.2
Gatsby28%0.9
Nuxt22%2.7
SvelteKit15%4.0
Astro11%4.5
Remix11%4.5
Gridsome7%0.8
Quasar4%1.0

Market share​

We can gather market share data for various frameworks using the following tools:

Here is the data we can collect from the following sources as of September 12, 2023:

FrameworkBuilt WithSimilarTechDatanyzeWappalyzer
Next.js1.1M-11k212k
Nuxt531k-15k78k
Gatsby169k46k-31k
Meteor26k33k1k7k
Remix14k--4k
Marko1k--145k
Astro29k--5k
Quasar2--2k
SvelteKit---5k
Fresh---170

Summary​

Here's a summary based on the collected data:

FrameworksPopularityLove/InterestUsage
Next.js➕➕➕➕➕➕➕➕➕
Gatsby➕➕➖➖➕
Nuxt➕➕➕➕➕➕
Meteor➕➕➖➖
Astro➕➕➕➕➖
Quasar➕➖➖➖
Remix➕➕➕➕➖
Qwik➖➕➕➕➖➖
SvelteKit➖➕➕➕➖
Marko➖❓➖
Fresh➖➕➖➖
Gridsome➖➖➖➖➖
Angular universal➖➖➖➖
Solid start➖➖➕➕➕➖➖
Enhance➖➖❓➖➖

In the table above, the more ➕ symbols indicate higher levels of popularity, love/interest, or usage, while the more ➖ symbols represent lower levels of popularity, love/interest, or usage.

Please note that this summary is based on the data collected and the assessment of each framework across these different aspects.

You can find the conclusion in the next chapter.

Conclusion​

Frontend frameworks​

**React (**Popularity ➕➕➕ / Love/Interest ➕➕ / Usage ➕➕)

React is a widely adopted and highly popular solution with a large and active community.
Pros:

  • It boasts a large community of users.
  • Regular updates ensure its continuous improvement.
  • It can be easily integrated with numerous other JavaScript libraries.
  • It allows the creation of components without the need for classes, promoting functional programming.
  • Smooth migration between different versions is supported.
  • Meta backs it.

Cons:

  • The fast-paced updates and the abundance of libraries that complement React can make it challenging to select the right tools and navigate through proper documentation.
  • The complexity of learning JavaScript syntax can be a hurdle.

**Vue.js (**Popularity ➕➕ / Love/Interest ➕➕ / Usage ➕)

Vue.js shares similarities with React but also offers the advantage of being suitable for progressive enhancement scenarios and is generally considered simpler for beginners.

Pros:

  • It is lightweight and delivers fast performance.
  • It provides a user-friendly environment for beginners.
  • Detailed documentation is available to support developers.
  • Two-way data binding simplifies data management.
  • It is compatible with progressive enhancement approaches.

Cons:

  • The community of developers using Vue.js is relatively limited.
  • There is no well-established company actively supporting and backing Vue.js.

**Angular (**Popularity ➕➕ / Love/Interest ➖ / Usage ➕)

Angular remains a robust solution, although its lack of server-side rendering (SSR) support limits its usability in certain situations.

Pros:

  • It promotes object-oriented programming (OOP) style.
  • Two-way data binding simplifies data management.
  • Directives and dependency injection enhance flexibility.
  • It facilitates the creation of highly testable, reusable, and manageable applications.
  • A strong community and abundant training materials support developers.
  • Google backs it.

Cons:

  • Its reliance on object-oriented programming (OOP) can be a drawback for some.
  • Beginners may find it challenging to grasp initially.
  • The codebase can become bloated and large.
  • It may not be suitable for all scenarios, given the lack of server-side rendering (SSR) support.

**Svelte (**Popularity ➕ / Love/Interest ➕➕➕ / Usage ➖)

Svelte can be described more as a compiler than a library, which results in front-end code that doesn't rely on a large library, thereby reducing the size of JavaScript code.

Pros:

  • It is one of the fastest front-end frameworks, offering quick responsiveness.
  • It provides a beginner-friendly environment.
  • The codebase remains minimal.
  • It doesn't employ a virtual DOM, which can contribute to performance improvements.

Cons:

  • The community and ecosystem surrounding Svelte are relatively immature and limited.
  • There is a lack of supporting materials and limited tooling available.

Rendering frameworks​

**Next.js (**Popularity ➕➕➕ / Love/Interest ➕➕➕ / Usage ➕➕➕)

Next.js, similar to React on which it is built, is a popular and widely used solution.

Pros:

  • It is based on React, leveraging its benefits.
  • It supports multiple rendering techniques, including Incremental Static Regeneration (ISR) with on-demand revalidation.
  • Next.js now implements React Server Components.
  • It is supported by Vercel, a reputable platform.

Cons:

  • It shares some challenges associated with React.
  • There is a learning curve involved in mastering Next.js.

**Nuxt (**Popularity ➕➕ / Love/Interest ➕➕ / Usage ➕➕)

Nuxt.js can be considered the equivalent of Next.js for Vue.js.

Pros:

  • It is built upon Vue.js, harnessing its advantages.
  • Nuxt.js supports multiple rendering techniques, including Incremental Static Regeneration (ISR) with time-based revalidation only.

Cons:

  • It shares some challenges associated with Vue.js.
  • There is a learning curve involved in getting familiar with Nuxt.js.

**Gatsby (**Popularity ➕➕ / Love/Interest ➖➖ / Usage ➕)

Gatsby shares similarities with Next.js but may be considered less appealing. However, its recent acquisition by Netlify suggests potential for resurgence in the near future.

Pros:

  • It is based on React, leveraging its benefits.
  • Gatsby offers a robust data layer that seamlessly connects with headless solutions.
  • It is supported by Netlify, a reputable platform.

Cons:

  • Gatsby faces similar challenges as React.
  • There is a learning curve associated with using Gatsby.
  • It does not support custom backend logic.

**Remix (**Popularity ➕ / Love/Interest ➕➕➕ / Usage ➖)

Remix is a compelling solution built on React, focusing on achieving progressive enhancement.

Pros:

  • It is based on React, leveraging its capabilities.
  • It can operate without JavaScript enabled on the client side, combining Single Page Application (SPA) with Progressive Enhancement Multi-Page Application (PEMPA) to form Progressive Enhancement Single Page Application (PESPA).

Cons:

  • Remix shares some of the challenges associated with React.
  • Learning Remix also requires a learning curve.
  • It lacks support for Static Site Generation (SSG).

**Astro (**Popularity ➕ / Love/Interest ➕➕➕ / Usage ➖)

Astro is built on the Multi-Page Application (MPA) architecture, which does not support client-side navigation. However, it offers compatibility with multiple frontend frameworks and incorporates island hydration, enabling a fast user experience.

Pros:

  • It can be utilized with a variety of frontend frameworks, including React, Vue.js, Svelte, Preact, Solid, Lit, or Alpine.js.
  • Astro can be deployed on various edge platforms, such as AWS, GCP, Vercel, Netlify, Cloudflare, and more.
  • It delivers excellent performance through the implementation of Astro Islands, a technique that facilitates selective hydration and speeds up the hydration process.

Cons:

  • There is a learning curve associated with using Astro.
  • The community and ecosystem surrounding Astro are relatively immature and limited.
  • Supporting materials and available tooling for Astro are currently lacking.

What to choose?​

Have you made a decision regarding the framework you will choose?

If you're uncertain about whether to opt for a frontend framework or a rendering framework, I recommend referring to my previous article on front-end architecture for guidance.

Here are some additional factors to consider:

  • Select a framework based on its compatibility with other technologies you intend to use. For instance, if you plan to incorporate 3D elements, using Three.js would be beneficial. This library integrates seamlessly with React through React three fiber.

  • Decide a framework that suits your team's skills and expertise. If your team is already familiar with React, it might be easier to proceed with React. On the other hand, if your team has limited JavaScript knowledge, Vue.js could be a better fit. Additionally, if your team prefers a comprehensive and structured framework, Angular might be the best choice for them.

  • If you don't have a team yet, it's advisable to go with the most widely used solution, which typically means React/Next.js. This approach can facilitate finding suitable team members with relevant expertise.

Resources​

Articles:

Statistics and surveys: