In this article, we will address the current front-end trends, explore current and upcoming frameworks, and weigh the pros and cons for the most popular ones.

---

The annual State of JavaScript survey has concluded for the year 2021. A little bit late with its arrival, but better late than never. Sacha Grief explained it by saying, “A lot happened in 2021. So much in fact that the survey was pushed back all the way to 2022!”.

I am not complaining. The important thing is that we have fresh data to look at. And, in this latest survey, there are a ton of goodies. But, we will be focusing on a specific data set. And that is the popularity of front-end frameworks. What is the current web developer stack?

the state of js 2021: Front-end frameworks and libraries

Well, this isn’t a big surprise. For the 5th year in a row, the golden trio – React, Angular, and Vue – continue to dominate the front-end framework market share.

It’s worth noting that these stats are based on usage. If we look at satisfaction, Angular has lost more than 20%, React about 10%, and Vue about 10% also. And the interest for the big three has also subsided by roughly 20% over the last couple of years.

But, that is to be expected. Front-end frameworks have always had a fragile lifespan to them. Interestingly, Svelte has been picking up some steam over the last 2 years. Is it going to be the next big thing? I’d keep an eye out because the consensus is quite positive.

What are the current Front-end trends?

I think implying that, “this is the best front-end framework”, is a bit ingenuine. Sure, some frameworks do better than others, and they are the best for a specific use case. But, in reality, there is a reason why multiple front-end frameworks are able to be popular at the same time.

So, the real question is – what are the current trends in front-end development?

---

Micro Frontend Architecture

Micro-frontend architecture decouples a full-scale application project into manageable “micro apps”. In other words, micro-frontend makes it possible for developers with various backgrounds to work together on the same project. If someone is more proficient with Vue and TypeScript, it shouldn’t force other developers into the same technology.

As such, micro-frontends can be used to combine together multiple technologies while retaining the same product roadmap. Additional benefits include faster development pace, fewer problems with deployment, and versatility in framework preference.

Naturally, there are drawbacks such as more complex testing, config management, and integration of accessibility standards. But, despite the challenge – a lot of front-end teams are adopting the micro-frontend approach because it works in practice.

Component Driven Development

CDD is nothing new, the trend has seen mass adoption since several years ago. But, despite having been around for a while – CDD continues to dominate the front-end landscape.

In short, component-driven development is the process of structuring an application around modules or components. Each component has a specific role within the design of the application. And, as such, the component itself can be managed or completely removed without causing problems in a production environment.

React.js is the prime example of a framework that fully embraces components. And, it doesn’t come as a surprise to see that the top front-end frameworks all embrace the component/template style development.

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 2022

Let’s take a closer look at the front-end frameworks dominating the landscape. We know who the big players are, but what about newcomers? Alpine, Lit, and Solid are all showing promising usage percentages. And we definitely want to know more about Svelte.

---

#1: 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 a large number of open-source projects. For example, there are more than a dozen full-scale design systems built for React. The amount of hours this shaves from the development process is enormous.

#2: Angular

While Angular retains a rather large usage percentage, the interest for the framework is at an all-time low. Who knows, maybe the loyal following is due to the fact that 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 is used to manage the dynamic nature of the components.

Above all, Angular can and is being used in building apps for all platforms at once. 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 for this framework has also plummeted greatly. And the main reason is the learning curve, among personal preferences.

#3: 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.

#4: 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 which then are 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 have to 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>

#5: 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 is going to 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.

#6: 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 towards 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.

#7: 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. To put it simply, a framework like React relies on JavaScript, and Lit only implements standardized web components.

#8: Alpine

Alpine.js is a JavaScript front-end framework for customizing UI behavior. And, even though Alpine has resemblances that of Vue and Angular, it’s a lot 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 sites generators: Jekyll, Hugo, etc.

#9: Solid

SolidJS has been worked on 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 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.

#10: Stimulus

And lastly, at least for this year, we have Stimulus. A minimal JS framework, provided to the community by Basecamp. One of the first things you’ll notice is that it has similarities with Alpine. In other words, Stimulus tries to be the modest alternative to jQuery.

The framework is best used to enhance the HTML that you’re already using as part of your page structure. Stimulus lets you optimize your HTML elements by adding JavaScript data controllers. These are interactive and dynamic functions, useful to enhance form submissions, button appearance, and more.

If there is one takeaway from this year’s trends, it’s that developers are looking to further simplify things. This is quite evident through frameworks like Lit and Solid. While React has a great ecosystem, it’s not always needed to build simple SPA and PWA apps.

I also believe that the trend is quite evident in and of itself.

Angular was once the best thing ever, but what came off it turned developers away. So, it comes as no surprise that Vue, React, and Angular is losing developer interest.

And, smaller but precise alternatives are gaining popularity.