433

February 21st, 2022 × #javascript#nodejs#webdev

JavaScript in 2022 - New, Coming and Proposed Features

Discussion of new and proposed JavaScript features in 2022 including the Fetch API in Node.js, pipeline operator, JSON modules, BigInt math methods and more.

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

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,

Wes Bos

Boss, and Scott

Scott Tolinski

CSD. Welcome to Syntex.

Scott Tolinski

On this Monday, hasty treat.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Topic 1 01:27

Introducing Magic Bell for app notifications

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

Thank you

Scott Tolinski

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.

Topic 2 02:50

Introducing Sentry for error monitoring

Wes Bos

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

Scott Tolinski

Oh, that is weird.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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,

Wes Bos

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

Scott Tolinski

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

Wes Bos

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.

Topic 3 05:20

Fetch coming to Node.js

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 4 06:05

Fetch coming in Node 16 and 18

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Wes Bos

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

Scott Tolinski

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,

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Topic 5 09:56

URL imports coming to Node.js

Wes Bos

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

Wes Bos

This is something that should be landing in node 18.

Wes Bos

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.

Topic 6 10:22

Security concerns around URL imports

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Topic 7 12:16

JSON modules coming to JavaScript

Scott Tolinski

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.

Wes Bos

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.

Topic 8 13:04

Other module assertion types like text

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Topic 9 15:02

node: prefix for Node.js built-ins

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Topic 10 16:30

js: prefix proposed for JavaScript built-ins

Wes Bos

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

Scott Tolinski

Yeah. I should instant.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Topic 11 18:12

Pipeline operator for chaining functions

Scott Tolinski

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

Scott Tolinski

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?

Wes Bos

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

Wes Bos

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

Wes Bos

And what's the extra s?

Scott Tolinski

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.

Wes Bos

Yeah. Yeah.

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

Yeah.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

So apparently, I didn't even know this.

Topic 12 21:31

Reversible string split proposed

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Is that something that you plan on using?

Wes Bos

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.

Wes Bos

Right? And Mhmm.

Wes Bos

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,

Topic 13 23:23

JavaScript module blocks proposed

Scott Tolinski

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,

Wes Bos

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,

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Scott Tolinski

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

Topic 14 25:24

String.cooked for parsed template literals

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

A proposal.

Topic 15 26:41

BigInt math functions proposed

Wes Bos

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?

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

probably most excited for fetch as well.

Wes Bos

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

Wes Bos

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.

Scott Tolinski

Peace. Peace.

Scott Tolinski

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

Scott Tolinski

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

Share