Unveiling Breakthroughs Found In The State Of JS 2022 Survey

The State of JavaScript survey is one of the most highly anticipated annual reports in the web development arena. This year's report is based on the responses of more than 39,472 JavaScript developers worldwide. The survey covers many topics, including front-end frameworks, back-end frameworks, language usage, tooling, and much more. The survey results are precious for anyone interested in learning about the current state of JavaScript development.

In this article, we'll analyse most of the survey sections so that by the end, you'll have a good understanding of the state of JS in 2022. We'll cover everything from which frameworks are most popular to which features respondents are most interested in learning. So let's get started!

👉 Table Of Contents (TOC).

• Introduction
• Demographics
• Features
• Libraries
• Usage
• Opinions
• Conclusion
• Resources

Introduction

The introduction section of the survey highlighted various new front-end frameworks competing with React, which is an exciting development. Although React has been the dominant framework for a long time, other options are increasingly becoming viable alternatives.

These new frameworks offer developers more flexibility in terms of creating their applications and providing faster performance and better user experiences. With 39,472 developers who have taken the survey, almost doubling from last year's amount, these frameworks are becoming increasingly popular among developers.

New features were introduced in this year's survey, including a comments popup.

Data Explorer

🔝 Go To TOC.

The Data Explorer section of the website is a great resource for getting a high overview of the software industry. The section provides a detailed overview of the salary and experience breakdowns.

What is quite interesting about this section is that most respondents, around 8%, have mentioned that they worked for free for a year or so. This shows how the industry is becoming increasingly difficult to break into, making it almost necessary to work for free to gain the experience required to secure a higher-paying job. Open-source work is often considered free work and would account for some of these statistics.

Fortunately, as the years of experience increase, it appears that the amount of time spent doing unpaid labor decreases significantly. This suggests that with enough dedication and hard work, one can eventually move up in their chosen field and make a better living. It's also important to note that there are many ways to gain valuable experience without having to take on unpaid labor: internships, apprenticeships, and volunteer opportunities are all great options for those looking to get their foot in the door without sacrificing their financial stability.

Demographics

🔝 Go To TOC.

One of the essential sections of a survey is the demographics section. This is where you will have information about the respondents' ages, genders, incomes, educations, and other essential factors.

Country or Region

The survey’s Country and Region section also provides an exciting picture of the responses. While the majority of responses are from the US, 17.5%, this section shows that there is also a global reach, with respondents coming from over 20 countries. This indicates that the survey has reached far beyond the US and other nations, potentially allowing for a more comprehensive understanding of the topic.

Age

The majority of respondents being within the 25-34 age range speaks to the importance of focusing on this demographic. This age group seems to be targeted specifically as they are more likely to engage actively with surveys, tasks, and such.

Many reasons could explain this result. This may be the age range of people who are most interested in the survey. It is also possible that this age range is more likely to take surveys than other age ranges. However, without further data, it is difficult to say definitively why this age range had the most respondents.

However, it is known that this age range is one of the most active and productive periods in an individual’s life. These individuals are often characterized by their ambition, drive, and desire to make an impact. They are eager to explore new opportunities.

Years of Experience

The survey asked respondents about their years of experience in the industry, and the results show that the majority have 3-5 years of experience. This is encouraging, as it suggests a good mix of experienced and newer professionals in the field.

However, a significant number of respondents had experience years in the range of 6 to 10. These individuals likely worked in the field for several years before deciding to switch careers or relocate.

Finally, a small percentage of respondents had experience years in the range of 11+. These individuals are likely veterans of the field, having worked in the industry for many years.

Company Size

The data shows that the majority of respondents work in large companies such as MAANG. This is not surprising, as a few large firms dominate many industries. However, it is interesting to note that a significant minority of respondents work in small or medium-sized companies. This indicates that there is still room for competition in many industries and that smaller firms can still find success.

Higher Education Degree

It is interesting to see that a large number of the respondents are self-taught. This could be for various reasons, such as the high cost of college tuition or a lack of availability of programs in certain areas. However, it is also worth noting that most of the respondents hold a college degree or a degree related to the field.

There are a few possible explanations for this. Firstly, it could be that those with a higher education degree tend to be more successful in their field. Secondly, higher education graduates are more likely to enter areas requiring formal training.

Whatever the reason, it is clear that there is a significant difference between the two groups. It will be interesting to see how this difference plays out in the future.

Yearly Salary

The salary section of the survey was fascinating, as it revealed some critical insights into the respondents' financial situation. The majority of the yearly salary among all respondents was 50k+, significantly higher than the national average in many countries. This could be attributed to the fact that most of those responding were from the United States.

