JavaScript in 2022 - New, Coming and Proposed Features

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes, Barracuda,

Boss, and Scott

CSD. Welcome to Syntex.

On this Monday, hasty treat.

We're gonna be talking all about changes and updates to JavaScript new in 2022, New coming and proposed features.

A lot of interesting stuff and a lot of interesting proposals as always.

And my name is Scott Talinsky. I'm a developer from Denver, Colorado. And with me, as always, is the West Boss.

Hey. This is another fun one, to talk about new coming and proposed features to JavaScript. I always love talking about what what could happen, what

When these are useful, I don't know about you, but this stuff is exciting to me. Super exciting to me. I think it's kind of evident by both of our career choices and choosing to be on the latest stuff here. We we love it. So, yeah, this episode is sponsored by 2 amazing companies, Magic Bell and Century West. Do you wanna talk about Magic Bell and I'll hit Century.

What the heck is Magic Bell, you ask? Magic Bell is a notification inbox for your product.

So let's say you've got a SaaS app or something like that. You need to be able to notify your users of somebody gets followed, something is shipped.

Literally any notification inside of your application, you think, okay, like, that makes sense.

I I could just have an array of cations and push that into the array and bing, bam, boom, you're done.

Not that easy. Right? Like, what if they want an email and in the app, But not a push notification on their phone. Or what if they saw it on the app? Do you still email them about it? Because that's kind of annoying.

Right? And then, what if somebody wants to filter out only certain types of notifications? Like, wow, that that starts to get really, really complicated. So magic Spell something integrate into your application, that will allow you to, have full control over your Notifications in your application. It is really, really cool. They've got a really good API.

They have full support of it. They're rolling out new stuff all the time. Check it out at MagicBell.com. Wicked domain. You get a free 100 miles, Which is, monthly active users.

And if you use a coupon code syntax f m, you get 10% off for the 1st 12 months.

Thank you

For sponsoring Magic Ball. Sick. This episode is also sponsored by Sentry at Sentry dot I o. Sentry is the perfect a place to see all of your errors and exceptions happen. Not only that, but monitor the performance of your application and just make sure everything is running smoothly. It. I like to think about, Century as being, like like, a super cool warning light in my car that's like, there's there's 500 issues.

Imagine my wife was telling me that some people call them dash emojis.

Oh, that is weird.

That is funny. I've never heard of that at all. That's super funny.

Century at Century dot a o is a is a really great place to keep track of all of that stuff. You know me, I like to make sure that all of my things are running smoothly and that I don't have any issues. So I use Sentry, and I have it Alert me. I have it send me an email on regressions, but I also have the Sentry performance metrics tools tracking set up so that I could see that when I, just send on my latest release, and I was able to really squash user misery quite a bit because we had reduced the loading speed of, Alright. I would say we increase the loading speed, but we reduce the loading capacity of some of our our pages, making everything run smoother. We added better caching, and Century was there for me to see that it actually made a difference with the real users on the front end of our site. So if you wanna give Century a try ahead on a recent d I o, use the coupon code tasty treat, all lowercase, all one word, and you'll get 2 months for free. Thank you so much for Century for sponsoring.

Alrighty then. Did you see oh, a little Ace Ace Ventura. A little Ace Ventura to kick off the

it's funny that sometimes, like, those slip in. Like, The other day, I was like, to my wife, I love gold. Oh, wait a second. I haven't done or, like, what's the Napoleon Dynamite? Core. Oh, my.

Yeah. I say I love gold so much to my wife, and I didn't even like that movie. I like the you know, the first 2 were great or whatever. The third one, I don't not so much. But I say I love gold so much for no reason. And I'm like always every single time, she just gives me a look like, what are you doing, man? What is going on here? I'm pretty sure that was, like,

That was, like, VHS old, isn't it? Yeah. As it may have been. DVD.

Definitively that we at least had the 1st Austin Powers on VHS.

It. Oh, man. Alright. Well, let's let's get on into it. You wanna grab the first one there? Yeah. You're the one that told me about this.

Yeah. Yeah. So one of the neat things coming to Node. Js specifically is something that we've been really dying for for a long time, and that is fetch as in, yes, the fetch that we're used to having inside of the browser is going to be ported into node.

