The State of JavaScript

Welcome to SyntaxToday. We've got the state of JS, the state of JavaScript. This is a survey that goes out every single year, and what we like to do is kinda go through it and get an idea of where is the industry at. It's always interesting to take a look at, what are people actually using? What are people building with? What is sort of coming up on the horizon? It gives you a nice little look on into it. So we're gonna check it out. This is the Scott of js survey at stateofjs.com.

Real quick, before we get into it, let's talk about Sentry, at sentry.ioforward/ syntax.

Sentry's gonna help you figure out errors on your website, any performance, slowdowns, and help you fix issues on that. So if you got a slow website, whether that's something on the client side, whether that's a database query that is abnormally slow you know, sometimes, oh, this database query is being fine, but all of a sudden, boom, this is taking 3 seconds to actually run. Might be something going on there. Session replay, really cool, which gives you a video like replay of what the user was doing to hit a specific bug as well as code coverage. Now it gives you some stats on are your Wes covering all of your Node? Check it out. Century.io forward slash syntax.

Alright. Let's take a look at Scott of JS. First thing we have here on the left is

libraries. Sorry, Wes. Yep. Before we get into the actual state of JS, can I tell you about the state of JavaScript Twitter Sanity football?

No.

Yes. Tell me. Yes. I I know you don't care about fantasy football or football for a genre, but let me tell you. Thing I would like to hear about. I would rather play a board game. I don't think the audience cares either. But I just wanna say, for record here, I am terrible at Sanity football. I lose every time, and I lose specifically because I only pick Detroit Lions. Well, let me tell you. I joined a Sanity football league with, like, Ken Wheeler type craft, you know, Ian Landsman, Adam from Terminal, a bunch of, JavaScript dudes, and I won. I won the whole thing. I won the championship. I won the playoffs. I never get anything other than last place in Sanity football, and I just wanna take this second to say I won the whole dang thing. So that is the state of JavaScript Sanity football for anybody who cares. And I just wanna say, the Lions the Lions propelled me to an epic victory Vercel. And I I'm just gonna take them ESLint Node for any of the, any of the the the folks in the league who are listening to this Node, so thank you. Alright.

Let's get into the actual stuff here. Alright. Let's start off with the features, specifically syntax features. Which of these syntax features have you used? 85% of people using nullish coalescing and nullish coalescing is really cool if you haven't used it before JS if you have a variable that is possibly null or undefined, you can use the double question mark to sort of provide a fallback.

That is better than using a ternary ternary. I can never say it. Ternary. Ternary, which will detect if something is falsy. And the difference between null and undefined and falsy values is that, 0, empty string,

and several others are are also faulty, which is often not what you want. So Yeah. Knowledge coalescing seems like almost everybody's using it, which is really cool. Yeah. I like knowledge coalescing. I like to use it. The you know, I do find myself oftentimes just doing the double ampersand instead, but I I do use knowledge coalescing.

Dynamic imports, surprisingly, a lot of people using dynamic imports, which I don't find myself using that much for some reason, even though I thought that I would before dynamic imports are a thing Wes, that import is a a way to do a a non static import and and, in fact, you're doing the import somewhere within the JavaScript, not at the top of the file, and you're Yeah. Not JS in promise to import that code. I'm redoing my my website right now, and

I have to use dynamic imports to import the markdown for each of the files.

And the reason I didn't do that is because I'm I'm using Next. Js, and I need, like, a listing of all the blog posts, like, initially. Right? So what I do is I run a big loop, and I just run through and import every single file in there. And it's a pain. Dynamic imports are really tricky because like, partially because, like, when you deploy something to a serverless environment by the import tree, they will figure out which pieces are needed, and they'll try to take the rest out and and tree shake it.

But with dynamic import, they have to try to figure out, oh, you're going to need this not at build time, but on demand. So they have to figure out which parts you need. And if the name the part of your dynamic import is like a variable, then it gets a little bit tricky, and and it's like webpack hell all the way down. So Yeah. Try to avoid dynamic imports if you can. It's not of course, it's not always totally possible because you don't know those things, or

the thing is is much larger, and you don't wanna have to import it until you need it. Number 3 on here is private fields and classes. This is a class based thing. You know what? Since I've started using classes more often, I'm using private fields. I'm using this. So I'm on here as somebody who's added classes to their their skill base, I guess. I don't know. I use classes now. Classy guy, Scott. I got classy. And I like my private properties.

So I I use this feature, which I wouldn't have said last year. New Yarn, new me. Right?

Logical assignment.

Oh, I don't know that. I've I've used this before. Let me tell you. I had the same reaction. I I haven't happiness. Equals? So logical assignment is if something is a falsie, which we just talked about. Right? So their example is if a, variable title is empty, then you can do pipe pipe equals, and that will set the default to 10.

That's interesting. Have never seen that. Man, I feel like I'm pretty dialed on this stuff too. Same. Yeah. Wow. What's the the browser support for that? Here. I guess I could open it here. Can I use logical assignment?

Full support, beta. 95%.

It's been in every browser for a long time. Wow. I'm very surprised I had never heard about that's why I love going through these things JS because even folks like us whose whose job it is to stay on top of the stuff, there's there's things you never come come around.

Hashbang grammar, 20% of people using it. This is the ability to provide a path to a specific JavaScript interpreter.

So, like, if you were to run, like, a a JavaScript file from the command line, you can instead of saying node run dot ts, you can just put the, environment up at the top.

I don't know. That's more for, like I every now and then, I've used that, but that's more for, like, c and and bash scripts.

Yep. And the next one here, error Scott cause, which allows you to specify, the origin of the cause of the error. And I didn't use this either. I'm interested in this, but I have not used this. Their example is when they're throwing a new error inside of a catch, they're saying that the cause is of the initial error. So that way, you can it's not like you're throwing an entirely, I mean, you are throwing a new error, but you're saying it originates from this other error, which I think is interesting. Yeah. I definitely need that because

half the time, like, you you get a stack trace, and the stack trace is showing you where the error was logged. And it's like, no. I wanna know where the error was was initially thrown. I know you caught it so you could provide some nice nice use case for that, but I need to I'm I'm sure the folks at Sentry

are really happy with this one. Yeah. Well, since the and since we started doing async await and try catching everything, it's like it feels more necessary.

