The State of Frontend

Welcome to Syntax. Today, we have the state of front end survey results, and Scott and I are gonna go through it. Some interesting stuff in here in terms of, like, what frameworks are people using, how are people writing CSS.

It's a really great survey because it kinda gives you a glimpse into what are people actually using and and what are people moving towards. And it it gives a there's, like, almost 7,000 people have taken or 6,000 people have taken this, response from a 139 countries. I think it's a pretty good look at, where the industry is at right now. So we're gonna go through the the result and and sort of talk about, our surprises and and what we think about, the future of web dev.

My name's Wes. With me, as always, mister Scott Tolinski.

He's doing great today. Probably not as great as possibly could be, but, we wanna talk to you real quick about Sentry. Sentry is the error exception performance insight tool. We've heard us talk about them a 1000000 times. Basically, you got a website that's buggy, slow. You got issues. Sentry's gonna give you insights into why that is and help you fix it. Check it out. Century.i0forward/ syntax.

Word.

Node thing I really like about this survey is that it feels like it's out of our bubble a bit, where some of the state of, you know, React or whatever, those those tend to feel like a survey that's representative of my bubble in web dev. Yeah. So it's nice to see information from what could be considered like a a wider breadth of the industry.

Yeah. I WISTS survey is is always going to be, like, skewed in some direction.

But for this one, it seems to skew way heavy Asia, Europe.

Like, out of the 6,000 people that replied, 3,000 from Europe, 1200 from Asia, and then only a1000 from North America. So I think that is is pretty good. And, like, fair point. I never heard of the survey, before, which is is good maybe. Maybe it shows a little bit of a different, look. So let's start with the framework aspect look. So let's start with the framework aspect of this. This is talking about what frameworks have you used in the last year. And, also, the results of the survey are kinda nice Wes they're they're relatively simple. It's just like, do you did you use it and like it? Did you use it and dislike it? Or or the opposite? And the most used and liked framework is React coming in at 70% and then 15% use and dislike, which you can kind of expect that. I think that's not very that surprising, but Svelte JS. Svelte's got what? 25% used and liked out of all respondents? That seems really high in view. 44.8%

used and liked, which is great. I like this interface where it shows the,

like, the darker outline around, because you can see that, like, very clearly at a glance that Svelte has the highest percentage of want to learn in the future. That I was gonna point that out, which is Yeah. What do people want to learn? Like, what are people using now? React, Svelte, and Vue. But what do people want to learn? HTMLX pretty high as

well. Svelte extremely I think well, Svelte the highest one in want to learn. It is. It is. It is. And the set you choose learn it. It's great. Yeah. Oh, yeah. We use it. You know? Actually, you know what? One thing I you know, Node turned into a little Svelte love sesh here. But the one thing I really enjoy most recently about the the transition to Svelte five was that the migration assistant worked on the 1st try and only gave me, like, 5 files to touch after the fact, which is pretty substantial given the the changes. Yeah. It worked really super well. It was maybe the smoothest migration I've done on anything, and let's face it. I I've done a handful of migrations.

Mhmm. What's also interesting here is that HTMX is number 2 for want to learn, but also some of the highest for not interested and no opinion and only 7% for used and and liked. So HTMX gets, like, the hype award. Right? It has hype, because it's the 2nd most wanting to learn thing. But in reality but then again, it's new. So 7% is is probably a big jump up from where it was in the past. It it is it is wild to see that something that most people weren't aware of, like, 2 or 3 years ago is is now this high.

Meanwhile, something like Phoenix, which is fairly mature, and even like Alpine JS JS only at, like, 7 and 1.8%.

So yeah.

On quarter 2, that 4.1. Yeah. I think, like, LinkedIn is is one of the biggest users of Ember. I wonder who else is, any big out other sites on Ember? Yeah. I did you ever learn Ember? Did you ever pick it up? Slightly. I touched upon it. It was kinda, like, during the, like, Angular you know, we warp all kinda coming off of Backbone, looking at Angular, and then Ember was was one of the good big come ups from it. We had dinner with, someone worked at LinkedIn at the after the meetup, and he was saying Ember's great, but it's it's a little bit different. And, like, there's not a ton of of documentation on, like, bugs and stuff outside of well, luckily, inside of LinkedIn, they can they can reference all those people because they use it quite a bit internally.

Man, I I did that. My very first one of the 1st tutorial courses I ever bought was from, I don't know if you remember, Peepcode.

Yes. Yeah. Yeah. I I bought a I bought a, a course from Peepcode on Amber, and I took it on the airplane to somewhere. I forget where. Maybe even to to yeah. I forget. I I took it on the airplane somewhere. Wes did the whole tutorial course and, like, left being like, alright. You could do Ember. I guess I could see how this works. Yeah. That's I learned Express

on, from PeepCode as well. He had a really cool tutorial about, like, making pies and most recent pies and and WebSockets. And I remember watching it on an iPad at the gym. There's this is like what you know, like, they have, like, those core moments in your, like, web development history. You just remember where you were when you learn something, and that was one of them. That's a weird weird remember that I have.

Yeah. But let's talk about rendering frameworks, which is, like, basically, you have, like, React and Svelte and Vue, but, like, what frameworks do you use on top of it? Most used, next, and then basically half of that. So next is 52%.

Half of that is Nuxt and Astro coming in, and then SvelteKit at 17%.

Remix only 12%, which I'm always surprised at the the numbers behind Remix. You know? I always think that they would be much larger, but just goes to show that, like, when something big catches on, it's quite slow to move on to something else.

Because that Sanity, ASTRO. I mean, ASTRO kind of also showed up.

It was one of those ones that you felt like how are they gonna differentiate themselves at first being a static site platform than just, like, the the whole thing being you can use any front end framework. To me, that wasn't super compelling until, it's really evolved ESLint, like, a it's maybe one of the smoothest, full stack frameworks to work in. And, again, SvelteKit has the highest want to learn in the future, which is pretty great for that team. I think it's a a good product. Yeah. I I don't know too much there. Gatsby with the lowest. That's also not shocking given that Wes Gatsby's trajectory has been. I'm surprised it's even at 9.4% of people wanting to learn it, but, hey.