And it says it's coming see, I didn't I didn't know this because I saw Mateus say it was coming in in Node 18. But, Wes, it seems like you've done some digging to find that, it's actually coming in Node 17.

And the reason Is because the even ones are long term releases. Is that the that's the the way they say that? What it does? Yeah. So for Some reason, I thought I saw that it was being released in node 17.

Maybe that maybe you're right about node 18, but I did See that is being backported to Node 16, which is really exciting because Node. Js uses long term LTS, and that's generally the long term support. That's the version of node that you use if you're running Any sort of, like, big production. I often will go newer and hit issues and whatever. But generally, if you want to keep it nice and safe and you know that There is going to be supported for security.

You use whatever no JS is supporting us. Lts long term support. And those are all the even numbers. So 16 will come out with LTS.

17 will get a whole bunch of new features, and then 18 will come out and that will be in the next version of of LTS, which is really exciting. So it looks like it's still under a flag, but those things usually don't stick around for too too long in under flags world, and we'll be able to use it under flags world. That sounds good.

Yeah. Meaning that like when you run node you have to use experimental fetch.

And then eventually that will just be turned off and you can just go ahead and use it, which is pretty exciting. One thing I did see about it is that It is going to be a global API, meaning that you can just write fetch fetch and it will work the same way you can just write console log in your code and you don't have to import it from from anywhere.

So, Yeah, it's great. It's really smooth. It's probably going to be a while before you have are able to just go ahead and do that. But I imagine the isomorphic fetch We'll check for the existence of the built in. I I called it native on Twitter, and I had a whole bunch of people freak out on me. It's not native, apparently.

Apparently, it's written in JavaScript, and native would imply that it was written in c plus plus.

Well, okay. So I I saw some people being like, why do I need this? We already have isomorphic fetch, or we already have node fetch. Why why do I need this? Wes, what would you say to those people? I don't wanna have to import it. Alright? I don't wanna have to Install it or keep it up. Install it. It's such a basic thing that

You have to do for every single project. It's the same thing with jQuery.

Like like years ago, you before you wanted to do anything with the dom. You had to throw jQuery in there, and that's a pain for having to get up and running quickly. But it's also a pain for just another dependency that we now have to install and manage and update and things like that. And that is a very basic thing in software development is making a request to a server and getting the response back. And that is something that's in the browser. That is something that is in Deno And is now something that we can have in Node. Js world. Yeah. It's just gonna it's gonna ease that that

That, like, browser to node, you know, problems that people can have, especially when they're first starting out. Oh, why don't we understand why fetch is here and it's not here? I thought that It's part of JavaScript. No. It's not part of JavaScript. It's part of the browser. You know, all of that confusion between what's the browser and what's node, can be eased just a little bit. Yeah. So it's a web API,

which is governed by the what w g. The what? The what? And the JavaScript itself is governed by ECMA.

And then nodes APIs is governed by the Node JS Committee, which is kind of kind of bizarre, right? So it's like it's not just it's not just JavaScript, it's We have the fundamental language, and then we have APIs that are specific to platforms.

Node. Js, Deno, or web workers is another one. And of course, in the browser.

All right. Next one we have here is URL imports in Node. Js.

This is something that should be landing in node 18.

And what that means is that you'll be able to import modules and import functions and data From a HTTPS URL directly. So instead of having to npm install it, you can simply just import it. That is part of the ESM ECMAScript module spec.

And it just has not been in Node. Js yet. There's some there's some security concerns around That being an issue because if you're if everybody's importing something from a URL, that value can change.

And there's stuff around that. Like right now, like, let's say you go to a website and you download a DMG file and install that. Generally, those will have a hash on them. And if the hash of that software bundle changes, or even even with JavaScript, if you do script source equals Bundle. Js. You'll often see a hash in that. And if the bundle changes before the HTML updates, the browser will reject it because it could potentially have been injected with malicious code. So that's kind of what they're still trying to figure out how to do it. But That's really exciting because, again, that's you don't have to npm install. You don't need to have a package JSON for these things. As someone who writes a lot of quick scripts, I really like the idea of just being I don't think it will totally replace it. Like, I'm not particularly fond of the way Deno does it. I don't mind npm installing something and having a nice list of all the versions that I have, but it will be nice to just go out and grab something straight from a URL. Totally.