String features, replace all. That's a Match all. That's a killer one. Right? Match all. That's a killer one as well. And match indices.

This will store the start and end positions

of each matched capture group. Have not used this, but that sounds useful. That sounds useful to me. What is

oh, yeah. Yeah. Yeah. I've I've used this, where you can get the pieces of the matched array.

Yeah.

I like that. Oh, likewise, array features, we have you know what? It's so funny. We see these bars go all the way to the right, and you think, oh, a lot of people must use this. But it's only 40% of people who have responded actually use this array Scott to sorted. I have not used to sorted.

I know you you've talked about it before.

It's it's basically the same as sort without mutating the original array. I I pretty much always just use sort, but, to sorted seems like much more up my alley considering Yeah. Most of the array methods I use are, you know, nondestructive.

So I was working on my my website, and I had a array of blog posts. And every time I saved the file, it would reverse the blog posts. I said, what the hell is going on? And it's because I was taking the array and sorting it based on on whatever we had, but it would just every every single time, it was actually mutating the original array. So anytime you do something that needs to be deterministic, it should be, like, what's called, like, a pure function, meaning that, like, you always get the same result every single time. So dot two sorted is I I would go as far to say just use Scott two sorted by default because you shouldn't be mutating your original data unless you explicitly want to. So use all of the immutable methods on an array.

And, so another example is splice. Splice will modify the original array, whereas splice will not. So now we have dot to splice, which is number 4 at only 20% of people using it.

Cool. Yeah. I you know what? I never think about these. For some reason, I just always use because it's like you you have so much, you know, mental I don't know. That's the way I've always done it. Right? Yeah. Yeah. You just in splice. It's like, well, now I gotta remember these other ones even exist. But, yeah, it makes sense.

Definitely.

Number 2 is find last.

This will allow you to search an array beginning at the end. So, previously, you would first reverse the array and then find it. So that's that's really handy. To reverse will reverse it.

Array dot width will I I did a video on this, and now I'm I'm blanking on what it is. Returns a new array with the element at a given index.

Oh, so it's like value. Yeah. Yeah. So you can

how is that different than

I You know what? Here's what I would do in the same situation. I would create a new array first, and then I would then replace the item at that index with the classic style. And I I don't know that this I didn't know this existed. So yeah. What makes it better? Is it a shorthand? It's probably just a shorthand, but still No. It's not. It's it's the mutating versus splicing. So here. Let let me open up my But what I would do, like I said, is I would create a new event. Yeah.

I see what you mean here. Let's let's do a quick example right here. So Scott people is equal to hey. Look at this. I already got 1 in my Nice. My dev tools here. So we have Scott. We have Wes, and we have Snickers, then we have Sunny. That's I always go for these. Right? Yeah. I do too. Yeah. So we have people dot with 2 and 3.

That gives you 2, 3, and oh, what?

Oh. It's swapping the the 2nd position.

Not a ESLint.

Okay. So that's really handy if you want to replace an item of an array versus having to take it like Scott just said, take a copy and replace that item or spread everything before. Put the 1 in you want and spread it after. Man, I can't I literally have a video on this, and I was, like, blanking on what that was for. That's good. K. Only for some features. We're getting too much stuff. It's all great. Yeah.

And array dot from a sync, is similar to array dot from but for async iterators.

That's really Sanity. If you've ever tried to take an array that is a generator, and you're just like, I don't I don't care about this next next next done thing. I just want an array of the actual values from async is, gonna be handy for that. Async features. You know, number,

4 on this list with only 13 people responding have using it, which is 0.1% is top level await. Node. I'm surprised by that. I've used top level await. People? 13 people.

Wes written in.

Yeah. Maybe. I used top level await this year. It's not super well supported. It's kind of obnoxious sometimes. It causes Safari to lose its mind. I will tell you, there is a long standing bug about Safari and top level await, and it's just like pretty much makes using it, not so much fun, in certain situations. So, yeah, top level await. Yeah. It does say it's supported, but, hey, man. I couldn't get it to work no matter what I did Really? With Safari. Safari specifically, there's a there's a there's an open issue about it on GitHub, and there's not a whole lot you can do.

The funny thing about a lot of this stuff is people will be like, oh, I've been using it for forever, and people don't realize that the bundler is is actually doing a lot of the the heavy lifting under the hood. Like, I see this with Next. Js users all the time. People are like, I've been using ESM for a 100 years, and I can use all these features. And Next. Js is still common JS. Next. Js is is compiles everything to common JS. And you you think it looks like you're using ESM, but you're actually not. What I would like is top level await support

in Svelte for, like, async components.

That would be nice. That's something that I would like. But, yeah, I I think I think that's a feature that people will start to use. Totally. You Node? It it makes modules really nice to await things without having to create a function and run that function. So, yeah, top level await feature that I would like to see, better supported and, you know, better used throughout just the general landscape. There's a lot of new features for sets, which I I can't say that I've used any of these this year, set dot union, set dot intersection, set dot difference. I don't think I've used a ton of sets, this Yarn. But, you know, CJ released a video about Yeah. Using sets and maps. And, it's a really good video.

So I need to watch it 3 or 4 more times before I, like, reach for sets every time, and we've talked about them enough on this show. But it's one of those things where, like, my brain just doesn't go there enough. You know? How about you? Yeah. Stop yourself. Next time you make an array, stop yourself.

Make a set instead, because a set is like an array. However, it has a bunch of really nice features around it. Right? They they can dedupe themselves.

And now there is this whole swath of almost like Node type methods for checking if data is similar to another piece of data, and seeing if things are are inside of each other. You might not be working on on these types of apps, but anyone who's doing, like, data heavy stuff, you've you've got lots of arrays of of either numbers or comments or things like that or or data visualization.

These things are a massive, massive improvement. Even the symmetric difference, have you ever had 2 arrays of data and you needed to figure out what items are in both of them and which items are are not in these ones? You know? Or Yeah. Or you have, like, a whole list of possible values, and then you have your your actual values. And you say, okay. Which ones are not in this array? You know? It's it's kind of annoying because you have to, like, take the 1st array and filter it down for all the items that are not in it. You have these sort of nested

