What frontend framework should you choose?

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):

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:

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

Google trends

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:

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

npm trends

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:

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:

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:

 

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:

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:

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:

Market share

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

• Built With
• SimilarTech
• Datanyze
• Wappalyzer

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

Summary

Here's a summary based on the collected data:

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):

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:

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

Google trends

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:

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

npm trends

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:

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:

 

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:

 

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:

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:

 

Market share

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

• Built With
• SimilarTech
• Datanyze
• Wappalyzer

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

Summary

Here's a summary based on the collected data:

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:

• https://www.codeinwp.com/blog/angular-vs-vue-vs-react/
• https://zerotomastery.io/blog/tech-trends-showdown-react-vs-angular-vs-vue/
• https://www.ideamotive.co/blog/best-frontend-frameworks
• https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190
• https://docs.google.com/spreadsheets/d/1kODyUrTPWvz5n0fpUovRdxfXsSikVHz6T3h9Kspuk8g/edit#gid=565667122

Statistics and surveys:

• https://github.com/
• https://star-history.com/
• https://trends.google.com/
• https://npmtrends.com/
• https://survey.stackoverflow.co/2023/
• https://stateofjs.com/en-us/
• https://tsh.io/state-of-frontend/#report
• https://www.jetbrains.com/lp/devecosystem-2022/javascript/
• https://jamstack.org/survey/2022/#frameworks-by-usage-and-satisfaction
• https://trends.builtwith.com/javascript
• https://www.similartech.com/categories/javascript
• https://www.datanyze.com/market-share/frameworks-and-libraries--66
• https://www.wappalyzer.com/technologies/javascript-frameworks/