Yeah. Yeah. And I I don't know how much I'll love it or use it or any of that stuff. But again, yeah, at least nice to have that as an option. Next one is gonna be JSON modules. Now JSON modules, this one's been coming down the pipeline for a little bit. We've been I think we've probably mentioned it before, But you might not know this, but many times when you're importing JSON in your current applications, it's not JavaScript or ESM that's doing the importing. It's webpack, your bundler, whatever, loading that thing up, transforming it, turning it into JavaScript anything that you you can to be able to read it, but we're gonna have the ability to import JSON straight up.

And the syntax for that, it says import thing from your dot JSON file, but then you need a assert And then an object that says type of JSON in a string. And what this is doing is telling, your Your code, essentially, that this thing I'm importing should be asserted to be JSON. And and this kind of opens the door for a lot of interesting, different types of imports. I think and is this the first thing that we're able to assert in imports. I think it might be, Wes, right? Yeah. I remember.

I feel like we talked about as text being a thing as well. This was back when we did in the summer. We did another one of these shows where we talked about what's coming.

And there was this proposal for assertions in imports. And one of those was in order to to do JSON modules.

And then there was another example of being able to import text, which is kinda interesting as well.

Speaking of which, Vite actually has that To import something as text, I believe it's just like you do, like, raw or something in the import. Oh, yeah. And I I had to find I actually it. Myself using that way more than I expected to. I I have no idea. Like, I was importing a markdown file, and instead of doing, like, A, you know, special import to import markdown files. I just imported as raw text and then passed it through Marked. I was like, wait.

This is easy. I didn't have to have any special importer for that. Yeah. And, like, if you've done that in the past, you probably have to use, Like a FS.read file.

You have to weight it and it's, that'd be kind of cool. It's kind of neat that you can, like, sort of like try it out in these Webpack, v, whatever world. And then if it's like, oh, this is actually really handy or like people get so used to using it inside side of their framework, and then they go back to straight up node or just straight up JavaScript. Oh, that's not actually something you can do. You can import The, like a big use case for this is reading the values of the package. Json Inside of your node script, if you want to get the name or the description or the author or anything that's in the package. Json.

And we've been able to do this with Common JS require for the longest time, and it would just check if there's a JSON file with that name.

And I've used that quite a bit. But I even if I have JSON, I just make it a .js file because the pain in the ass at writing like like writing a straight up JSON double quotes. No trailing comma. All that big pain in the butt stuff.

Pain in the butt. Next, what we have here. But stuff.

Next one we have here is, this is just kind of a little interesting thing is adding node colon in your import URL team in Node.

Js. So, you know how Node has all these built ins path URL FS crypto.

They have all of these built in libraries in node and you just import it from Import from past URLs. Crypto. Yeah. And like for a while there was like a package called crypto and then Node got crypto built in, right? And every time I see myself using crypto, I'm like, is that the package or is that the built in thing, you know? And so now they have introduced this idea of writing node colon path URL f s crypto.

And then, you know, just by glancing at it, that's a built in because it's prefix with node colon. Doesn't change any features.

It just simply is a way for you to see what's going on. And I think the idea there is that if there's ever if there's ever overwrites in naming or collisions or you have a local because of the way node looks up files. If you have, like, a local file of the same name, I think it goes to that one first.

This will sort of alleviate any of those potential edge case issues. And then also seems like JavaScript is proposing This as well. So you'd be able to do, import.

Let's let's use temporal. What's one of the temporal API methods? Yeah.

Yeah. I should instant.

Yeah. So you import instant from temporal or j s colon temporal. So Right now, this doesn't exist in JavaScript land. Every time we get a new API date console temporal I n t l. They're just global things that are just available to us. But the sort of the idea is that as the standard lib in JavaScript Expands.

You can't just keep stuff and stuff into the global name space and say, hey, it's there if you need it because it gets very, very large. So the idea is that The browser and and the language will ship APIs, but they're not included until you go ahead and Supposedly import those values just like it is in Node. Js land. So that's pretty cool that I think that's why it. They sort of thought about this, and now both Node and JavaScript are