finds. That makes a lot. It a 1000000 times. Yeah. I I have a fun thing we wanna do here for the browser API section. The browser API section, beyond the amount of, percentages of people that have used these things. Let's go from the top to the bottom, and we'll each say if we've used these in the in 2024.

So did you use WebSockets in 2024?

I I sure did.

Yes. I hooked it up to my receipt printer.

Exactly. Progressive Web Apps. I'm raising my hand. I use Absolutely. Yes.

Geolocation.

I did use geolocation.

Alright? Believe so. You know what's wild is I went back to some of my old demos where I did geolocation,

and I built, like, a speedometer with it. And, like, that was that was 15 years ago that I built that. Like, it's been in the browser for a long time. Jeez. And, yeah, Node that many people. I mean, when you it's one of those things. When you need it, you need it, but you don't always need it. Yeah. Web animations, Wappy. I use Wappy. I put it in some of my demos. Yeah. I'd I'm also the one that I Wappy.

I just use the what's the new CSS?

Oh, view transitions. View transitions API. That's not considered web animations, is it? It's not. No. Okay. The web animations API is like a JavaScript where you can specify to and from, and it interpolates values for you. It's great. It's really nice. I I use it actually to animate accordions, with details. I've used it to animate dialogue elements, all kinds of stuff. With the library, WebGL.

I've used WebGL, but not directly. I've used a library that used WebGL,

for me. Yeah. I used it in a couple talks. I had a couple nice little kinda animations while I was I was doing the talk. And what else did I use on? Oh, I built a, a 3 d visualizer for hold on. That Detection. Wes Boss. Oh, you did? AI depth detection. Oh, yeah. That was the coolest. Man. I built this depth thing. So this is an AI model with transformers. Js, and you feed it a Pnpm.

And what it does is it gives you, out the other end, a a map where the black pixels are the furthest away, and the white pixels are the closest to you. And then you can feed that This image.

Map or mesh. I forget what the word is for it. But, yeah, here here's basically the the depth of what I'm doing. The it's a depth map. Yeah. Yeah. And then I pipe that into Three. Js, and and that's that's how you can visualize the the depth of things, which is it was very good. Like, even, like, the basketball behind me on the shelf, it knew that it was slightly bigger. And, like, if I can do that in the browser with JavaScript, like, imagine what these, like, self driving cars have Yeah. That are are they're using video for that. Okay. Page visibility, did not use that. If the page is open, I believe it's Yeah. Like, if you've if you've tabbed away or you've minimized something, you can detect when somebody has done that. So I did not use that.

Wasm. We used Wasm on the syntax side. I used it for text recognition.

So we used Wasm this year. Heavily. Yes. I did not use WebRTC this year even though I have in the past.

I don't believe I did either. I was pretty when, like, the video stuff came out, I was into it. And then the web WebTorrent was also built on WebRTC.

Yeah. But I think that was was it. Web authentication,

did not use. I was a user of it. I did not code anything with it, but that's the web authentication API is what passkeys are built on. And we had the we had Anna Publitz on episode 710 Awesome. Talk about passkeys and and the actual tech behind it.

Temporal. I use Temporal. It's the new date API. It's wonderful. Excited. It's very exciting, which is funny. I I I forget who somebody was posting on Twitter being like, this is the thing that people are excited about. I'm like, yeah. I'm very excited about it. I've I've read a lot of date stuff, and I don't wanna write anything anymore. Like, once temporal hits, it's gonna be a while before people really understand the benefit. I think it's gonna be similar to, like, a like, a CSS grid. People are not gonna understand that this is such a killer

feature that the browser has. Like, I get I still get comments every single day on some of my videos about CSS grid being like, so it's tables.

So we had table. I'm like, no.

We've been able to do this a 100 years for table. No. You don't understand the benefit of And I think temporal JS gonna have the same thing Wes other languages don't have this amazing data API, that we're gonna be able to use. So I'm excited for it.

Broadcast channel API. What is that? I have not used that.

Broadcast channel allows you to message between multiple tabs, or multiple windows of an application. You used this, didn't you? I actually didn't. So I did a I have a YouTube video where I had, like, multiple windows open, and I had my video streaming in. And you could move the window anywhere you wanted, and it would draw lines between the windows.

And everybody's like, you're using Broadcast Channel API. And you know what I was using? Local storage.

Oh. I thought you were using Broadcast. Yeah. Because local storage is shared between between tabs. Right? Yeah. Alright. Node. Alright. Haven't.

That's fun.

The Wes speech API. I did use this. I've used this a couple times. It's cool. There's a lot of there's voices you can pick from. You can get it to, synthesize speech for you. It's cool. The web speech API,

it's almost one of those things where it's it was amazing when it first came out. But now with, like, 11 labs and whatever Sure. It's like, oh, this is actually not very good anymore, because I still I have a video where I I had Ricky from Trailer Park Boys insulting me. I had an app where a robot voice goes

30 seconds, and that's pretty cool to me. Yes. You can just talk to me. And you don't need Internet connection for that. It just works. I don't need Snoop Dogg to tell me that I have 30 seconds left. I I can have a robot voice do it. The Gamepad API, which allows you to connect, video game controllers, have not used. But, hey, that seems like something fun to play around with, at least.

The WebXR device API also did not use, but I should. I'm a big, VR person, so I could see myself using the WebXR API to do something fun. And it's one of those things that's always on my ESLint, like, yeah, I should give this a try. I haven't done it. Alright. Let's move into the library tiers list. This is kinda interesting. So the s tier what does s tier even mean? It's so funny that, like, we all just know this.

Is this a meme, or is this an actual, like

like, data science thing? I'll tell you what. It's from video games. It's Okay. From, specifically, Japanese video games. It's, like, special super it is funny because I don't remember if it's, like, if it Wes, like, RPGs or something Wes you would get items being graded on, and you'd have s JS being the best. But it is it is it does originate from, video games, where s was the highest rank. Yeah. So we have v v test v and v test are always just dominating these things. I have an official answer here. S stands for SHU,

which in Japanese means excellent. So that's where it comes from. Alright. So s tier, we got v v test, Playwright, Astro, PNPM, ESBuild, ESLint Library, and SvelteKit

coming in. Cool. Absolutely. Everybody loving it. I love all that stuff, except for maybe