Let's take a look at at state management because outside of the view in in Svelte world, state management picture is a little bit more complex as we've we've talked about a lot of times on this show. And so a lot of these are React specific options except for, I thought it was but a well, I think we had the same conversation last time. Either way, the highest most used in like is of the React Context API straight to the dome. That's the highest used in like. Straight to the dome.

I get it. Yeah. It's simple. But I still would want maybe it's a little something more more. You know? It just goes to show that, like,

come on, React. Give us give us something better. You know? The context API, it yeah. It's okay. Set Scott, put it in context API, but there's all these, like, gotchas and downsides to it. But, obviously, that's what what people are actually using.

Zuestand, Redux Redux toolkit coming in at a fairly close tied second, and then MobX only at 8%, Jotai at 11%. So Zuzdand, quite a bit more popular than Jotai.

Yeah.

That's actually Deno that. Doosan came first, and it was kinda one of the 1st alternate ones. I am surprised that MobX is so low given at one point felt like, it was between Redux and MobX as being the 2 major choices in the space. And and Redux, obviously, the most popular one. But you'd think after being around for so long and having an approach that's more similar to, like, what we're doing in in solid and view that, MobX would, yeah, be a little bit higher.

Can I quiz you on the next one? Don't look at the other libraries or have you? Okay. So I'm gonna quiz you on the next one, which is what other libraries have you used in the last year? So I'm gonna I'm gonna rattle off the 6 libraries I have here, and you have to guess which is the most used and liked and the most not interested.

Right. So the what is the most used in, like, library between Lodash, jQuery, Immer, RxJS, Ramda, and underscore?

Jeez.

Jeez. That's a quite quite a a bunch of things. So the most used and liked out of all of those? Yeah. Gosh.

Oh, man. That's a tough, because

Or maybe maybe we'll ask this. What's the most used, Jquery? Not liked or disliked, but just used entirely?

Yeah. JQuery.

This Scott actually. So jQuery is a a close second, but low dash coming in at 70% of used.

So I can see that right here. We're finally starting to see the, like, the slow on use of of jQuery. I know that, like, it's been gone for, what, like, 10 years or so, but people still use it. People have existing applications, and that's a frustrating thing sometimes about the bubble JS people don't realize that, like, you pick tech and you work with that tech for for many, many years, especially when it's such a low level choice, like writing all of your JavaScript in jQuery or picking a library like React.

Yeah. I'm gonna say for the other one, it's it's probably for the least used or whatever. It was, like, least

The most not interested.

Most not interested. I'm gonna say only because it feels too niche. Yeah. I think has the highest no opinion because I don't think anyone even knows what is. Okay. Then what about, since since Lodash was the highest, and what's the the,

underscore? We'll say underscore. Yep. It's it's underscore. Yeah. So 30% of people are not interested in learning underscore.

Which makes sense. I mean Very close under that is jQuery, though. I don't even know what I'm using I would use Lodash for today anyways so that I couldn't just hit

myself. Yeah. I I have, like, the opinion of Lodash is not bad.

You just reach for the methods when you need it. And I almost always Wes I'd run into somebody using Lodash, I think, I could I could write that in some of the newer methods or whatever. And there are, like, some weird use cases where you're, like, you have to, like, pick and whatever. But even that there's all these new JavaScript methods that allow you to intersect arrays, finds find which items overlap each other, find which items are not included in either. Like, there's very few use cases unless you're doing some pretty heavy data stuff where where I think you even need it. And that that's not to say it's bad. Lodash is is fast, and it's it's well tested and all of that stuff, which is great. But when I see it used, I often think, I don't think you Node to pull that in. That's how I feel too. And I do reach for just,

people who who we've talked about just on this show. Yeah. We'll link it up in the show notes. But just JS a good alternative because you can just grab 1 or 2,

methods or anything that you need straight out of just instead of bringing in a big old platform or something. Okay. Cool. That's not true because Lodash had for the longest time, you've been able to load just the method you've needed from Oh, yeah. Dash dash p s. But I I almost do it as well. The one time I do reach for it is debouncing and throttling, where I'll I'll install just debounce or just throttle. And Mhmm. Because, like, I hate writing that myself. It's it's too complex.

Yeah. And I don't honestly, don't know what the sizes are. I think what attracted me to Just is the fact that the sizes of all of these things are very good place. Yeah.

They're they're published by their own self. You don't have to it's Scott, like, part of a library where it reaches in for other utilities.

Right. So it's very copy pastable.

Let's talk about data. I think data is an important one, how we're bringing in data to our applications.

This one's shocking to me. 73%, the highest used and liked JS Axios. I gotta say why. What are we doing here? That to me is kinda wild. I just I just never have needed it. I don't get it. I know you used it and liked it, Wes, in the past,

but in the same regard Wes did an entire show on why do people still use Axios, which is episode number 4 53. Go to syntax.fmforward/453.

Why do people still use Axios OverFetch? And we detail why people still do it. There are some use cases, which is ESLint interceptors and and expired JWT tokens and validation status and all that. But, again, I I don't find myself reaching for Axios all that often, but it's higher than native fetch. I know.

What's up with that? Yeah.

Yeah. Man, native fetch isn't hard. I get that there's some niceties from Axios, but, like, is it that hard to implement those that you gotta bring in a library for it? Yeah. Yeah. I think there even is some

there's, like, an Axios like library that gives you the pieces that people use. Like, people wanna set their auth headers once. Yes. And or people don't wanna have to double JSON. You know? Yeah. Especially with TypeScript. And, like, the answer to that is, well, just write a wrapper function. But Axios kinda is that wrapper function, so I think there are alternative libraries that sort of give you that Axios

wrapper without the the baggage of the whole library. Yeah. Word. Isn't that actually no. That's is that k y? Is that what that library is? K y Yeah. I'm not As you're describing this warp. I was looking at it, and I was thinking, I'm pretty sure that's just k y.

It's from a prolific package author. Sorhas. Sanity Sorhas delightful HTTP request. It is a simple HTTP client Bos on fetch, specifically.