adopting it. Cool. Well, okay. Let's it. Into the next one here, which is going to be the pipeline operator. Now the pipeline operator, I think, can confuse some people. Maybe they say, like, what's the point? What what what is this thing doing for me? But I think, I think West had a really nice little message here. A little little, little explanation as to why this thing is so interesting because specifically, it. Let's say you want to perform some sort of operation. You're doing, like, math dot max on two numbers. Then you run them through another function that's, like, calculate something. Right? Calculate bill is what you have. Calculate bill. Yeah. Calculate bill. And you're talking about, like, the type of bill you get at a restaurant, not like the a person named Bill.

And then you might wanna, like, do something like console log it or or do something else with that. Now the that's all well and fine. You can do that. No problem.

But if you visualize that, what you end up doing is starting in the middle and working your way out.

Right? The very first thing you do ends up being the thing in the middle, Then you have a rapper, then a rapper, then a rapper, and it it's kind of confusing that the thing you're actually doing first isn't the first thing listed. Right? You have bed mass listed here. What is bed mass mean?

Brackets, exponents, multiplication, b e Brackets. Let me start again.

Brackets, exponents, division, multiplication, addition, subtraction.

And what's the extra s?

I don't know. Is this, like, math thing? Is this math thing? Do not do you not grow up learning bed mass? No. I've I've never heard the word bed mass. I just I know the we call it the order of operations.

Yeah. Yeah.

That's there's no double s. For some reason, I thought there was 2 s's on the end of beta. So, like, Bed mass is how math works. You do your brackets first and then you do your exponents, and then you do your division, then your multiplication, then your addition, and your subtraction.

And JavaScript works very much the same way in that you have to do the stuff in the brackets first.

Right? And if you have something that is strung together 3 or 4 times, you have to sort of start. You figure out, okay, well, it's It's doing this 1st and then passing it to that. And the other thing is there, you could just do a new variables on every single line. Right. And that's kind of a pain as well. So this Pipeline operator will allow you just to hot potato math that max. And then you you you pass that a number into the next function. Calculate bill that runs it and returns actually like, you know, how nice chaining your race is. Yeah. Imagine you could Chain your functions. Yeah. Yeah. I just it's I always just call it hot potato. Throw the data from 1 function to another. So it's not changing your functions. It's hot potatoing.

It's hot potato ing. Yes. Yeah. That's the, that's what the literature says. That's what the literature says. Yes.

Yeah.

And and it's called the pipeline operator because it is a literal, like, pipe, the character pipe. That's the vertical character that's above your backslash. That's above it. Your return, is the pipe character and then a carrot. That's the way that this will be denoted to say, hey, this is this thing Pipe caret the next function. Pipe caret the next function. Pipe caret the next function. Now I would be remiss if I did not mention that there's 2 sort of Competing ways that people are are kind of arguing on on Twitter about this and arguing in in the various spaces. The f sharp pipes it. As well as the hack pipes. Now hack is a language, and f sharp is a language, and they both do pipes slightly different.

Now I personally don't know too much about this argument. I don't I don't want to misrepresent it. So, head on over to the pipeline operator.

Read me here if you want to read a little bit about what the difference between those 2 proposals are and what the pros and cons are because I know that it's Quite a in-depth conversation there. Next one we have here, this is very underwhelming, but it is it is, in a proposal right now, which is Reversible string split.

So apparently, I didn't even know this.

When you use a split function in Perl, Java, PHP, Ruby, Python, Go, and Rust.

You can pass a second argument to that split, And it will tell you how many, how many of the items you actually want. So and JavaScript does this as well. So you've got, Wes cool boss. And you want to split that string on space and to get an array of 3 things. Wes cool boss. Right? But if you only wanted the first two things, the 2nd argument to split is how many do you want? It's 2. And then that will just give you West. Cool.

And JavaScript differs from literally every other language in that the remaining items are lost to space, Whereas every other language will return to an array of, oh, here, you know what? Like, I got you the items you want. But here also is The rest of the things that you didn't want. And that's that can be really handy for, if you're like, all right, I just want the first two things, but then the rest, even though there's commas in them or whatever. I just want that as a string. So the idea here is that you would have a new method called split n, and it'll just give you the remainder of the elements when you split them. Interesting.

Is that something that you plan on using?