yeah. I don't know. I like all that stuff. Yeah. Yeah. I'm I'm trying to look at it. I'm a big fan of everything. Like, out of this list, I'm probably biggest on I used Playwright quite a bit this year. Obviously, FEAT, I use quite a bit. PMPM, I've been on for a while.

Be good. Build under the hood. It's, obviously, SvelteKit we're big fans of.

Yep. Big fans. The a tier, we got mock service worker, which I used in the past before, which allows you to as as it says, it allows you to mock, requests with a service worker so that way it doesn't actually hit a server. It's great for testing.

That's that's the context in which I've used it before. Svelte, Vue. Js, SWC, which is a bundler SWC or no Node oh, stale no. I I I no. There's a SWCSWV, like, all these things. I don't even know anymore with the SWC. SWC is the

bundler speedy web compiler.

Yeah. SWC is the Rust based, like, I guess, like, bundler or or parser, and it's used by Next, Parcel, Deno.

I'm assuming this is used in TurboPack.

I'm assuming that that's what this is under the hood. It's kinda similar to Urvi uses Wes build and roll up and Vercel and Deno use SWC.

I'm more of a fan of SWV for people out there who like nineties R&B.

B tier. Let's let's pick a couple of our our favorites from from the b tier. Turborepo. Surprised that it's in b tier. You know what? I resisted using Turborepo because I just felt like I didn't need it. Like, what is this doing for me? And then I used it. I'm like, oh, wait. This actually solves all of my annoyances with monorepos and orchestrating,

build commands and dev commands and stuff. So Yeah. Yes. I think it that that stuff's hard regardless. No matter how good the tools are, some of these monorepo stuff is is tricky, you know, and tricky to get set up. So it's probably why it's in b tier because it's it's a fantastic piece of, piece of equipment. TurboPack also in there. So I've been moving my site to Next. Js, and I've gone back and forth from the webpack to TurboPack several times. And it is stable now, but there's still a whole bunch of gotchas, that I've I've hit along the way.

Electron, surprisingly in here. You know, you only hear people talk negatively about Electron. Every time I've used it, it's been more than fine. You know, it's one of those libraries that people complain about, but at the same regard, it's super handy and useful.

So, you know, little surprised that sentiment put it in the

The benefit of being able to write desktop apps in JavaScript, HTML, CSS, JavaScript, like freaking Versus Code, Discord, all of these things are Electron based JS amazing. Obviously, the the downside to that is there's a huge node bundle that comes along with it. Right? These these Elektron apps can be very large and can be memory hungry.

But I think I think as these processors get faster like, it's I know I have a very fast computer, but Mhmm.

It's it's not really, an issue as these computers get so much faster and as the processors and as you get more memory on your devices.

Speaking of, when are you going to upgrade again?

I don't know, man. Like, I my m one has been is, like, really fast. I'm kinda tempted to do it because of some of the the video editing speed stuff.

Chris Coyer had a really convincing blog post the other day why why he upgraded.

It was just that, like, his m one still rules, but Yeah. The the video stuff was enough to make him go there. I I still I'm I think I will hold out for 1 more iteration, or I'll hold out until they get rid of the notch. The first one without the notch will buy.

Unless it's next year, then I'll buy it in. Yeah. Or they put a webcam in the middle of the screen or something like that. Yeah. I I think, like, it's crazy to say that, like, if you're just a developer and you're not doing video Oh, yeah. Maybe the m one, which is, what, 3 years old Node, is cooked. It's more than enough

for what goes to the deal. It's super powerful. It the fans never come on. It's a great laptop. But in the same regard, if I'm doing, like, some crazy masking,

stuff inside of DaVinci Resolve, It Yeah. Grinds to a halt. And I I might like something that does not do that. Isn't it cool how JS technology gets better at Scott point, I guess, yeah, we're we're happy with it. It it's good enough. But now we're like, oh, what else can we do with it? You know? Like, what video stuff that you was never possible before without a 8 hour render

Totally. Can we now do? You know? Yeah. I know. I remember leaving my computer overnight just to have, like, a preview render and be like, alright. Oh, Oh, it actually looks bad. Let me redo it and wait another 8 hours.

C tier.

Angular. You know, I think Angular gets a bad wrap. I think it's cool. I don't use it, though, so maybe c tier is fine. Angular always gets destroyed in these things, and it's just that

I think it's because of most people taking this is it's it's a pretty heavy modern React audience.

And a lot of those people used Angular 10 years ago, and they're still

bitter. Or they didn't use it at all and just heard somebody say, oh, Angular, bad. Yeah. You know, react good. And that's why. You know? The lowest one, Cordova. I don't Node lot of people even use Cordova anymore. Gatsby,

kinda sad to see that go, but I think it's funny to see Astro, one of the highest, and Gatsby, one of the lowest.

And I wonder if they're intentionally both purple because Astro's

the spiritual successor to Gatsby. It does feel like Gatsby could have become Astro. You know? It does feel like yeah.

Lerna, not surprising that it's this low. I don't like Lerna. Workspaces has kind of solved all those problems plus Turborepo, whatever. Yeah.

So let's get into front end frameworks over time and whether or not, people like them are using them. There's different categories on this for usage, awareness, interest, retention, and positivity.

I think positivity is an interesting one all the time where you know, how people are feeling about it's interesting that React has been, over time, since 2016 up until up until 2023, React was still the most positive and then Svelte passed it in 2023.

And then in 2024, Svelte and View passed it in terms of positivity.

So sentiment of React, an 84% positivity in 2016 down to 69% positivity in 2024.

So definitely an interesting trend. Not a sharp decline as Angular had from 2016 to 2019, a massive ESLint. But now it's it's Scott a little boat shape. Yeah. It's got it's got a little boat shape. Popped up 3

3 notches from 10 to 7. That may just be because Lit, Preact, and Alpine have gone down. I'm surprised to see Alpine.

I think that is probably more of an audience thing because Totally. I think Alpine is probably at its at its peak, all all the cool stuff Caleb is doing right now. Totally.

H t m x going down by 11% JS, it's only surprising because I think, you know, when you first try h t m x, there's something magical about the simplicity.