So I do think that's what it says. What you want. Yeah. Yeah. And but nobody knows about it. 66% of people, no opinion on this thing. So give KY a check. I I don't feel like I need it or want it, but, if you're reaching for Axios, KY might be a good option.

As far as other ones, we, you know, tend to encounter here. I'm pretty stoked on the fact that tan Scott query is so high at 43% of used and liked. When we talked to Tanner, he certainly made me like a believer in all the stuff he was doing. So, yeah, it's it's nice to see that doing doing well. Apollo ESLint kinda holding on there a little bit. 25% is not nothing, but, yeah, I'm I'm I haven't heard about Apollo in a little while. I don't know what their status is, to be honest. Yeah. I that's a great question. I don't know as well. It's it's been a while

since I've I've used Apollo. Sort of I think, like all things, GraphQL went a little bit more enterprise y, because that's sort of where the the use case for a lot of GraphQL stuff is.

Hosting. Can you can you guess the top hosting providers?

Oh, top hosting providers.

Keep in mind, like, this is, like, JavaScript,

primarily front end people. Yeah. Okay. Well, one, I think Netlify is going to be on there. I think Vercel JS going to be on there. I think DigitalOcean's going to be on there. Cloudflare

and AWS, I guess. Yep. You Yeah. DigitalOcean Node on there, surprisingly. So number 1, Vercel, 36.2%, and then AWS, 32% under that. So more people using Vercel over AWS, which makes sense.

I'm just surprised.

I keep I know I keep saying this, but, like, I'm so surprised Amazon has not made a Vercel like experience. And every time we say this, people come out and say, yeah. But there's AWS. What's their their equivalent?

And why you say this Wes it's so funny. I went to, like, log in to pay my bill on AWS the other day, and I got hit with this login.

Here's the new sign in UI. And somehow the new sign in UI not only looks like the same as the last one, but it's somehow just, like, slightly worse. I don't need I, like, don't know what's going on. And then I went to, like, go through the billing experience, and I was just like, how how have they managed to make this such a maze? How have they managed to make just finding my where my credit card information is, like, so many clicks and and and such a a maze to get to? I I really truly don't understand it. It's shocking.

Even Google, though Google's developer platform site and Azure's developer platform. Yeah. They're all just I've already raid railed against a a couple of times. But, man, they're just they're rat's nest of all kinds of stuff. Yeah.

The hilariousness that I'm, a, forgetting what AWS JS, like, continuous integration thing where you, like, push a git commit, and it rebuilds it and deploys it for you, the fact that I'm forgetting what that call JS called, which I'm sure you're screaming at it right now. I know what it is, by the way. I can tell you. JS it?

Amplify.

Yeah. Amplify. That's it. Okay.

And the fact that I was searching It's for AWS deployment thing or AWS vault Vercel alternative, and that did not come up once. Yeah.

Yeah. They just have so many products.

And, like, come on. You gotta think they could put a couple

100 people on this and build it. Is kinda wild that DigitalOcean didn't show up. I feel like at some point, they would be very high on this chart. Yeah.

Just given, yeah, given where they've been in the past. Yeah. Yeah. DigitalOcean's

app platform is is specifically, like, what we're talking about, which is like a a platform as a service. Right? It's not you don't get a Linux box and log in and install Node. You just, like, set up some config file, and you give it your git Deno, and it will build. And that, I've I've used that a couple times, but it never really took off, as as much as I thought it would. Cloudflare Pages, though, is again, that's Cloudflare's equivalent to that. It's higher than I thought it would be as Wes. 10%.

Yeah. 70, 80% of people using continuous integration right now. I don't know what the other 20% of the people are doing. Like, are you FTP ing and dragging and dropping? What's the alternative to Yeah. Continuous integration in in these days? Rsync.

Logging in and get pulling and then running.

Drag well, like, you you laugh, but if you sign up for AWS serverless functions, like, their initial interface for deploying a serverless function is upload a zip file of your serverless function with your node modules in it. Like, that's their interface for that. And, obviously, there's way better ways to do it, but, like, that's your you're getting started.

Yeah. But the CI GitHub actions, 70%.

Like, remember back in the day, everyone used CircleCI or Travis? CI,

Semaphore,

Travis. There's 7%, Travis.

I used a bunch of these, and I never liked any of them. Would you wait why it makes sense that that Google act or, GitHub actions were able to just do it.

It is one of those things that we talked about, especially in the Copilot episode that we just recorded Wes, if you can put things closer to Git and GitHub where people are already using GitHub, then, GitHub will take Vercel. And I think this is a a prime example of it. It's not like GitHub actions are the most friendly, fun thing to work on in the world, but they certainly do the job. It goes to show you just make it free, make it available. People are gonna use it, and and just take over that that platform entirely. I I haven't reached for anything else. I do a ton of GitHub actions on on most projects, so definitely myself, included into that.

Have you used micro front ends? This is this is kind of an interesting one because the whole micro front ends thing is I keep hearing about it. I keep talking to people about it at conferences that are from larger companies, but it's not something I've I've dipped into. And I think that this is a show that we need to have a guest on for because the whole idea of, like, microservices Wes very popular. Right? And now we have this idea of micro front ends where you have different teams building different components that then come together.

And then there's a whole that's whole webpack module federation thing where you can share code between them. I think that we need to we'll we'll ask you this, dear audiences.

Who do we talk to about microfinance? I've had a lot of people reach out Mhmm. About the topic, but they it's almost always that they're from a company trying to hawk their thing. Mhmm.

And that's sometimes fine, but I I'm I'm always hesitant to do that.

I'm always hesitant to do that as well. Yeah. The microfinance thing seems to be a problem or a solution to solve a problem that we, you and I, just will never face because we don't have, many different large code Wes. JavaScript developers on tons of components, different skill levels, different departments.

I mean, that's just not a problem we're going to hit. So, it is it does seem like kind of a hairy solution to me. I I feel like it's a better solution of just I get everybody on page ring the same thing, but,