Yeah. I could see it being interest because, like, that's how, like, the rest prem when you're destructuring works. Yeah. You know? Like, you're like, give me the first 2 things and then the rest.

Right? And Mhmm.

And that kind of makes sense to to do that. And also people coming from literally any language, another language, would find themselves needing that as well. So I could I could see it coming up, like, 3 or 4 times. It's one of those just, like, Minor things like, oh, that's nice to have now. Yeah. I do often find myself,

like, trying things that worked in Python and being like, Oh, yeah. This doesn't work in JavaScript. Oops. Yeah, I forgot. And also, like, maybe not me because I work in,

like, pure database and whatever, but A lot of times people are working with just like strings and they're getting data from I don't They're getting data from, like, some sort of data set and they need to split it themselves. There's like a certain type of developer that has to do a lot of data processing Before they go ahead and do it,

and I think this would be very helpful to them. Word. Okay. So next one here is going to be JavaScript module blocks.

I don't know too much about this, West. Do you know very much about JavaScript module blocks?

I was reading the proposal, and I don't Entirely get it. So the idea is that you can make a block, which is a curly brackets, And inside of that, you can export multiple values. And apparently, the use case for this is, If people are importing values into web workers or into CSS, Houdini Paint API, There is a lot of limitations around importing code from another URL.

And this kind of comes back to the We're talking about importing stuff from a separate URL and Node. Js as well.

Apparently, there's some course issues. So being able to have a file that imports The API from an external package and then immediately turns around and exports it is there. So I don't I don't totally get this. So I added this one in there just because it is new, but I would love to to see an example from, somebody. There's obviously examples in the Proposal. But if anyone on Twitter at Syntax of M has a better example of what they would want this for, let us know. Yeah. It's interesting.

But I yeah. Again, I I don't know when when and where I which I would use this. Yeah.

Last 1 we have here, and this is probably my favoritely named one, is a string dot cooked. Oh, so we have tag template literals in JavaScript, which is when you use a back ticks, You can tag them with like you can take them with GraphQL or styled component or Literally anything. And it's it's kind of like a function.

And if you want the returned value from that function, You have to make a function that that returns the tag template literal.

And string.cooked is, sort of the opposite of string raw, where it will give you the parsed value of your template literal without having to create a whole entire function. So it's sort of just a shorthand syntactic sugar On top of a function returning a tag template literal value.

I really like the name of that one, so I threw it in there. That is interesting. Yeah. Again, I don't know how I'll use this one, but I might just so I can type string dot cooked. That's pretty great. I love that. It's the opposite of string dot raw. That's Very funny and also makes a lot of sense.

I believe that is it. There's 1 more here for big into math.

A proposal.

Big hit. So I don't deal with big enough numbers for this to matter for me. But there is a proposal to add a whole bunch of mathematical functions around big ints, which is not just regular. And we always say JavaScript doesn't have different types of numbers. And that's always kind of a lie because there is this thing called the big end, which is new ish in its own. Yeah. Yeah. And if you need to do math, You wanna find the min or the max of big ints?

You can. Yeah. So those of you who are out there doing BigInts, BigMath.

These could be interesting to you. Again, I don't work with Shout out to all my big int friends. Shout out to all my big int friends doing big math out there. We we, we see you. We hear you.

You're working with big dang how those numbers get so big. Yeah. That's what they're saying. Now we can now now we can work with them with some big int methods. Alright. I think that is it. Anything else to add or should we wrap it up? No. I've wrap wrap it up. I I'm you know what? Out of all of these, I'm most excited for fetch in node even though it's functionally not going to change my life that much. And, the pipeline.

Which one? Which one's Wes? Which one sparkle the most to you? Which ones are you staring at and saying like, oh, baby. Yeah. I am

probably most excited for fetch as well.

Pipeline operator is going to be they've been talking about this forever.

I'm really excited about that as well. The rest of these are just like, That's nice. I need to know about that. I put that in my back pocket, but it's not something like, Oh, my gosh. Importing JSON in the AcmaScript file. Oh, it's amazing. Like, what a what a relief, you know? Yes. But it is. It's it's It's stuff that needs to get done as well. Dope. Alright. Thanks for tuning in. Catch you on Monday.

Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.