I I I really like the way it feels, to use. But then when I need to do certain things, certain client side things, if I'm not just loading, like, HTML from a server, then it's like, oh, that's the limitation. I think it's great for what it does, but I'm not surprised that people initially might try it and be like, oh, this is really cool. And then they hit the the, oh, wait.

I actually wanna do more client side stuff.

I'll just make this a server component. I know that it's not the same thing, but I think server components are close enough, to what people want. And then the ability just to hop into a client component is is pretty killer in terms of what are people actually using at work, not what do people love and what what are what is hyped right now, but what are people getting paid to use? So tell me, what are the top 5 things that people are being are using at work? React.

Number 1, 67% of respondents using React.

React. Okay. And this is just front end frameworks? Yes.

People are actually using network, front end frameworks. React number 1.

I might put Vue. Js at number 2. Yep.

Nailed it. 31%.

Angular, number 3? Yep. Exactly. 28%.

So it's it's amazing.

Angular's getting bullied in all of these things. But what are people actually using to build, like, business stuff? Angular.

But, also, it's been around for a while. So hey. Yeah.

Or they're trapped in an 11 year old, Angular application.

Yeah. Node number 4 is where it gets really tricky for me. You Node, it could go a number of ways. I might even say, yeah.

I might say Preact,

but I don't know if that's Preact number 6. Number 4 is Svelte.

We'll see. See? So 11% of people are using Svelte in

at work in production. Eleven. That sounds right. You know what? I often hear people say, like, oh, I wish I could use Svelte at work, but I can't. And so Yeah. That's maybe what I was basing on.

Sorry. One more question JS, what is the highest paying framework out of it? So they they give ranges.

So tell me, what is the highest paying framework? Angular.

JS surprisingly lit.

Okay. Okay. So average or or 50th percentile, not average, $90,000, but the highest paying at the 90th percentile is Preact.

Preact. Yeah. So it's it's interesting to me that makes sense because they're more niche. You know? Maybe ESLint might be used I don't know if this is true, but they might be used more at Google. I could Yeah. Xmol, you know, or or those types of things. And same with, like, Preact. Preact is one of those ones that you get into when you really need Node. And, like, if you need it, then somebody's got some specialty there. But, also, too, less respondents. Right? And the less respondents there are, the the the higher likelihood of

Yeah. Yeah. It could just be 1. The cool thing about State of JS is they have query builders for everything. So so if you are if you're like, well, I think this is pretty heavy, React, or Yeah. I think it's whatever.

Run the numbers, brother.

You can do that. If we ESLint

meta frameworks, Nextiva's usage has gone down for the 1st time from 2023 to 20. It only went down 2%, but the trajectory before was pretty much going up and up. Major

ups. Yeah. It Wes, like, 10% every year, and then this year, it finally went down 2%.

Which ones did go up, though? Yes. Velcade went down by 1%

from last year. Went way up. Wes way up, which is not surprising because Astro JS a delight in a lot of ways. And it's Mhmm. And Astro JS one of the only ones doing things different enough where you're like, oh, this is interesting. But that's just usage. If we get into positivity, Next. Js went from 77% in 2022 all the way down to 50 something. It's my mouse isn't letting me hover over it. 50 something percent in 2024. So that went down a lot in terms of positivity.

Gatsby continuing to go down. What what JS increased in positivity? ASTRO.

Increase in, usage and in positivity is always such a great sign. Everything else went down.

Yeah. That's such a good sign, though, in terms of, like, more people are using it, and more people like it. Like, that says a lot.

Yeah. That's true. But what is it a sign of literally everything else went down in positivity? Do you think that's just the industry in general JS a little bit overwhelmed or or burnt out? Or Maybe Astra's eating them. I don't know.

I honestly don't know. Yeah. Yeah.

Let's do, meta frameworks pain points. 12% of respondents said Next. Js issues.

So you know what it's funny is that in the other pain points, the number 1 was React issues. And I do wonder, you know, how many of these issues are either you know, they're the same thing. You know? The this is or because the boundaries have blurred between the 2, like, what is a React issue? What is a Next. Js issue? Yeah.

I've been in Next. Js world for, like, the past month or so quite heavily moving my own site over, and I've hit like, as I'm I'm a huge fan of Next. Js, and I still think it's the best way to do server components.

And it's a great way. But because Next has been around for so long and they are they're aggressive about backwards compatibility, there's just so much in Next. Js. There's so many little things that they have to support, and now there is also a turbo pack. So there's 2 different ways to build it locally.

Like, I had I have this issue with when I did the receipt printer with, singletons, that you can't use a singleton in in Next. Js because there's Jeez. If you call a server action from the server or you call from the client, they're 2 different bundles.

They don't share between the 2 of them as a singleton. There's just, like yeah. Edges. Lots of little lots of little edges, and, I feel like I hit them all. It's it's not a not like a like a a slight about it, but I think it's just that that happens. When things get so big and and and older, you start hitting these little edge cases, which is kinda kinda tiring.

I I do have some wonder about the the hard lean into server.

As much as there are benefits to it, I just I the more I think about apps I use every day, like sure. Like Reddit, that's a perfect use case for server anything. Right? You want all that indexed. You want all that you want all that information, rendered, server side. Right? Reddit still is I believe it's I mean, it might be using web components these days. I forget what it was because their React rebuild was so rough.

But in another regard, you use something like Sentry.

Sentry doesn't need server side rendering. Why would it need that? Right? It's all client side. I don't know if they do use server side rendering. Honestly, I have no clue. But it it feels like, you know, there there was such a shift that everything needs to be rendered server side. Now, like, I look at the things I use daily, and it's like, alright. I look at an app, and I say, alright. Server side. And I look at another app. Alright. This one needs to be client side. And and you get this, like, this, I don't know, this interesting thing where people always feel like you gotta lean really hard to one side or the other. And I think there's just very specific use cases for both. I think they're real fine. Yeah. I I think, like, being able to

switch between them is is key, because, like like, a silly, silly example is syntax highlighting.