Although the US has a higher median income than many other countries, it is worth noting that this figure still lags behind many developed nations. This suggests that even though salaries in the US are generally higher than elsewhere, many people are still not earning enough to get by comfortably.

Moreover, it is also worth recognizing how differences in skill level and experience may influence these numbers. Those with more specialized skills and experience tend to earn more than those without such qualifications, which could explain why the average salary among all participants was so high. So, there is a strong correlation between experience and yearly salary. This means that as developers gain experience, they are likely to earn a higher salary.

Gender

Of course, the gender proportion in the software engineering field is predominantly made up of men. This makes sense, as most men are naturally inclined towards the area and or interested in taking such surveys.

However, it's essential to understand that women are increasingly entering the field. What does this tell us? Well, it's hard to say for sure. But it could be indicative of a changing landscape in software engineering. More and more women are likely to enter the field and make an impact.

Of course, only time will tell how significant this shift truly is. But it's definitely something to keep an eye on.

Race & Ethnicity

The study results are pretty straightforward: white people are obviously dominating the chart. This is most likely due to various factors, including historical oppression and privilege, as well as current social structures that advantage white people, unfortunately.

It's essential to examine these results to better understand how race and ethnicity play a role in this industry. Only by understanding the problem can we begin to solve it. Otherwise, we will continue to see disparities like this one.

Features

🔝 Go To TOC.

The Features section of the website is an excellent resource for an in-depth look at the javascript language. The section provides a detailed overview of the language features. In particular, it covers the advanced features of the language, such as Nullish Coalescing and Temporal. This section is a great resource for anyone who wants to learn more about javascript or improve their language understanding.

Features Overview

In the following sections, we will go over an overview of some of the language features. These features are powerful and can help you write better code.

Temporal

As you can notice from the chart, the temporal API is the least known and least used feature in JavaScript. This is partly because it's a stage 3 ES2022 JavaScript feature, which is not yet fully supported by all browsers. However, it's expected to replace libraries like Moment.js in the future, so it's worth learning now.

The Temporal API works similarly to the Unix timestamp function and efficiently handles the different formats and complexities of date and time.

The Temporal object allows us to access information about dates, time zones, calendars and times more efficiently than ever before. This feature also ensures a consistent format across different platforms and databases, allowing for better consistency when using dates in web applications.

// Return date, eg '2023-01-11'
new Date().toISOString().split('T')[0]
Temporal.Now.plainDateISO().toString()

// Return time, eg '14:46:18.316Z'
new Date().toISOString().split('T')[1]
Temporal.Now.plainTimeISO().toString()

// Return date and time, eg '2023-01-11T14:46:31.397Z'
new Date().toISOString()
Temporal.Now.plainDateTimeISO().toString()

For more info about this feature, you can refer to the official proposal.

Nullish Coalescing

The Nullish Coalescing operator ?? is a feature in JavaScript that allows you to return the right-hand side of the operator if the left-hand side is null. This feature has proliferated in popularity among developers, with the number of people who know about it increasing from 12,586 last year to 32,998 this year.

The Nullish Coalescing operator can be handy when combined with optional chaining. Optional chaining operator ?. allows you to return undefined when accessing properties of a nonexistent object instead of erroring. This means that you can use the Nullish Coalescing operator to provide a default value for a property that may not exist.

For example, consider the following code:

const user = {};
const name = user?.name ?? 'World';
console.log(`Hello ${name}!`)

In this snippet of code, we are using optional chaining to access the name property of the user object. If the user object does not exist, or if it exists but does not have a name property, then we will get the value "World" instead of an undefined or null value. This can be useful when dealing with data that may be incomplete or missing.

For more info about this feature, you can refer to the original proposal.

RegExp: match .indices ('d' flag)

This year, a new feature, the /d flag, appeared on the regular expression (RegExp) landscape. When used in conjunction with the .match() or matchAll() methods, this flag provides additional information about each match's start and end indices in the input string.

For example, given the string "Hello world" and the regular expression /o/, without the /d flag, the match would return simply [4], the index at which "o" is found in the string.

With the /d flag, the match returns [4, 5], indicating both the start and end indices of where "o" is found in the string. This can be useful for further analysis of the matched string or extracting substrings from the input string.

With /d:

const regex = /o/dg
const string = "Hello world"
const result = [...string.matchAll(regex)]
console.log(result[0])
// Output:
// [
//   'o',
//   index: 4,
//   input: 'Hello world',
//   groups: undefined,
//   indices: [ [ 4, 5 ], groups: undefined ]
// ]

Without /d:

const regex = /o/g
const string = "Hello world"
const result = [...string.matchAll(regex)]
console.log(result[0])
// Output:
// [ 'o', index: 4, input: 'Hello world', groups: undefined ]

For more info about this feature, you can refer to the official proposal repo.

Top Level await()

The level await() feature is one of the most popular and widely used features of the JavaScript language. It has been gaining much attention since its introduction in 2021, with users increasing from 9638 last year to 32699 this year. The await() keyword is the most commonly utilized feature from the async/await package.

Suppose we want to import a module at the top level of our code. Without using await(), we would need to write some complicated logic to ensure that our code only runs after the module has been imported. We can make our code much simpler by utilizing await(). All we need to do is add the keyword “await” before the statement that imports our module, as follows:

const dynamicModule = await import(`./moduleName.js`)

By doing this, our code will wait until the module has been imported before proceeding any further. This ensures that any further instructions in our code will only be executed once the module is ready for use.

The top-level await() feature thus helps us to avoid writing complex logic and makes it easier to ensure that asynchronous operations are carried out in the intended order.

For more info about this feature, you can refer to the official proposal repo.

Private Fields

The private fields feature of ES2022 has been one of the most popular additions to the JavaScript language this year. It allows developers to create fields, methods, and accessors that are accessible only within a given class. This is a handy tool for controlling data flow within a program and ensuring that specific components remain secure.

The number of developers familiar with this feature has been overgrown since it was made available in 2019, rising from 10,080 to 26,925 in just one year. With this rapid uptake, it is clear that developers have come to recognize the value of this feature in creating secure and well-structured JavaScript programs.

There are several advantages associated with using the private fields feature. For example, it can help reduce the risk of data leakage by restricting access to sensitive information within a program. Additionally, it can help make programs easier to debug by allowing developers to more easily identify where variables are being used and how they interact.

class Color {
  #name
  constructor(name) {
    this.#name = name
  }
  static check(object) {
    return #name in object // Ergonomic brand checks for Private Fields
  }
}
let color = new Color("red")
console.log(Color.check(color))
// Output:
// true

For more info about this feature, you can refer to the official proposal repo.

WebXR Device API

The least known and least used feature of the Browser is the WebXR Device API. It is a group of standards which are used together to support rendering 3D scenes to hardware designed for virtual worlds (virtual reality or VR) or for adding graphical imagery to the real world (augmented reality or AR). All you need to know about this API is that three js used it under the hood.

For more info about this feature, you can refer to the official MDN web docs.

Websocket

The most known most used feature of the Browser is Websocket.

Websocket is a powerful feature that has become essential in modern web development. This feature allows applications to establish a two-way communication channel between the client and server. We can create real-time applications such as chat apps, multiplayer games, and more with WebSocket.

The Websocket API makes it possible for the client and server to communicate with each other without the need for continuous polling of the server for new data. This means that data can be exchanged quickly and efficiently between the client and server, resulting in faster page load times and improved user experience.

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', (event) => {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', (event) => {
    console.log('Message from server ', event.data);
});

For more info about this feature, you can refer to the official MDN web docs.

Knowledge Score

It's interesting to see how much people know about the language features. It's clear that there is a lot of variation in knowledge levels, with some people knowing a lot about specific features and others knowing very little.

The chart shows that 2% of respondents know about 10-20% of the language features, while 20.8% know about 60-70%. This means that there is a lot of room for improvement when it comes to people's understanding of the language.

This suggests that a significant number of people are interested in learning more about the language.

Libraries

🔝 Go To TOC.

The Libraries section of the javascript survey provides an in-depth look at the javascript ecosystem. The section is divided into six parts, each providing a detailed overview of different aspects of javascript development, including front-end frameworks, back-end frameworks, tooling, and much more.

Changes Over Time

React

It's been a few years since React had some adverse opinions directed towards it. But it seems like they're finally recovering from that, as demonstrated by the current update to their docs. They're now suggesting using functional programming through webhooks instead of classes and object-oriented programming. This shift in focus could be just what React needs to regain its place as one of the top JavaScript frameworks.

It's worth noting that while there's always room for improvement when it comes to performance, React's current performance gains have been impressive. Over the past year alone, there have been improvements in runtime speed, indicating that even more performance gains are likely on their way.

With its focus on functional programming and continual performance improvements, there's no doubt that this trend will continue into 2023 and beyond.

Webpack

Webpack is facing considerable negativity. I don’t know the exact reason for this, but the fact that we see a sway toward negative opinions is interesting enough that I’ll want to see where it goes in 2023.

Tsc cli

Wow, what a change in perception. Its usage has dipped a bit, but the impression of it is now going toward the "negative opinions" territory. I still use it personally on several projects, and it does exactly what I need, but I get that there are better tools these days.