man, that's probably not practical. It probably is, but you're not, yeah, you're not ever gonna do that in in

fast enough where people can get their work done. I know. It it it's such a, a dumb guy view of it. Oh, why don't we just all use the same thing? Yeah. All all 5,000 of those. Great idea. Yeah. Yeah. Let's just, like, scrap

every piece of tech that we've built our entire business on Yeah. Totally. For the last 10 years.

I could do that.

Next one, package managers.

NPM, no doubt, 56%.

Easy peasy. I'm surprised that yarn is still at 21%. I felt like yarn had such a big fall from grace when they had their whole, like, v two thing came out. I felt like that was gonna be like a an Angular two moment for them, but it seems like they're holding on. PNPM, that's what I use. It's at 19.9%.

I like PNPM. There's occasionally some, like, little weird things for with it. But for the most part, PNPM handles a lot of stuff really well. And I don't know. I'm gonna I'm gonna I don't wanna speak out of, ignorance here. Yeah. But in npm workspaces, do you have to define all of your packages in their version as workspace, you know, Vercel.

Because one feature that I've been really liking in PNPM workspaces is to treat all packages, like, check for the packages first in the workspace without having to put workspace in the version. You just put the version like normal in your package dot JSON, and it will check the workspace first even without the word workspace in the version.

Meaning that, like, I can use the same dependency, like, line of code to pull from both npm when it when it's somewhere else, but also from my workspace if it's within my workspace itself in my Node repo. Yeah.

The I don't know the exact answer to that, but I do know that the Pnpm Node is a little bit simpler. I recently went and tried to deploy my entire course platform to Deno Deploy just to see.

Can you act like, so they're like, we have full Node support now, blah blah blah. You know? And I was like, alright. Bet. Let's try, like, this huge Node app that I've been working on for 10 Yarn. That's a massive monorepo, and and there's multiple workspaces or there's there's, yeah, multiple workspaces in it. So I use Pnpm to manage my workspaces.

And, obviously, deployed to Deno play, they're gonna use NPM or or they're gonna use their NPM equivalent.

And the thing I had to change was that I use, like, workspace colon star in my package JSON, which is really nice because it just finds the folder that all top level folders. You wanna add new packages, you just add another one. I had to go change it to explicitly stating all of the workspaces in there. Oh, you did. Yeah. Yes. But aside from that, I don't think I I try not to do anything that is specific to your package manager because I wanna be able to run it with NPM or with PNPM. That's part of the reason why I'm get whenever a project uses Yarn like, I was trying Redwood JS out the other day, and it uses yarn.

And, like, it wasn't installing properly, and I was like, like, I have the wrong version of yarn installed. And then but installed and then but Yarn also now comes with what's the thing? It comes with Node? What's that called ESLint in node Wes node now ships

to package managers as well. I remember. That that was a whole big controversy when they added that to to Node. It was like the Yarn team specifically was really pushing for it, which I can understand why it's their their product. They wanted alternatives.

And by the way, the the, Pnpm package, setting for people who are wondering, because I mentioned this is a setting called link workspace packages.

If enabled, locally available packages are linked into node modules instead of being downloaded from the registry. Oh. Oh, yeah. Yeah. And so it's basically like, again, you just use the Vercel, and it automatically does linking instead of needing to put workspace in the version, which is nice.

Alright. It's called Core Pack. So Core Pack is an experimental tool that helps with managing versions of your package manager.

So this is interesting because your package manager can specify which version of your package manager to use. So if you have 1, node installation or you have 1 project that needs a, like, a specific version of Yarn to run and another one that needs a different version of Yarn to run, you can use different versions of Yarn and and PMPM on a different one without having to do the whole switcheroo every single time. And I know everyone's saying, just use Docker. No. I will not not use Docker for that type of thing.

I think I can experience my pain. A little bit closer to using Docker every day, Wes. I think that JS,

that's my my future here. I'm gonna be one of those guys, like, a year from now. It's like, I love Docker. That's so funny because I I have, like, 9 Docker images running on, like, servers. I have a local running. But, like, on my own computer, I just don't feel

like doing that. I'd rather go to several places to start my database itself to boot up my server and then boot up my UI. Rather just run off those processes individually

in a CapEx or anywhere. Like, 47 gigabyte Dockerfile every time I wanna run something. But Docker's crazy. I

it. Let's look at it in run times. We talk a lot about run times, but 96% of people are using Node. Oh, because this is a multiple choice. I'm wondering, like, how are people using BUN and Node? Okay. So Node at 96%, bun at 10%, which is the 2nd highest. Deno, kind of a shocking 2.6. Deno just works, y'all. It is really nice and smooth. I think bun is just like a little extra extra sprinkles on top, But Deno just works to me. You know? Yeah. I think I think the bun is a bit it's kinda like the HT Max answer JS it's a a bit hyped. I I also I think a lot of people are using bun for their their tooling and their build as well

just in like, as an alternative to PNPM or Yarn or or something like that. Right? So you're you're seeing quite a bit of that as well. I'm surprised to see that so much higher than Deno, though, which is, just from I haven't heard of anybody actually running BUN in production just yet. Yeah. I've seen people use it. Like, even on Cloudflare Pages, you can use BUN to build your website and then deploy it to Cloudflare Pages. So you you don't run your website in BUN, but you can use it as the the build tool. Yeah.

Let's talk about build tools. TypeScript, 96% or 90% of people have used TypeScript.

Not surprising given, you know, it's I Wes, 90% is a lot. 90% is a lot to to I guess that is anybody.

Yeah. Yeah. So if you're not on TypeScript and you're one of those people that's holding out, you are part of the 9.4%.

It is funny. Anytime we, like, post things on YouTube, we occasionally get comments from people that are like, TypeScript's a waste of time. And it's like, okay, buddy. It's that's you. You're one of the the people here who are in that 9%.

But, yeah, 94% of people used and liked TypeScript.

Used and liked. 94% used and liked.

