The Most Popular Front-end Frameworks

Welcome to our annual article about the best (most popular) front-end frameworks! This article is now in its second year of running and has been restructured (slightly) to ensure that we can continue running it for many more years to come. All the data for the framework popularity is pulled from the State of JavaScript survey. Still, this article also covers things like the current front-end trends, framework descriptions, and more!

So, what does the front-end framework landscape look like in 2023?

Here are the current standings:

If we compare this data to last year, the top five frameworks haven’t moved an inch. However, in 2022 – developers seem to have lost slight interest in both Lit and Alpine, paving the way for Solid to go up a few ranks. And we also have two new entries this year, Stencil and Qwik, which will be covered later in the article.

The only framework that didn’t make it into this years list is Stimulus (ranked #10 in the 2022 roundup), which had already been losing popularity from the previous year.

What are the current Front-end trends?

Alongside comparing framework rankings and learning about each one individually, this article also covers the current front-end trends. This section should be interpreted as a general pulse of the current front-end methods, tooling, and approaches.

It has been a couple of years since anything truly groundbreaking has happened in the front-end space, but if we had to break it down:

Hydration, SPAs, and JAMStack are at the top of the list for 2023.

Component-driven development is still a thing, and Micro Frontend Architecture (one of last year’s trends) has seen a slight decline, could it be because it’s hard?

---

Hydration

One key challenge of popular frameworks is how to make them work efficiently in the browser. When a user loads a web page, the browser needs to download all the HTML, CSS, and JavaScript, and then parse and render the page. If you have a lot of JavaScript code that needs to be executed before the page is fully interactive, the user might have to wait a long time before they can use the application.

This is where hydration comes in. Hydration is the process of taking the static HTML that was generated by the server and attaching JavaScript functionality to it on the client side. This allows the user to interact with the page right away, while the JavaScript code is still loading and running.

So, let’s say you have a React application. When a user first loads the page, the server generates some HTML that includes the basic structure of the application. Then, when the browser loads the page, the React framework “hydrates” the HTML by attaching the appropriate JavaScript code to each HTML element, so that they can respond to user events and update the UI as needed.

The benefit of hydration is that it allows you to create complex, interactive web applications that run smoothly and efficiently in the browser. By separating the initial HTML rendering from the JavaScript functionality, you can optimize all aspects of the page/app loading speed.

---

Single Page Applications

Over the past decade, SPAs have become increasingly popular due to their ability to create dynamic and responsive user interfaces.

In fact, many of the most successful modern web applications, such as Gmail, Google Maps, and Facebook, are built using SPAs. This is because SPAs enable a seamless and smooth user experience by eliminating the need for page reloads and minimizing the amount of data sent to the server.

Another reason why SPAs are popular is that they allow for a cleaner separation between the front-end and back-end of an application.

With SPAs, the front-end is responsible for rendering the UI and handling user interactions, while the back-end is responsible for providing data and API endpoints. This separation of concerns makes it easier to develop and maintain large-scale applications.

---

JAMStack

JAMstack is a unique concept for building static web pages. Rather than implementing a back-end solution for content generation, an API is used instead. The end result is that the website is both faster, but also simpler to manage from the developers’ perspective.

The definition for JAMstack:

• J for JavaScript – the language used to write front-end functions.
• A for API – requesting content (data) from third-party services.
• M for Markup – structuring the content on the web page.

As for stack, it’s the combination of tools you’re using. JAMstack can be used with any framework and service combination, so as long as it follows the JAM structure.

Learn more: Jamstack.org // WTF is Jamstack?

Top Front-end Frameworks for 2023

The following segment of this article is dedicated entirely to the frameworks themselves. The list goes down in accordance with the rankings we saw earlier. I have provided a general overview of each of the frameworks, as well as links to GitHub and the framework’s website.

---

React

React continues to dominate the front-end space. The framework stands out with its own virtual DOM, ensuring persistent app performance at scale. Likewise, the component-based structure means that development is more accessible across teams.

While the learning curve for React is moderately forgiving, the accessibility of tooling makes the process manageable. Namely, create-react-app automates the build process for an application boilerplate. And then there are React DevTools, providing an accessible debugging experience from the browser.

Thanks to the mass adoption of React, front-end developers can enjoy getting their hands on many open-source projects. For example, more than a dozen full-scale design systems are built for React. The amount of hours this shaves from the development process is enormous.

---

Angular

While Angular retains a rather large usage percentage, the interest in the framework is at an all-time low. Who knows, maybe the loyal following is because Angular is based on TypeScript? I’m just kidding, of course.

Angular provides quite a lot of flexibility for building SPA – Single Page Applications. Similar to other prominent front-end frameworks, Angular implements a Components-based development workflow. And, adds the Templates system – which manages the dynamic nature of the components.

Above all, Angular can and is being used to build apps for all platforms simultaneously. Code can be reused to be implemented in web apps, mobile projects, as well as native desktop applications. As for performance – it is optimized through SSR and Web Workers.

Is it easy to get started with Angular? Not exactly. In fact, if we look at the survey data – satisfaction with this framework has also plummeted greatly. And the main reason is the learning curve, among personal preferences.

---

Vue

Vue remains a solid choice for truly modern web development. The progressive framework has recently pushed forward its Vue 3 release. And, thanks to new features and improvements, aims to cement itself as the go-to framework to build on the modern stack.

The new release brings about some long-awaited implementations. Including a new build toolchain utilizing Vite. Improved management of state through Pinia. And a completely revamped documentation, which has piles upon piles of tutorials to get you started.

As for its popularity, Vue excels at being flexible. The framework doesn’t impose a strict routine but rather lets you decide on what you want to build.

For example, you can structure Web Components that can be reused in other development stacks, including most basic HTML templates. Additionally, Vue is often used to work on robust SPA projects due to native tooling, including – CSR, DevTools, support for TypeScript, and testing tools.

---

Svelte

So, what’s the deal with Svelte? The framework has seen quite a bit of adoption lately and even had Vercel invest in its creator Rich Harris. Fundamentally, Svelte works just like any other component-driven framework. You build components that are then used to structure the UI of your applications.

The main difference in comparison to frameworks like React is that Svelte does not need to be shipped to the browser in its entirety. Instead, Svelte apps must be compiled, which will bundle your components into a pre-made JavaScript file.

Whereas other frameworks use the Virtual DOM to render changes, Svelte compiles applications with their DOM node pre-assigned. This approach has lasting performance benefits, as showcased by Josh Collinsworth. And lastly, Svelte is quite compatible with native HTML code and doesn’t impose a strict structure.

Which is ideal for fast front-end development. Here is an example:

// Example.svelte

<script lang="typescript">
	export let name = 'Svelte';
	export let textColor = '#000';
	function reset() {
		name = 'Svelte';
		textColor = '#000';
	}
</script>

<h1 style="color: {textColor}" on:dblclick={reset}>Hello, {name}!</h1>

<style>
	h1 {
		margin: auto;
		font-family: Georgia, system-ui;
		font-size: 3rem;
		font-weight: regular;
		text-align: none;
	}
</style>

---

Preact

Meta frameworks have always been a thing. And, in this case, Preact aims to be the lightweight alternative to React. If you’ve worked with React in the past, then getting a hang of Preact will be easy. In fact, you can comfortably use components between both frameworks.

The first thing to note is the bundle size, which is 4kb gzipped for Preact, and 38kb gzipped for React. Likewise, the event system is handled through addEventListener, so you can use vanilla JavaScript to handle events.

If you’re looking for a detailed case study, I recommend checking out why Etsy moved from React to Preact. The publication is as close as it gets to measuring the benefits, and also long-term advantages when it comes to maintainability and migration stability.

---

Ember

Ember goes back so long that it predates all the aforementioned frameworks. Sure, Ember.js might be seeing a lot less usage over the years. But, it’s still a solid contender for productive app development using the MVC pattern. And, while the framework is popular among web developers, it is quite flexible for desktop and mobile apps, too.

More importantly, Ember remains in active development. And the Ember 4.0 release adds new features to keep up with front-end trends. Another thing that makes Ember special is integrated backward compatibility. As far as frameworks go, Ember does an excellent job at making sure your code doesn’t break with major changes in the framework itself.

---

Solid

SolidJS has been in active development since 2019. But, it was in the June of 2021 that the framework graduated to v1. And since, has attracted a rather substantial following. At the moment, Solid has over 14k stars on GitHub, and there is a major update every 3 months or so.

The framework is declarative and does not utilize a Virtual DOM. Rather, Solid is similar to Svelte in that it compiles components down to the actual DOM. As such, updating the state is specific to the code that uses it.

Lastly, SolidJS is heavily inspired by React. And, in many ways, there are quite a few similarities. Including the support for JSX, API for Hooks, and features like Web Components, SSR. Interestingly, it is also extremely fast.

A benchmark test concluded by Ryan Carniato shows that Solid is able to outperform Svelte, Elm, but also frameworks like Vue and Redux.

---

Lit

Lit (formerly lit-HTML and LitElement) is a web components framework maintained by Google. Lit is the framework that was used in the tech stack for Wordle. The popular word guessing game that gets millions of daily visitors. So, to summarize, Lit is most often used to build Progressive Web Apps with both simple and complex interfaces.

All the while, you get to work directly with Web Components. This approach helps to create components that don’t add any extra bloat to performance. And the runtime footprint of Lit is extremely small. Simply put, a framework like React relies on JavaScript, and Lit only implements standardized web components.

---

Alpine

Alpine.js is a JavaScript front-end framework for customizing UI behavior. And, even though Alpine resembles Vue and Angular, it’s much less demanding on resource usage. The author, Caleb Porzio, calls it, “a tap to close the hole between jQuery and React”.

Alpine works best when you’re looking to add interactions to your design, without all the overhead. For example, if you have a pre-built app design and want to add interactive menu dropdowns. Using React for basic interactive functionality is overkill.

Think of Alpine as the means to optimize your server-side web frameworks. In fact, the author himself emphasizes that Alpine yields a lot of its inspiration from frameworks like Laravel, Django, etc. Likewise, it’s the perfect lightweight solution to add jQuery-style features to static site generators: Jekyll, Hugo, etc.

---

Stencil

Stencil is a library for building reusable, scalable Design Systems. It is designed to make the front-end development process simple and efficient by providing a small runtime, a tiny API, and out-of-the-box configuration. Stencil is built to be performant and future-proof, allowing developers to build cross-framework components and design systems on open web standards.

Stencil components are Web Components, which makes them framework-agnostic and compatible with any major framework or no framework at all. With features like Web components, TypeScript support, asynchronous rendering pipeline, documentation generation, and dependency-free libraries, Stencil provides an intuitive developer experience.

Stencil supports JSX and provides a fully-typed API, built-in hot reloading dev-server, and custom utils. It also comes with a great out-of-the-box default configuration, while allowing developers to change it. The library includes a local dev-server with hot module reloading and comprehensive documentation written by the Stencil team and the open source community.

Stencil is the perfect tool for building design systems, ensuring consistent UX and brand experiences at scale. It integrates seamlessly with Angular, React, and Vue and provides an excellent developer experience with sourcemaps, zero-config, unit testing, code generation, doc generation, and types.

Developers in the front-end world are facing a number of challenges that are making their lives difficult. The biggest problem they’re facing isn’t the complexity of a particular library or rendering technique, but rather the sheer number of bad ideas that are glued together. A micro dependency system with never-ending breaking changes to glue different tools and libraries together – that’s not a great idea.

Using un-opinionated libraries that don’t scale well is also a bad idea. And some organizations are trying to stay relevant by blindly following every new fad, without considering the bigger picture of what the front-end space actually needs. This is just making the situation worse.

But the good news is that there’s one skill that is highly valued in the industry, and that’s tool selection. Being able to look at a tool and imagine how it will behave in different scenarios is a valuable skill to have. And sometimes, the simpler tool is the best one to pick.

Developers have differing opinions on the use of frameworks. Some prefer pure JavaScript, but it can get messy when the codebase becomes too large. On the other hand, frameworks provide a disciplined approach, but they can also take time away from fundamental skills.

So, in conclusion, the front-end world is facing some challenges, but the key to success is to have a good understanding of tools and to focus on practical skills rather than just trendy technologies.