Vite

Vite is facing considerable positivity. It looks interesting enough that I’ll want to see where it goes in 2023.

Svelte

Svelte is also facing considerable positivity.

Ember

Although Ember is still in the negative opinions territory, it seems to be heading toward positive ones.

Library Tier List

Vite, esbuild, tsc cli, Next.JS

These frameworks are still ranked as S tier.

Svelte

Svelte ranked up from A tier to S tier since last year.

Cypress, Jest

These tools ranked down from S tier to A tier since last year.

Npm, React, Storybook

These frameworks and tools are still ranked as A tier.

Retention vs Usage

• React, Webpack, and Jest are safe technologies to adopt as they fall into the high usage, high retention region.

• Svelt is still in the low-usage region.

• Angular is still in the low usage, low retention area.

Front-End Frameworks

Ratios Over Time

Usage

React continues to dominate the front-end usage space, with 81.8% of respondents indicating they are using it in their projects. Angular was also popular, with 48.8% of respondents indicating they used it in their projects. Third, comes Vue.js, with 46.2% of respondents indicating they used it in their projects.

Interest

Svelte continues to dominate the front-end interest space, with 69.8% of respondents indicating they are interested in it. Solid was also popular, with 65.7% of respondents indicating they were interested in using it. Third, comes Vue.js, with 50.7% of respondents indicating they are interested in using it in their projects.

Awareness

Nearly all respondents indicate they are aware of React and Angular. 93.5% of the respondents are aware of Svelte.

Two new frameworks emerged this year called Qwik and Stencil. Let's see what the future holds for these frameworks.

Experience Over Time

React

There is a slight increase in terms of people who wanted to use react again. This is probably due to the new docs and performance improvement.

Svelte

There is a slight increase in terms of people who want to use Svelte.

Vue

There is a noticeable decrease in people who want to use Vue again.

Solid

There is a slight increase in terms of people who want to use and learn Solid.

How happy are you with the state of front-end frameworks?

There is a slight increase in satisfaction with the current state of front-end frameworks from last year.

Rendering Frameworks

Usage

Next.JS continues to dominate the front-end usage space, with 48.6% of respondents indicating they are using it in their projects. Gatsby was also popular, with 23.3% of respondents indicating they used it in their projects. Third comes Nuxt, with 18.1% of respondents indicating they used it in their projects.

Interest

Astro continues to dominate the front-end interest space, with 67.3% of respondents indicating they are interested in it. SvelteKit was also popular, with 65.2% of respondents indicating they were interested in using it. Third comes Next.JS, with 50.7% of respondents indicating they are interested in using it in their projects.

Awareness

Nearly all respondents indicate they are aware of Next.JS. There is a tight between Nuxt and Gatsby at 84.5%.

A new framework emerged this year called Docusaurus. Let's see what the future holds for this framework.

Experience Over Time

Next.js

There is a slight increase in terms of people who want to use Next.js again.

Nuxt

There is a slight decrease in terms of people who want to use Nuxt.

Gatsby

There is a noticeable decrease in people who want to use Gatsby again.

Remix

There is a slight increase in terms of people who want to use and learn Solid.

Astro

There is a noticeable increase in people who want to use Astro again.

How happy are you with the state of rendering frameworks?

There is a slight increase in satisfaction with the current state of rendering frameworks from last year.

In a similar manner to Front-end Frameworks and Rendering Frameworks sections, you can explore the remaining sections.

Usage

🔝 Go To TOC.

JavaScript/TypeScript Balance

As we can see from this section, the majority of respondents, at 28%, are coding in pure TypeScript. This is no surprise given the prevalence of TypeScript usage in enterprise-level industries such as Microsoft and its strong presence among streamers preaching the language.

In addition to TypeScript usage, 11.1% of respondents reported coding in pure JavaScript. Although this number may seem small in comparison, it does NOT reflect a growing trend of developers shifting away from vanilla JavaScript to code in TypeScript.

In my opinion, one way to further demonstrate this trend is by looking at the data for respondents using React, the most popular framework, with TypeScript or JavaScript. However, this data is not currently available. I suggest having this chart as part of the survey in upcoming years to get a more accurate picture of the state of JavaScript flavors.

JavaScript Usage

When asked what context they primarily use JavaScript, 84.7% of the respondents reported using JavaScript professionally. This is a powerful figure, showing that JavaScript is widely used in a professional setting. This is likely because JavaScript is a universal language that can be used for front-end development, server-side programming, and mobile app development, as shown in the next section.