But, like, the amount of people that are still using jQuery and everybody is 90% on on TypeScript is is amazing. Right? Like, so there's does that mean like, I would have thought it would the Node would be a bit higher because of legacy stacks. You know? Just just simply can't move it over to TypeScript. But maybe people are just starting to opt in to to writing the new pieces in TypeScript and and then consuming the old JavaScript versions as they need it. Yeah. 2.2%

of people used and liked, Flow. So if you're one of the people who held on to Flow, then, yeah, good luck there.

I do hear occasionally there's some nicer things about Flow, but, yeah, not nice enough for me to to jump on that bandwagon here.

That's a little bit too small. 53% of people said that TypeScript overtook JavaScript and became the new front end standard. I believe that JavaScript will turn into something like TypeScript. 16% of people agreed with that statement. What do you think about that? I whether or not it will turn into something like TypeScript, I do believe that we'll get some sort of types JS comments as that that proposal was where we can write TypeScript it will run as JavaScript.

And we did get TypeScript running support within Node. It's in all of the other JavaScript run times.

It kinda feels like

JavaScript's gonna turn into something like TypeScript at some point. Yeah. Yeah. I don't know that we'll ever get, like, actual types as part of the engine.

Actual types. Yeah. From an authoring perspective, yeah, I think we're we will get that where we can we can write types in JavaScript, and then you can simply consume that via anything. Like, you should be able to run a typed JavaScript file in the browser without having a syntax error. You know? Meaning, like, the engine should be able to strip out those TypeScript 4 it runs it. And then, like, I I think that we'll see once we get that, we'll start seeing some tools that are, like, TypeScript ish, you know, like a new typed version of we'll see tools built on top of that to sort of formalize what that looks like, and and maybe we'll all standardize on on one way going forward.

That might be TypeScript. Might be something else. We'll see.

We'll see.

There's also 1.9% of people who are still holding on to everyone who soon forget about TypeScript.

Yeah. That's that's gonna happen. That's about as likely as AI just going away next week. You know? That's that's not gonna happen, folks. Browser technologies, 82%

people using the Fetch API, which, I guess, other people are still using Axios.

Hey.

Before before you even go on from that, I don't know if you noticed, Wes. But in the front of each one of these section, there's a little there's an pnpm expert who gives a little An expert. Yes. Yeah. An expert. And, actually, 1 the Node before this was Daniel Node. Shout out to, Daniel. He was at our our Syntax meetup, in SF, so it was nice to meet him. But guess who wrote something about fetch? It was me. I wrote something down here. Yes. Fetch. It's both surprising and unsurprising that Fetch has 82% usage rate. On one hand, it's amazing how quickly we've standardized on fetch, which is simple enough that most users don't need external dependencies. That's me putting in my my axios stick right there. On the other hand, we don't usually move that fast. That was my my little, well, I had some paragraphs. Actually, they they tightened it up for me. I'm not a gifted writer. So their staff looked at it and gave it a little editorial, but, this is my my words for the most part. So read my little sentence here and say if you want. Yep. Other things noted, a lot of these APIs that got usage even though they're they're still under 50% Yarn a lot of the things that well, I think we're gonna see more of because they're more native app like features, whether that is, like, the storage, a API, even just using service workers or caching APIs, web workers, IndexedDB, file system API. Full screen. Full screen. Yeah. These things are gonna get more ubiquitous. They're gonna get more available. The one that is kind of crazy is that 3.5% are using Houdini, which what part of Houdini are they using? I don't know. Houdini. Like, maybe with it making a demo. But I disagree. I think that people are using at property occasionally now, and at property is, like, probably one of the only part of Houdini? JS part of Houdini. Yeah. Okay. So Yes. Maybe we can explain what at property is. Do you wanna give a stab, or do you want me to Yeah. No. I'll give a stab. It's basically, you could think of it as, like, types for CSS variables.

So, typically, when you define a a CSS variable, you're just saying, here's the variable, here's the value. And that doesn't tell CSS or the browser a whole lot about what that value is.

And with this at property rule, what you're essentially doing is you're taking, like, 4 lines of code to define a single variable, as in here's what the variable JS. Here's the type of the variable. Is it a number or what? And then here's a default value for it. Now the the cool thing about that is because you know what type it is, it makes interpolating those values possible by the browser.

It's the thing that makes it so the classic example is I can I can with at property, I can animate a gradient? That's that's what's cool about it. But, yeah, I I think for the most part, it's just types for your variables.

The other good use case or I've used at property for is in a key frame, if you want to instead of changing a property in a key frame, like, for example, a rotate value, if you want to update a rotate value in a key frame, you have to say transform, rotate, whatever.

But the downside to that is if you have other transforms, then you you're overriding those by by just simply putting transform, rotate, whatever.

And what you can do with at property is you can just update the variable in the key frame. So you could say dash dash rotate value 20 degrees. And then wherever that variable is referenced, by default, it would just snap because it it doesn't know what the type of the the CSS variable is. But with that property, you can, say this is a a length or a percentage or a degree or something like that, and then the browser will know, oh, this key frame updated a variable, which is a degree. I can animate degrees. Mhmm. So then it will actually give yourself the the smooth animation or transition that you're looking for. Yeah. Counterpoint, I just use the, transform properties, like rotate as a property.

Straight is that is that in all the browsers now? Oh, yeah. Because it was for a while. I I remember talking about it on this podcast, like like, 5 years ago. Oh, it's big, and it has been.

But, like, that's that's great if you are straight up doing it. But if you are using, like, that variable in a calc or something like that, you know, I wanna I I wanna turn this to 12 degrees, but I need to calculate something else based on that value, then it gets a little tricky because you simply just wanna update a variable, and anything that is then reactive to that variable does it. So let's let's look at the update.

What is it? Rotate?

It for it came into fire believe it or not, it came into Firefox in 2020.

It came into Safari in 2021, and it came into Chrome in 2022.

It has 94% global usage.

So you can use that Node. Yeah. You can use it. You can just straight up use the rotate value, which is good because it's annoying to even if you're not using a key frame, it's annoying to have to write transform, rotate. I'd rather just say rotate Yeah. 2, Wes. Do that, folks.

Progressive web apps, the most people think the popularity will slowly increase.