You shouldn't have to syntax highlight in the browser when you can just syntax highlight on the server and send the HTML to the thing. Like, syntax highlighters are huge. And why are you loading all this JavaScript on the client and an entire theme just to put, like, a little box with a console Scott log in there. Right? That's that seems like a crazy amount of JavaScript to run. So that certainly should be server side. Right? I I think the like, what you're getting at here is that, like, a lot of people said everything has to be server by default and Right. The, like, the hard switch from, alright. I just built everything client side, and now all of a sudden, everything is is server side by default, and you gotta put use client and everything. That, like, sort of burned a lot of people because Yeah. Like, I I think it's I think it's great, the the server side. It makes a lot of sense to me because it's Node like Yeah. But I I don't think that you need to, like, make a, like, a choice.

It's just on a component by component basis of Wes should this thing be rendered.

I think you do make a choice, because if you look at something when you're starting out, the first question to me is, like, what needs to be server rendered and what doesn't? And if it doesn't need to be server rendered, to me, adding server rendering is just adding unnecessary complexities to it. And But then you just don't use it, though.

Like, shouldn't that just be the case? Well, that's what I'm saying. You look at it. You Scott, and you say, alright. Does this need server side running or not? Yeah. That that is the choice. That is the choice you have to make. But yeah. I I mean, most of the things I work on could probably be either way, but it matters more to me in terms of, like, data loading. Like, where is the data living? How is that data being loaded? Is it, you know, coming in as HTML from the initial call, or is it coming in as JSON from a a fetch request somewhere? I mean, those are the yeah. Yeah. The the 2 different ways to go about it. I I think the the Next. Js approach

is while people are are sort of tired of it because it's server by default, I think it's a awesome way. I do think it should have been the opposite, which is client default and then opt in to server just for the sake of of making people not mad, and that's what what Tanner's doing with the 10 stack start. Yeah. But it's it just the ability to do either 1 or, like, RPC call stuff on this on the the server from the client is such a nice thing. And, of course, we can do that in in all frameworks now.

Yeah. Yeah. Totally. It it just does feel like yeah. It it feels like that that transition burned a lot of people. And

some people it burned didn't have to be burned by it because they didn't actually need it. They didn't have those problems. Yeah. Right. That's the other thing. Wes you talk about all these amazing improvements, and some people were like, hey. My app

was great. I didn't need any of this. You know? I got enough stuff to do at work, then have to fuss with all these these changes.

You know, testing here, the the testing tools if you look at the testing tools, what there's, like, 10 plus testing tools on this ESLint. And I wonder how many of these will go away the more that people use the built in Node test runner. Now I'm not sure. You know, you have things like mock service worker. That probably won't go anywhere if you need it. Yep.

Puppeteer and Playwright and Cypress and Storybook, those are all certainly their own things. But, like, Jest, and I and maybe even Wes to an ESLint, like MoCA, Selenium.

Like, some of these things, it's like, do these need to exist anymore now that we have a built in test runner? I don't know. I don't do enough testing. I'm sure there's, experts who do enough testing that could answer that for me. But Yeah. Well, now that Node supports,

TypeScript, like, it's it's another reason not to have to to fuss with that. Right? You're not having to transpile your code to run it in, like, a different environment to make sure that it works. Right. So, yeah, it's let's see. If we look at rank, number 1. Still justice. Still number 1. Yeah. That's gotta be Stockholm Syndrome. Or Yeah. Well, just you don't want it. Last thing you wanna do is move your test router No. Thank you. To over. You know? If it's working, it's working. Don't fuss with it.

Yeah.

Real quick. We're going through build tools here. I think this is kinda interesting JS Vite and Webpack are at par with what people are using at work. That's that's amazing that Vite has climbed. I wonder what it is over year year over year, but I think at this time, probably next year, we'll see Vite have a significant, improvement over top of Webpack.

Yeah. It'll be interesting to see too with the roll down stuff. Man, Vite is such a such a killer trajectory all over the moon. Yeah.

Pain points in, build tools, config, performance.

Yeah. Those are probably the 2 biggest one. Right? It's slow, and I hate having to fuss with it and and and make it work. Alright. Let's talk about libraries. I'm gonna ask you a guess. Can you name some of the top or most used libraries? So almost call these, like, utils that people bring into their projects.

Yeah.

Okay.

Well, if I know anything about this section of the survey, it's always stuff like underscore.

So I will say Lodash is first. Lodash, 43%,

number 1.

Is underscore second? Underscore. No. 7% still, though. Like, that just goes to show like, underscore has not been the move for probably 8 years now. I know. Yeah. And, it still has quite a bit of usage.

Okay. So in that case, I will say moment

j s? Yeah. Moment coming in at number 4, 27%.

Does date f n s take over moment? Yeah. It does, thankfully.

Number 2, which is funny because we're almost at a spot now where We don't need either. Yeah. Other libraries.

What? Day. Js is number 5. I think that's one that people like to use instead of date functions. And then we'll have temporal taking over all of that. Although, I I still think we're gonna we're gonna have, like, a a a little library.

I already built my own. Top of temporal. There you go. Yeah. I've already built my own of just, like, functions that I need. You know? So I I can't imagine that there won't be some official one. Okay. So I'm missing number 3? Yeah. Is that oh, boy. This all surprised me. I don't know that.

It's something you've used, and I think something that you're a fan of. Something I've used and I'm a fan of. It's for I'll say it's I'll give you one word, validation.

Validation.

Is it Node? Yeah. Number 3. Yeah. XOD is that's 36% of people using XOD.

Cool. 70% using jQuery. Yeah. Yeah. Big fan.

Yeah. Okay. Cool. Alright. Let's do back end frameworks. What do you think is number 1 here? Express.

Wes. Of course.

Number 2, I'm gonna say

Fastify.

Fastify JS number 3. I I'm surprised with that. Yeah. Number 2 I'm gonna say number 4 is Node is Hano. Okay. So close. So we you're missing number 4 and number 2.

The number 2 framework. Man, what's the Express one that people used? I know what it is, but I can't think of the name.

It's similar to Koa.

Not Koa. Koa is number 6. Okay.

It's something that has been around, obviously, not as long as Express.

It is not used a whole lot in the React community, but it's very popular.

It's used a lot in Angular community.

Is it, like, El Eliza?

Eliza is number 7. That's like a like a Hano alternative. Right? And then, like, there's probably like, Nitro is on there as well.

Nitro I don't see Nitro. Nitro is way below. It's below meteor on here. So Okay. Not many people using Nitro. Do you wanna, I need I don't I can't I can't think of what number we need. 2, the word is kind of like next, but not nest. Is it nest JS? It's nest JS.

