JavaScript Frameworks in 2022

December 04, 2021 in Web Development Articles

Written by Craig McKeachie

---

This article reviews the state of JavaScript frameworks in 2022. We begin with a look at their relative popularity and adoption and provide some key insights behind the statistics. Next, we examine the more technical aspects of each framework including syntax, API, innovations, and commonly used programming languages and software/programming methodologies. Finally, we explore the future of the frameworks and what trends and pushback we are seeing in their adoption.

Popularity/Adoption

There are numerous sources for insight into the popularity and adoption of JavaScript frameworks including Stack Overflow's Annual Developer Survey, download trends on npm (the JavaScript package repository), Thoughtworks Technology Radar, and the State of JavaScript Survey. Let's walk through each.

Stack Overflow Annual Developer Survey

The Stack Overflow Annual Developer Survey is the most reliable source of information as it has the over 80,000 developers completing it each year from diverse technical backgrounds. The most relevant parts of the survey are the Web Frameworks sections, in particular the Most popular technologies, as well as the Most loved/dreaded, and wanted frameworks.

In 2021, React.js surpassed jQuery as the most used web framework and Angular and Vue.js continue to increase adoption.

Newcomer Svelte takes the top spot as the most loved framework. The blue is loved. The purple is dreaded.

React is the most wanted, desired by one in four developers. Vue.js is also appealing to many developers.

npm Download Trends

Each data point on this chart represents the number of weekly downloads for each of these frameworks.

What surprises most people is the large lead React has over the other two major JavaScript frameworks. To better understand why this is the case, it is important to realize that not all the frameworks have the same number of use cases (jobs).  React is not only compelling for creating web applications, but also websites and native mobile applications for iOS and Android (with React Native). This effectively gives React three full-time jobs to Angular's one (web applications).  Vue.js has two jobs (web applications and web sites).

Also, it is important to point out that both Angular and Vue.js are newer and their adoption is still growing rapidly with double the downloads of two years ago. Each framework is downloaded nearly 3 million times a week. In summary, Angular and Vue.js are still excellent framework choices.

One last thing to consider is that in my experience, Angular is used considerably more in large companies.  These companies often have an internally hosted npm repository for security reasons where developers can download only approved libraries instead of getting the open-source code externally from npm.  This can easily mean one download should have counted as 10,000 downloads (some companies employ a lot of developers!), so I believe the numbers get skewed.

State of JavaScript Survey

The State of JavaScript survey is another excellent industry survey to help us find which libraries developers want to learn next, which have the best satisfaction ratings, and much more.  The latest results were from the year 2020 at the time this article was written. The story these numbers tell is largely the same as the Stack Overflow Annual Developer Survey. To summarize: There are three clear leaders: React, Angular, and Vue.js. The best way to see this is to visit the site and click on usage. The other framework to keep an eye on is Svelte, which I talk about more in the last section of this article. Svelte now has a slight lead over React in terms of satisfaction and interest. 

The State of JavaScript survey tends to receive more participation from self-identified front-end developers than Stack Overflow's, although the most respondents still identify as full stack developers.

Thoughtworks Technology Radar

The Technology Radar from Thoughtworks is more opinionated, granular, and cutting edge in its evaluation of technologies and is great to look at as well.  They are giving an Adopt recommendation for React Hooks (they feel strongly that the industry should be adopting these items) and a Trial recommendation for React Query. These are both interesting technologies that Accelebrate's customizable React training can include.  In summary, even if your team has been using React for a while, consider an updated training on using React Hooks and React Query to modernize your React skills.

Technical Analysis

JavaScript frameworks are more similar than they are different. After all, they are doing the same thing: making it easier to create a web application in JavaScript. A great way to see this is to watch this YouTube video that builds the same application in each of the frameworks in 10 minutes.  The video goes on to show the same application being built with 6 other frameworks that aren't as common, but you can get the idea in the first 10 minutes and see all the syntax differences, which I will elaborate on momentarily.