I agree with that. The APIs are coming in slowly, to all all browsers and everything like that. You can now install apps on your home screen in the in the correct ways on many platforms now. So, yeah, I think PWAs will continue, but I think it's more or less like the feature set of PWAs are gonna become more just generally used rather than people focusing on building a PWA, progressive web app.

Like, for instance Yeah. I mean, like, now the stuff I do always has the progressive web app stuff about it. It has a service worker. It has a manifest file and an icon and a theme color.

It works offline. It does all the stuff that a a progressive web app should do, but I've never sat down and be like, let me progressive web appify this thing. Yeah. Yeah. You're just using features that will be Sanity. I'm throwing stuff into the cache.

So I hope so. We'd I we built a little, PWA for the syntax at GitHub Vercel. We had a little iPad on the table, and it was just looping through the syntax shorts that we had and had a big syntax logo and some of the Tolinski. And it it was meant for, like, people walking by warp able to be like, oh, syntax. I've heard of that. And then they would sort of come into the the booth, and then we'd sell them on Sanity.

But I I built just a little a little, web app for that, and then I I used some of the features like turning the tinting the the URL bar and being able to bookmark it and putting the icon on there. One thing I didn't do is I wanted to figure out how to store the dot t s files of a HLS stream. I wanna figure out how to store those locally in the browser so that if the Wi Fi were to go out, they would the video would keep looping.

I got something for you, Wes. Yes. This is gonna be good. What's don't look at the styling tools one yet. Okay.

So given the options which you can imagine most of them, you know, plain CSS, Panda, Sass, styled components, stylus, Tailwind, those types of things, which is the most used and liked? And then, actually, I'll give you, like give me 1, 2, 3.

Most used and liked.

Ways to write CSS.

Yes.

I'm going to say vanilla.

Number 1, vanilla.

Tailwind, and I'm gonna say sass because, like, nobody hates sass.

I'm gonna be I'm gonna be,

that was really good, Wes. Really? Did I get it? You got the you got all 3 of them correct. You got the order wrong. It's plain CSS, then Sass, then Tailwind, which, man, props for nailing all of those. I mean, it's easy to think about potentially any of these other hyped ones, but in reality, like, what else is there? CSS modules is the next highest one, which is, pretty predictable that it would be CSS modules. And then after that, style components.

Shout out to Max who was also at our, Syntax meetup. Yeah. Author of stub components. He's great to talk to. But, yeah, stylus, sadly enough, 3.5%.

56% of people have no opinion on it. They don't even know what it is.

30% of people Scott interested.

Yeah. Rest in peace, stylists.

This this is a really good one to just look at, like, awareness of, like, what is out there. Right? Like, we've talked Panda CSS on this this quite a bit, but, like, I think it looks like almost nobody even knows what what that is. And, yeah, like, Tailwind's huge. Sass is huge. And the Sass one is interesting because like, we did it again. We did a show on, like, can you drop SASS? And, like, almost all of the features of SASS can be done in plain CSS. You know? Nesting's going in in fact, they're even better in plain CSS because they run-in the browser.

Yeah. And soon, who knows once we once slash if we get mix ins and, functions, then that's all she wrote right there. I guess maybe loops. But yeah. It's gonna be yeah. Even, like, there are some features.

Maybe we should, like, do an update as to that because there are now style queries that have come out. There is now a proposal for mix ins and functions in CSS Miriam Suzanne's working on.

We should let's let's do that episode again because when we recorded, we said there is nothing, but hopefully one Node. But now we have proposals for those last few bits. And especially with the style queries, which is part of container queries, but it allows you to essentially do if statements in in CSS. You know? If this Boolean is turned on, then apply all of the CSS.

Man,

gotta love it. Right? Yeah. Gotta love it. Testing.

Who is responsible for testing your software? Developers and QA.

Mostly developers.

Mostly QA. So 10% of people saying mostly QA. So, yeah, that's that's more than I thought. Remember, we talked we talked about that on our previous episode is I didn't think that many people had dedicated QA, and, turns out that quite a few people still have dedicated QA.

Yeah. QA big. People often are are using unit Wes primarily than end to end than integration. I personally do most things in end to end just because of makes sense in a browser context. To me, personally, that said, I know unit testing JS, like, the standard for just, like, oh, I'm gonna learn testing. Let me learn how to test to function. And I'll still do occasional unit Wes, but mostly it's Node just, running the app, in something like Cypress, which has 42% usage here.

And Playwright 36% usage which I thought Playwright at this point would start to overtake Cypress for some reason. I couldn't tell you why. And I do wanna say, I am happy we're using Playwright on the syntax site because, well, not just because of this, but the, one of the I don't know if it's the creator of Playwright or one of the the guys who works on Playwright Yeah. Did a a a code review of our PR Sanity. And, like, updated our things. It was like, your test will run faster this way. I was like, man, that rules. Thank you. That's so cool. Thank you. That's great. Yeah. It's I actually had somebody email me the other day asking, like,

how do I how do I test this? You know? And they had, like, a a user upload the PDF, and the PDF is parsed, and then the parsing values gets fed through this next thing. And they're like, there's there's no way for me to, like, unit test some of the functions just written in such a way.

And, well, I think that unless you were to do a bit of a rewrite and and sort of modify everything, the end to end testing is is maybe your best bet, to have some sort of security and that this thing still works when you finish,

making updates to it. Yeah. Yeah. For real. And, you know, they often have, like, test recorders, which is nice, where you can just click around the site, and it'll record your actions at right the the at least, like, the navigating parts Mhmm. Of using your thing. And that way, you just have to write the the, expects or whatever. I expect this to do that. Code editors,

75% using Versus Code, about 18% using JetBrains.

I also the other day, JetBrains announced the ability to have a free access for noncommercial use, which which I think is huge. Because, like, Scott of times, people say, why don't you use JetBrains? I don't wanna pay for it. You know? I think that's a a big move for them for you can now get a WebStorm, PHPStorm, all of these storms, the JetBrains IDE series for free if you're Scott commercial. So if you're just doing a side project, you wanna check it out, you can get it for free, which I think that's really exciting to see that.