By a long shot, it's number 2. It's, the the next one, Fastify, is only a third of the respondents that said Wes. And then number 4 is strappy.

Oh, yeah. Yeah. Yeah.

Man, I should've known that. Yeah. Strappy. What else is on here? Adonis, JS, Happy, Meteor, Sales, Redwood. Man, every time I see the Redwood not getting any love Yes. Same. Yeah.

Man.

Same. Node 36.

That's more info. Too. The Wes. Yeah. We need to do a CMS episode.

I'm down to that. Alright. JavaScript run times, 91% of people using Node and 83% using browser. So more people we we we had the same thing last year. More people are using the browser than than Node? That doesn't make any sense. How does it not make oh, you mean Node more than the browser?

Yep. Yeah. What

run times do you use regularly use?

Maybe the browser should be number 1. A 100% of people, if you're writing web stuff I guess this is just JavaScript. Maybe people aren't writing JavaScript for the web entirely, which Yeah? Yeah. Hey. Maybe it's there's just Flash or you know what was crazy? This is totally

aside, but I I I keep thinking about it every single day. Deno has WebGL rendering now or web no. Deno has WebGPU Web GPU. Which means that you can render with the graphics card on the server. And somebody built there's a YouTube video. Someone built a, like, a Spotify UI clone entirely on the server. So, like, server rendering and then just streaming the the UI to the client. It's not even HTML, though. Right? No. It's not. It's not. It's all it's all just, like, WebGL

rendered, which is cool. When, Ken Wheeler built a React and then at the end of his talk, revealed that the entire thing was being rendered in Canvas even though the code was all React. You're just like, crazy. Pnpm rolls.

Hilarious in that that 98 people responded that they used no runtime, which yeah. I don't know about that one. I'm surprised

that Cloudflare Workers got a they got a write in. I guess, only 30 people, but it wasn't an option.

And then BUN, 16% and Deno, 12.

So this this is what I'm really interesting in JS, like, how many people are actually using these other 2 run times, Deno and BUN? That's probably more than I woulda guessed, so I'm I'm happy about that. Oh, serverless. Where are people running it? I know we're getting a little long here, but let's let's do this one real quick. 28% using Lambda, 17% using Vercel, 14% using Cloudflare Workers.

That surprises me. I woulda thought that the Vercel would be significantly higher than Cloudflare Workers, but they're they're pretty close there. Yeah. I don't know. Cloudflare Workers, man, they're easy to use. That's what I reach for. That's so good. Yeah. I'm I'm trying to host my next site on Cloudflare entirely just as, like, a to see how well you can do it, and it's it's going well so far. Yeah. I everything I do

in SvelteKit is pretty much unless I wanna just throw it on my if I need a node, like a node app, I put it on my COOLIFY. But everything else, I throw on Cloudflare

Yeah. Or Cloudflare Pages or yeah. Can I get you to guess what other languages people use instead of Yeah? Or in addition to JavaScript?

Yeah. I don't know TypeScript.

No. That's considered considered JavaScript, I guess. I know. Well, it doesn't it doesn't count con con Not to GitHub? Yeah. Not to GitHub. Right? Yes. That's the, the joke. Okay. So, I don't know. I know JavaScript people like to say things like go and Rust, so those are gonna be on there. Yeah. Go, number 6, 18%.

Rust Rust, number 7. So Go and Rust. Yeah. 6 and 7. Just goes to show you hype and and on it.

C sharp

A very clear winner at number 1. Yeah. C sharp, number 4, Wes. But there's, like, a there's something 39%.

Come on. What are the what are the 2 big languages that people use Oh, yeah. Obviously, PHP. Yeah. PHP number 2, 29.

Number 1 HTML. No.

Programming languages

that AI. I think AI. Oh, Python. Java Java number 3 and Python number 1. Yeah. So Yeah. Almost almost half of people are also using Python. Where's Swift on this list, or is it on this listed off Swift.

Number 12 at 5%. I think that's people writing JavaScript are probably not writing native Totally. Apps. You know? Like, they're probably using React Native.

Oh, AI tools, what people are using. 67% ChatGPT, 48%, Copilot.

Then we got Claude, Gemini, Cursor. Only 11% of people using Cursor. I would've thought good. Cursor is very good, and the amount that people talk about it is is quite amazing. So I would've thought that'd be significantly higher. That just goes to show the, like Oh, yeah. Sometimes the bubble that we we live in. You know? Like, Copilot has a 5 x what Cursor has. If if you were to just, like, ask me based on what people are talking about, you would think that go like, Microsoft is shutting down.

Yes.

Node is very close to Cursor too. I'm impressed with that. Alright. Last section we have here, which is the awards. How quickly can you guess which project will take the top spot in each category? Most adopted technology awarded to the technology with the largest year over year usage and progression, Astro.

Oh, yeah. Yeah. We're talking year over year. I would say Veet for all of these, but if you ever Astro.

It's Veet.

How how does Veet keep getting more year over year? Every year, baby. Just oh, it's sheer it's probably not percentage or something. It's sheer numbers of people. Yeah. That makes sense. Yeah. Yeah. Yeah. Okay. 30% year over year usage.

Impressive.

That's my, good future. Wes did note that, wow, it's the same as Webpack now.

Yeah. So that's it's it's it's a year. Highest retention. What is the technology with the highest percentage of returning users?

Vite.

Viteast? Viteast. Alright. That's fine. Yes. Vite number

number 2 at 98.

98%. Yeah. Just barely. Highest interest awarded to technology developers are most interested in learning once they are aware of it.

Once they're aware of it.

I don't know. I'm I'm saying Svelte just because I like it. But it's the thing that's probably Vit. If I'm gonna say playwright,

roll that out.

Wow. Vitast and Vit. Their partner stopped. That's like the the biggest that's the funny thing. Alright. Most write ins. Yeah. A word to the item with the most amount of write ins, I'm gonna say Scott Tolinski. No. I have no idea. This one, I have no clue. Maybe roll down because I didn't see roll down listed too many places on here. I'm gonna say BUN.

Analog.

Yes. Angular meta framework. Oh, yeah.