Interestingly, 8.3% of the respondents reported using JavaScript as a hobby. This includes people who are self-taught or those who have received some formal instruction but do not consider themselves professional users of the language. It’s possible that this group is growing, as more resources than ever are available for learning to code, including free online tutorials and courses. This is good news for the future of JavaScript, as it suggests that more people are interested in learning the language.

What do you use JavaScript for?

As we can see from the data, 98% of respondents reported using JavaScript in front-end development. This is not surprising, as JavaScript has been the top language choice for web development for many years.

Application Patterns

As we can see from the data, 91.3% of respondents reported using JavaScript for single-page applications. Again, this is not particularly surprising, as JavaScript has been the top language choice for web development for many years. What is interesting, however, is just how popular certain libraries and frameworks have become.

React, for example, is used by most developers surveyed, as mentioned previously. This is likely because React provides a more efficient way to create dynamic user interfaces and single-page applications. React is also easy to learn and use, making it a popular choice for SPAs.

Another popular library is AngularJS, which nearly 40% of respondents use. AngularJS is a robust framework that allows developers to also create single-page applications. Additionally, AngularJS is easy to learn and use, which has made it a popular choice for web development.

Opinions

🔝 Go To TOC.

One of the things that strikes one immediately is the responses' tonality. They're somewhat positive, with nearly 57.8% of respondents saying that Javascript is heading in the right direction. This is a slight increase from last year when 57.5% of respondents felt that way.

However, the difficulty of building JavaScript applications doesn't improve in general. When asked about specific aspects of Javascript, 28.1% of the respondents agreed that building javascript apps is overly complex, up from 27.3% last year.

The pain points of javascript are becoming more and more evident as the language evolves. In the survey, 49.7% of respondents said that code architecture is overly complex to manage. This is a huge issue because as the codebase for a project grows, it becomes increasingly difficult to keep track of everything and make changes without breaking something else.

With more complex architectures come more complex dependencies as well. Developers must carefully manage which packages they use and how they interact with each other. It's no wonder that nearly 47.4% of respondents cite managing dependencies as one of their most significant pain points.

The fact that 43.8% of respondents chose state management as a key pain point is also unsurprising. With powerful tools like Redux and MobX, state management can become complicated. Keeping track of all the different states within an application requires a lot of forethought and planning, resulting in a steep learning curve for us as web developers.

All these issues combine to create a unique set of challenges for modern developers working with JavaScript. However, despite all the difficulties, it's important to remember that JavaScript is still one of the most powerful web development languages out there. It's essential to tackle any pain points head-on and stay up-to-date on best practices so you can make the most out of your code!

The survey also reveals that static typing is seen as one of the most important features currently missing from the language. 55.7% of respondents said that static typing was the most important feature missing from JavaScript.

It's clear that there is a strong demand for better type-checking in JavaScript. This is why the TC39 proposal has been gaining momentum in recent years. However, suppose static typing is going to be adopted. In that case, it needs to be done in a way that doesn't add too much complexity to our codebase and allows us to refactor easily; also not mandatory. Until then, we will have to rely on third-party tools like JSDoc or Flow for type annotations or explore alternative solutions such as linting tools.

As you may know by now, static typing can help improve code quality and reduce errors, so it's no surprise that developers are clamoring for it. However, it's important to note that there are drawbacks to using static types as well. For example, they can add complexity to code, make it more difficult to refactor, and look bloated, as shown in my previous article. Also, remember that not everyone is in favor of adding static types to JavaScript; some, me included, believe that the dynamic nature of the language makes it unique.

Though, the decision is up to you as a developer. If you think static typing would benefit your project, then go for it! Just keep in mind that there are tradeoffs to consider.

The survey also highlights that 62.4% of the respondents are happy with the general state of web technologies. This is a slight increase from the 61.9% who were happy with the state of web technologies last year.

The survey also shows that there is a slight disappointment with the general state of JavaScript, with 61.2%, me included, of respondents feeling optimistic about this area, down from 61.7% from last year.

Conclusion

🔝 Go To TOC.

Looking ahead to the next year, there is reason to believe that the positive trend will continue. The survey results show developers are generally optimistic about the future of Javascript. Whatever your thoughts on the state of Javascript may be, it's clear that it's here to stay and will only get more popular.

What do you think about the results of the survey? is static typing something you're interested in using? Or do you think the benefits don't outweigh the drawbacks? Let me know your thoughts in the comments below!

Resources

🔝 Go To TOC.

[0] stateofjs.com. The state of JS 2022.

[1] stateofjs.com. The state of JS 2021.

[2] tc39 on Github. ECMAScript Finished Proposals.

[3] mozilla.org. MDN Web Docs.