3% on VIM, not even a percent on Sublime anymore. Poor Sublime.

I know. Hey. And guess what? It's over for Versus Code. Cursor has officially killed Versus Code by not showing up in this chart at all. Did we have somebody leave a comment like, too late. Cursor's already got it or something? Yeah. I

I was so I was tweeting all of the stuff that was announced at GitHub Vercel, and, like, I'm no I'm no GitHub Stan. I'm no Versus Code Stan. I like it. I'm here for whatever's the best. I'm a give them star, so I have to like it. Wes. Scott has has a vested interest.

I got no vested interest, but people are like, too late. I was like, brother, I think you're underestimating the fact that, like, GitHub owns all this stuff. You know? Yeah. The heavy hammer. The the the number of poor souls that have used Microsoft Teams because they use Outlook for their email is extremely high.

Yeah.

For real for real. Vercel Slack. It it might not be the best, but, like, I don't know. I'm rooting for Cursor, but I'm rooting for Versus Code as well. It's I don't think it I think it's way too early in this code editing game to even decide a winner.

Yeah. For real. And and, again, it's not even on this chart. So

Yeah. Yeah. Browser code editor.

Code pen coming in high. Code Sanity, Stackblitz, JS Fiddle 10%. This surprised me.

I would expect to see GitHub Codespaces on here. I would expect to see maybe Google IDX on here, You know? Like, the hosted Versus Node Vercel rather than this. But it it seems like people are maybe not using those. Although, like, I heard the other day, Shopify has all of their devs working in the browser pnpm in Versus Code. Right? It's just like a IT breeze JS you don't have to worry about access and having having code on the their local machines, all of that stuff. But it seems like from these answers, like, code pen, you're posting cool CSS demos. Code sandbox, you're posting your broken code.

StackBlitz, you're posting your demos.

JS Fiddle, you're post you're posting a 10 year old,

Stack Overflow answer. Accurate. Very accurate. It's deadly accurate.

Yes. It's perfect. And ESLint Replit's one of these things that I it keeps I keep seeing it. It's it seems to be getting really popular. It seems to be big in the AI space. I need to give that a a fair shake because I I feel like it's becoming extremely popular outside of my bubble.

Mhmm. And those are always interesting to me. It's when people who are learning web development

do something different than what people who are in web development because that might be the next thing. You know? Yeah. Totally. A couple last ones, build tools, Vite, by far, take the cake. No surprise. Vite Rules, big fan of Vite.

2nd place is Wes build. Wow. 3rd place is Webpack. So Webpack, really, feeling the heat now. Linting tools, ESLint. Everybody's using ESLint. Everybody's using Prettier.

30% of people are using and liked Styleint. We use Styleint, and I I like it. It keeps Wes Boston.

Yeah. Yeah. I'm I'm a big fan. I've also been using markdown lint a lot lately, and it's, it does a good job at both formatting my markdown nicely, but also telling me when I'm doing bad things, like not nesting the the levels properly.

Mhmm. The the poor thing go back to the last one, which is Webpack, is almost as many people use and dislike Webpack as use and like Webpack, which is, a bit of a shame, but it's just like a Webpack has become such a huge thing, and the API is not easy, to sort of reason about. Whereas, like, with with Vite, you almost don't even need for a lot of projects, you don't even need config.

You just use it. And then if you do need config, like, it's not hard. Like, I have a 120 line v config, which is pretty complex, and it that was it was a joy to build. I was I was really happy about that.

Yeah. Yeah. Word operating systems, majority of people on Mac. Yes. What's up? That's kinda interesting to me. Like, doesn't

I think most people are not on a Mac if you were to to actually gauge.

I don't know. What would you think? Or you think if you took every developer building JavaScript, do you think they'd be mostly Mac?

Yeah. I mean, I'm so biased here. I can't give you a straight answer because I'm gonna just just say yes. That's what I like and prefer. And I think it's Yeah. A smoother experience for me. But yeah. I mean, you often hear people being, like, who even uses Mac? I mean, a lot of people using it. So,

I wonder if if we were to poll our audience, I bet it would be, like, 72% Mac.

But if you were I bet if you were to poll the wider audience, you would get a bit more heavily Windows.

Mhmm. Let's wrap it up with the future trends. In your opinion, which of the following trends will gain popularity and which will die? So the highest trend of popularity is performance.

That's great to see. A responsiveness.

Wait. It's no. Highest Oh, no. Developer experience. User experience is 90%. Whatever that means. User user experience JS how is that different from developers? Like, how it is for the people using your application? Sure. Yeah. User experience. We want them to be faster, smaller, you know, quicker apps. I guess that all falls under user experience. Right?

Responsiveness.

That's I I I'm hoping that doesn't mean, like, responsive CSS. I think everybody's right in responses. That probably means like like, what I'm reading for this, performance is high. Responsiveness is high. Server rendering is high.

I think that what that means is that we're focusing on how do we make these apps fast and feel good.

Mhmm. So what what will lose popularity? GraphQL, 50% of people think GraphQL will lose popularity, which I think I agree with, not because it's bad. Again, it's just not the tool for absolutely everybody. I think it's clear where the use cases of GraphQL shines. Micro front ends about Node, 30% think it will will gain, and 30% think it will go down. It's a pretty good split.

Yeah. Missing on here, local first stuff.

Yes. Where's the local data stuff on here? I think that kind of falls into several of these things just individually, but nothing specifically.

I think that's something they should be, should be tracking here.

Cool. Alright. Well, that's it. An interesting look at where we're at with our the whole web development scene right now. I always love going through these and just getting a good feel for where everybody's

at. Yeah. Yeah. Especially, again, outside of our bubble, I think, is important here. So, cool survey. I was really stoked to be a part of it. So, shout out to all of the folks who put this survey together and including me in it because it was Node to do this kind of thing. So, shout out to state of front end 2024. Give it a check. Let us know what you think. How accurate do you feel like this is if you're out there and you're listening to us talk about this? If do you feel this is accurate? If you do or don't, leave a comment below. Best place to comment on YouTube. While you're there, feel free to give this thing a thumbs up, a like, a follow, a share,