Nitro number 2 and a ValleyBot. What's a ValleyBot?

Isn't it,

yeah. It's ValleyBot for unknown data with confidence. ValleyBot is an open source library for Tazod bundle. Oh, okay. Similar to Zod. Yep.

Oh, that's good. Yeah. That's you really need this with when you're using, like, either just like a fetch API or if you're using a, an AI to return JSON Yeah. Because you parse that, and you hope it's there. Right? But you certainly should also if you really wanna be type safe, you should also check that the data looks like you what you want. Totally.

Most commented library.

Library received the most comments.

Oh, React. Next JS React. Nest

JS. Angular.

Storybook and Webpack. I'm I'm floundering on these. Most loved library, Vit. Vit or Vitest. It is Vit. Yeah.

Beautiful.

That's great. There also is there's a couple more, things we didn't go through here on resources. You can see, courses and and newsletters.

Podcast number 1, we are now competing with the YouTubers in the podcast category.

So I asked I asked Sasha. I'm like, what's the deal with people that don't have podcasts in the podcast category? And he said, it's just it's all content, which makes sense.

Yeah. It's all content. Next time, vote for us on Video Creators then, folks. I know we're on that list, but you gotta you gotta vote for Syntax on all of it. Down. Yeah. Just put just put in syntax for every single, write in that you can.

Oh, that's great. Cool. Well, that was really interesting to go through. Kinda gives us a good look into the JavaScript world.

And, as always, thanks to Sasha for putting this thing together.

And, anything else to add? I got nothing, man. Wanna get into sick pics and shameless plugs. I know it's been the holiday. So Yes. Probably a lot of stuff happening.

Have I got one for you?

I just I saw your tweet about this. I knew this was coming.

So this is a heated Wes. My sister got it for me for Christmas, and it you hold it down. Hold on.

And it will heat the entire vest, including the collar. And I at first, I was like, oh, yeah. I've seen them before in, like, the Home Depot or whatever. I'm like, yeah. It makes sense if you're a trade. But, man, sitting at your desk, you're a little bit chilly, or if you just run around shoveling snow or whatever, having your core nice and heated is amazing. And it's just a a USB battery bank.

It's a USB a plug, so you can use any it comes with a battery bank, but you can use any battery you want. I'm I'm assuming I could just plug it into my desk here, like, hardwire it. I'm worried I would just walk away Oh, yeah. Without unplugging. Node sound. And it lasts, like, I don't know, five, 6 hours, something like that, on a single battery, which is significantly long.

So I'm I'm surprised at how much I like this thing. And I would say if you're cold at your desk, get one of these. It's it's great.

I I I didn't get a a heated vest, but Courtney did get me, like, one of those, back recovery y things Wes you, like, strap it to your back and it has Oh, I've seen those. Yeah. Yeah. Yeah. And, man, that thing really cooks. It gets really hot. And then I'm not that's not a negative. That's perfectly, great that it gets so hot. But yeah, man. It's cool. It just charges. You wrap it around, and you you get cooking. I might actually use that in my office to heat up. I'm going to sick pick Super Mario Party Jamboree.

Man, I I've always played Mario Party, you know, as a I've been playing it since middle school or high school or whatever. Love Mario Sanity, but they've always been like, the more modern ones have always been kind of iffy in various ways. We'd still buy them, but they're they're always kinda iffy. The latest one, it feels like, man, it feels like Nintendo 64 Mario Party in the best way. There's enough, like, new stuff. But our kids are just the perfect age Wes on New Year's, Courtney and I, in the past, we would just play Mario Party. We would do a long Mario Party thing. That's the, that's what Courtney and I would do instead of going to parties or whatever.

And it was always a lot of fun. And this year, we were like, let's buy the new Mario Party and play Mario Party with the kids on New Year's, and we did that.

And let they're just like the perfect age for it. So it was a lot of fun. We we've been playing it, and our kids really getting the hang of it. So Really?

Yeah. It just What Mario Sanity, which one's that?

So Mario Party is like a board game. And you you roll a dice, and you go around the board, and the board has various elements that do things. And then after everyone does a turn, it does a minigame. You all do a minigame, and the winner gets a certain amount of coins. 2nd place get and then you use those coins to buy stars, and this person will buy stars at the end of it. Yeah. Oh, and this is on Switch? This is on Switch, and it is so it you know, you could use the the little sideways controller, so you only need, like, 2 sets of Joy Cons. And, yeah, our our kids went nuts for it. There's there's motion ones where you're you're doing stuff, and there's there's platforming ones. And even Brooklyn has a great time. Landon even won. He won, like, 2 times ago, which JS, like, the the transformation of our kids, like, not being able to to play the most basic video games to winning a round of Mario Party happened, like, overnight. It was kinda basic. Our our kids too. You know, we a couple years ago, we bought a Wii. Yes. And they played it in. It it was it was okay.

But I I hacked it, and I'm able to get, like, any game backup on it that I already own. And then I downloaded every single I put a NES emulator on there. Guess how big every single NES game ever JS? Forty gigs? Seventy megs. Oh, that's 70 that's I I actually download it. Well, maybe it's because I downloaded n 64 too. Yeah. Yeah. Not n 64, but, like, every NES emulator ever or every every ROM. Seventy megs. Amazing. And, like Amazing. Of course, so you get, like, the GameCube or whatever. They're they're much bigger. But I put it on there, and I was like, what games do these kids even play? So we're just playing NES games. But Mario Party, is that on the Wii?

There is Mario Party for the Wii. Yeah. I'm gonna get that for them. There's Node that was actually pretty good, because I had the Mario Party for the Wii. I think it was Mario Party 9. Which one? Mario Party 8 was good. Yeah. I did Mario Party 9, not good. Mario Party 8, good. Yeah. Okay. That's good to know. I will, I will buy that on eBay.

Yes. A lot of fun. Yeah. Cool.

That's good. Alright. Check out the Syntax YouTube channel. We are posting videos like nothing, or not nothing.

We are posting lots of videos, in in the new Yarn, so check it on out if you wanna, of course, watch the podcast. But, also, we've got just dedicated videos coming for you, so check it out. Syntax FM on YouTube. Is that what it is? It's Syntax FM on YouTube. Yes. It is. Beautiful. Alright.

Peace.