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.

Bar Graph of JavaScriipt Frameworks

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

Love, hate graph for technologies

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

Bar graph of technologies

npm Download Trends

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

Download Trends

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. 

Rankings over the years

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.

Rankings of technologies by job title

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:

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

Craig McKeachie
Craig has been a professional software developer for over 20 years. He is also a published auther (The JavaScript Framework Guide) and an independent trainer and consultant specializing in React and Angular.

Learn faster

Our live, instructor-led lectures are far more effective than pre-recorded classes

Satisfaction guarantee

If your team is not 100% satisfied with your training, we do what's necessary to make it right

Learn online from anywhere

Whether you are at home or in the office, we make learning interactive and engaging

Multiple Payment Options

We accept check, ACH/EFT, major credit cards, and most purchase orders



Recent Training Locations

Alabama

Birmingham

Huntsville

Montgomery

Alaska

Anchorage

Arizona

Phoenix

Tucson

Arkansas

Fayetteville

Little Rock

California

Los Angeles

Oakland

Orange County

Sacramento

San Diego

San Francisco

San Jose

Colorado

Boulder

Colorado Springs

Denver

Connecticut

Hartford

DC

Washington

Florida

Fort Lauderdale

Jacksonville

Miami

Orlando

Tampa

Georgia

Atlanta

Augusta

Savannah

Hawaii

Honolulu

Idaho

Boise

Illinois

Chicago

Indiana

Indianapolis

Iowa

Cedar Rapids

Des Moines

Kansas

Wichita

Kentucky

Lexington

Louisville

Louisiana

New Orleans

Maine

Portland

Maryland

Annapolis

Baltimore

Frederick

Hagerstown

Massachusetts

Boston

Cambridge

Springfield

Michigan

Ann Arbor

Detroit

Grand Rapids

Minnesota

Minneapolis

Saint Paul

Mississippi

Jackson

Missouri

Kansas City

St. Louis

Nebraska

Lincoln

Omaha

Nevada

Las Vegas

Reno

New Jersey

Princeton

New Mexico

Albuquerque

New York

Albany

Buffalo

New York City

White Plains

North Carolina

Charlotte

Durham

Raleigh

Ohio

Akron

Canton

Cincinnati

Cleveland

Columbus

Dayton

Oklahoma

Oklahoma City

Tulsa

Oregon

Portland

Pennsylvania

Philadelphia

Pittsburgh

Rhode Island

Providence

South Carolina

Charleston

Columbia

Greenville

Tennessee

Knoxville

Memphis

Nashville

Texas

Austin

Dallas

El Paso

Houston

San Antonio

Utah

Salt Lake City

Virginia

Alexandria

Arlington

Norfolk

Richmond

Washington

Seattle

Tacoma

West Virginia

Charleston

Wisconsin

Madison

Milwaukee

Alberta

Calgary

Edmonton

British Columbia

Vancouver

Manitoba

Winnipeg

Nova Scotia

Halifax

Ontario

Ottawa

Toronto

Quebec

Montreal

Puerto Rico

San Juan