send it to your grandma, do all that stuff. So thank you so much. And, Oh, Spotify also now has has comments. They Spotify had comments for, I don't know, probably about 6 months, a year now, but you could never reply to them. So it Wes just like people would write stuff, and you'd be like, cool. I have no idea who you are or any how to reply to you. But now you can actually reply to comments on Spotify, which I think is pretty cool as well. So if you're in Spotify, leave a comment as well.

Word.

Sick. Cool. Well, let's get into sick pics and shameless plugs.

Do you have anything

today? Yes. I'm going to sick pick the Flighty Ios app. So I've been using a app called FlightView to track flights for probably 10 years Node, and someone put me on to using Flighty, which is a beautiful Ios app. It's one of these ones that's just so well designed, has all the features, really nice tracking on it, gives you all kinds of cool stats. I used it for my last 2 flights. I was like, this is fantastic. Gives you stats on, like like, historically, this flight has always been 12 minutes late into the game or early, and it updates it. And it puts your flight information right on your home screen as, like, one of those, like you know, I don't know what that's called in Bos, but, like, when you're doing something It's like an action of some kind. Yeah. Yeah. If you're shopping for Instacart, it will, like, show you where your your person is or your Uber will will show up. It does that with flighty, and I think it's a pretty nifty app. It's it's one of those, like like, tap bots or whatever. They build beautiful apps. I feel like it's in that range of of good apps. And I I didn't pay for the the paid version. I used the trial, and then I I don't know if I would would pay for it. But, apparently, you can also just buy it for a week, which I love. Because if you are going on a trip, yeah, shell out for a week of this. It's gonna make your, your life a little bit simpler.

Yeah.

I am going to, sick pick something from our holiday gift guide episode that Wes, brought to my attention. Oh.

Yeah. So you had shared a candle warmer lamp.

Man, I got Kourtney a candle warmer lap for lamp for her office. And what was so funny is that Wes, like, I was trying to, like, I was trying to get it without her noticing it, obviously, but it's coming in from Amazon.

And, like, I it was it was JS as at my son's soccer practice.

The it's, like, 5:30 or or getting close to 6. The package arrives, and I have 5 minutes to get home. In fact, I'm on my way home when the package arrives, and I'm like, I gotta intercept that package. I know Kourtney's making dinner right now, so, therefore, I should be good to go.

I walk in the door. She's already got the candle warmer hooked up and using it. She's like, hey. Did you buy this for me? I was like, no.

Was it supposed to be a Christmas gift? Yeah. It was gonna be a Christmas gift for our office. She's like, did you get this for you? I was like, no. I got it for your for your office for Christmas, and I couldn't believe it. It's, like, 5 minutes since she she somehow, like, not only opened it, but got it going and everything. So, yeah. That's great. Yeah. I I love it. The the one thing about it is that it

as you use it, the smell comes out of the candle, but the candle doesn't burn down as quickly as the smell gets away, and it makes your candles last way longer than if you were to burn them. But, also, you wonder, like, where's that going? You know? Like, the wax is, I guess, going into the air, being burnt. Is that how all candles work, though? Yes.

Yes. But I I have been looking into can you just buy candle scents and put them into the wax once the because you you end up with this candle that has no more smell in it after, like, 3 or 4 weeks of using it. Mhmm. Mhmm. But you still have wax left, so you can

I'm curious if you can Wes buy I bet. Yeah. You just drip your essential oil. That starts a fire.

Yeah. Yeah. Don't do that.

I I thought so too, but I looked it up.

Essential oils have alcohol in them. They're not the right thing for candles will catch on fire. So Alright. Alright. Lesson learned there.

Yeah. Cool. I'm gonna, shamelessly plug syntax on Blue Sky. We're on Blue Sky, blue sky Scott app.

Wes is the URLs for Blue Sky? It's it's b s k y dot app, but what is for syntax? Is it at syntax? Dot f m. Syntax at syntax.fm.

We'll make sure we have a link to that in the show Node, profile syntax.fm.

Check us out. We've been posting there. I've been posting there. It's a it's a band. Besides just being a a Twitter alternative, right, which I think that was, like, the big selling point at first. It's a Twitter alternative.

But there are some legitimately awesome forward thinking features that, they should have figured out at Twitter, like, 10 years ago. So, shout out to Blue Sky for being, I don't know. There's a lot of neat stuff going on there.

Yeah. It's it's a great there's a good community on there. It feels like old Internet. You know? And, I know we did a show on it, like, a year and a half ago, and it it kinda fizzled out. But now there's, like, a second wave happening that seems a lot more significant.

And, there seems to be a lot of, like, web development talk on it, which is exciting to me because, like, threads also did it. But I find a lot of the talk on threads is just why people don't like Twitter. And, like, I just wanna learn about CSS. You know? I wanna I'm I'm coming because there's people talking about web development stuff here, and I feel like that conversation is really good on Blue Sky right now. It's great. Everybody's here. It's a it it's the the vibes are

immaculate currently, before all of the the grifters and who knows what has arrived. But Yeah. I did get one in my so there's a Discover

feed, which is like like, an algorithm based thing that tries to show you things that you like. And I did get, like, a history cool kids or some sort of like, one of these things that just posts, like, photos of interesting things like Facebook Scott.

And I was just like, oh, no. Here it comes. Here it comes. Here it comes. Yes. I know. Yeah. We'll get there eventually.

Another thing was, block blocklists are public, by the way. I don't know if you knew that. Really? You can see who blocked you.

Luckily, nobody who I know or care about has blocked me. So

Oh, that's cool.

I guess it has to be, though, because of the decentralized

nature. Yeah. There's a lot of interesting stuff. And by the way, we're we're having Dan on the show. Yeah. Dan Abramov, who works at Blue Sky, formerly of the React team. Inventor React. Yeah. Really, really stoked, to talk to Dan about this. So, yeah.

Blue Sky. What's up? Alright. That's it. Thanks, everybody, for tuning in. We'll catch you later.

Peace.