The YouTube channel that created the above video, Fireship.io, is an amazing resource for keeping up on new technology. They commonly present 100-second videos on new technologies and don't waste your time. Here are four 100-second videos on React, Angular, Vue, and Svelte to convince you:

• React in 100 Seconds
• Angular in 100 Seconds
• Vue in 100 Seconds
• Svelte in 100 Seconds

After watching a few of the videos, you quickly see how these frameworks differ from one another. Let me highlight some of these technical differences, particularly in the syntax and APIs:

• React embraces the functional programming aspects of the JavaScript language and eschews object-oriented programming.  Angular embraces object-oriented programming and uses classes and aspect-oriented-programming (decorators) as the cornerstones of its API.  As a result, programmers coming from a Java or C# background initially tend to find Angular easier to understand. JavaScript programmers find themselves at home with React because of its familiar functional programming style. To be clear, I don't believe Angular's syntax is necessarily better than React, I just think Angular can be a steeper learning curve for programmers who aren't as experienced using JavaScript.
  
  
• Angular uses TypeScript as the primary language for development.  TypeScript was authored by Anders Hejlsberg who is also the lead architect for the C# language (which is similar to Java).  Accordingly, TypeScript feels natural to developers with experience in C#, Java, and other object-oriented languages. Don't assume this means object-oriented developers should choose Angular or all React applications should be written in JavaScript. Initially, React developers favored using JavaScript instead of TypeScript, but over the last several years it has become commonplace to build React application using TypeScript as React developers who started in JavaScript are understanding and embracing the benefits that come from having a strongly typed language.
  
  For example, instead of typing all your import statements manually in a React application written in JavaScript, you type none of them when using TypeScript.  Another myth I would like to dispel is that TypeScript is difficult to learn. TypeScript is a superset of JavaScript so most of the things that TypeScript enables in JavaScript are part of the new features in JavaScript itself like classes, modules, and arrow functions and you will need to learn these regardless of the choice between React and Angular or JavaScript and TypeScript.
  
  
• One of the most insightful quotes I've seen about JavaScript frameworks is:
  
  Angular continues to put "JS" into HTML. React puts "HTML" into JS. – Cory House
  
  The point being that the syntax of Angular is going to be favored by developers who don't know JavaScript extremely well and the syntax of React or Vue is going to be favored by developers who are familiar with JavaScript or perhaps learned Python as their first language. Given this, be aware of your bias when evaluating which framework to use.
  

Future

Angular, React, and Vue are the current popular choices for a JavaScript framework. What about in the future?  Looking into my crystal ball (which has admittedly not been 100% accurate in the past), I think the most likely to succeed framework (after it graduates from high school!) is Svelte.

Svelte

Svelte has innovated in several significant ways including having less code, being a compiler and not a framework (resulting in the framework disappearing when built for production, and lastly being truly reactive.

Less Code

Even in the simplest example, Svelte is 9 lines of code compared to 21 lines of code in React and 18 lines of code in Vue.  This difference becomes significant over even a medium-sized code base.

Tiny Applications (Compiler Not a Framework)

Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.  Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Truly Reactive

Instead of complex state management APIs (React Hooks) or libraries (Redux), Svelte builds reactivity into the DOM itself, which is innovative and results in less code, easier to understand code, and faster code.

Conclusion

This article has summarized JavaScript Frameworks as we enter 2022, including numerous resources that you can use to evaluate them for your development needs.  In addition, I have summarized and analyzed these resources and provided some insights about JavaScript Frameworks that you may not have considered yet as you evaluate your future technology roadmap.

Accelebrate offers customizable JavaScript training courses in all the technologies mentioned in this article and they are listed below for your convenience. Most notably our React curriculum stays current using the TypeScript language (if requested), uses React Hooks instead of class components, and provide forward-thinking alternatives to Redux including React Query. And we offer Angular, Vue.js, and Svelte courses as well.

---

Written by Craig McKeachie

---