458

May 16th, 2022 × #interoperability#javascript#webdev

Why do we need Web Interop? Another Standards Body?

Wes and Scott discuss a new initiative by Cloudflare and others to improve web interoperability across various JavaScript runtime environments like browsers, Node.js and edge functions.

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, Boss, and Scott

Scott Tolinski

Welcome to Syntax on this Monday hasty treat. We're gonna be talking about web interop and what the heck this thing is that Cloudflare just Announced the the other day or, I I guess, by the time you're listening to this a couple weeks ago. So my name is Scott Talinski. I'm a developer from Denver, Colorado. And with me, as always, is the West

Wes Bos

Boss. Hey. Excited to talk about this. It's kinda interesting. It's it's sort of hot on the tails of the stuff that we are talking about, when we talked about our EdgeWorker show. So, I think this will be a nice supplementary episode and sort of cool some of my thoughts about it and My concerns I guess. Yeah. Yeah. Definitely an interesting turn. I don't know if a lot of people,

Scott Tolinski

I don't know it seems like to me like it was announced Kind of out of nowhere. So I'm I'm excited to learn a little bit more about it myself.

Scott Tolinski

This episode is sponsored by 2 amazing companies, Sentry and Sanity.

Scott Tolinski

Also, they both it. Start with the letter s. It's the letter I'm kinda partial to. So shout out to Sentry Insanity for picking great names. So Sentry is the perfect it. Air platform handling service that allows you to see everything that is going wrong in your application. But it also honestly, it's more than just what's going wrong in your application. It also to see what's going right if you're a half glass half full kind of person because Sentry has, Tools to not only track all of the errors and exceptions but performance tracking metrics in your application giving you a chance to see it. Not only which which parts in which routes of your site are the slowest but which are the fastest? Which parts of your side are performing well? It. Which have a lower user misery score.

Scott Tolinski

And honestly, the one of my favorite things about Century is just seeing it. They, just the pure amount of joy that you can get from squashing a bug, marking it as resolved, and having it never come back. That is it. Just one of those great things about using a service like this. So shout out to century at century.i0.

Wes Bos

Use the coupon code tasty treat, all lowercase and all one word, and you'll get 2 months for free. We are also sponsored by Sanity. You know Sanity. We've talked about them all the time, like structured content CMS. Guess what? They're doing a conference, And that's what this ad read is gonna be about. It's gonna be telling you about their conference. It's called structured content 2022.

Topic 1 02:33

Talk about 2 JavaScript environments

Wes Bos

This is an in person and a live stream so you can go to to both. We'll talk about that more in just a second.

Wes Bos

But what structured content 2022 does is it gathers digital teams together to explore how how they can improve their ways they work with tools, and learn how structured content can help. So if you're building websites that have content in them, likely you are. You're gonna wanna check this out. Conference is gonna be a mix of talks, panels, and conversations, covering the foundations of building a content system, real life applications for structured content from great brands like Spotify, AT and T, Shopify, and The New York Times, collaboration methods to connect with everybody who works on contacts. One one thing we've talked about with, Sanity specifically In the past is that they do a awesome job at bringing everybody together who works on this stuff, not just developers and not just marketers. So, it. Some pretty cool stuff. They got all kinds of really good speakers, people from Sanity, people from Spotify, content scientists, you name it, they've got it. Some pretty neat stuff. So check it out, structured content dot live.

Wes Bos

You're able to attend virtually for free.

Topic 2 03:52

Mention of Structured Content conference

Wes Bos

You can also go on down to San Francisco. I was just there myself. It's a pretty cool city.

Wes Bos

May 24 to 25, and syntax listeners only get a code, which is code syntax, all caps, 70% off. Unreal. So, again, free online.

Wes Bos

70% off, if you are, gonna be attending a person. Check it out. Start structure content dot live. Yeah. It's funny.

Scott Tolinski

I think one time we we we We made it to San Francisco without even trying

Wes Bos

last last week. Should we tell that story?

Scott Tolinski

Sure. Yeah. We could tell that story.

Scott Tolinski

After the conference, We ordered an Uber or no. It was a Lyft. So, this is might reflect on the Lyft softwares.

Scott Tolinski

So that's why it's good that we get that right. I ordered a Lyft, and in a normal circumstance, I think you could probably blame me for this, but I showed it to, 3 other dudes.

Scott Tolinski

Yeah. And we confirmed the license plates. Not only that, but the the photo of the driver. Like, it, very clearly was the same driver and license plate as the one that we had ordered. We get in the lift, and she starts taking us into San Francisco, which is not where we were Going. Yeah. So we were just chit chatting. We're just chit chatting. And before we know it, we're like, what what bridge is this? There's no the conference was in Berkeley.

Wes Bos

Yeah. And which is, like, kinda north of Oakland, and we're just like, wait. Where are we going? And she's like, we're definitely not going to Berkeley. We're on this It bridged over to San Francisco, and it, like, took the Scott's app, like, not lying. Scott's app, like, totally switched, from A dude in a car to a woman in a SUV.

Scott Tolinski

The other way around, it switched from the woman in SUV to a dude in the car. Yeah.

Wes Bos

And, unfortunately, we had taken the lift of the conference emcee whose phone was dying, and she could not cancel her ride because she was technically, in the car. So if you're really bad about that, but I reached out to her after and we're all good. Yeah. I did too. Yeah.

Wes Bos

Oh my god. San Francisco, great place. The big apple, they call it. I'm I'm a big fan of that. Mhmm.

Wes Bos

Let's get into it. So the other day, just 2 days ago or yesterday, actually, at the time of recording, Cloudflare says, today, Cloudflare, in partnership with Vercel, Shopify, an individual core contributors to both Node. Jsentino, is announcing establishment of a new community group for web interrupt, JavaScript runtime. So I'm going to start this off with a little bit of a quiz for you, Scott. Can you name, I don't know.

Topic 3 06:07

Start discussing web interoperability

Wes Bos

Ten different JavaScript environments.

Wes Bos

No.

Wes Bos

No. I can't name 10 of them. Can you name 2?

Scott Tolinski

Node and Deno.

Scott Tolinski

Okay.

Wes Bos

And I need more.

Scott Tolinski

Does it isn't is,

Wes Bos

is Cloudflare their own? They're Okay. Cloudflare workers and and what we mean by this is that when code runs, there are people that have Implemented their own environment of JavaScript either by reimplementing the spec, or by taking some other.

Wes Bos

Sometimes they take an engine and add some stuff on top of it. So there are

Scott Tolinski

action script.

Wes Bos

It's not really JavaScript, though. Okay. I wasn't sure. Yeah.

Wes Bos

So there is there's 3 big ones in the browser. The v eight, which is powers, Chrome And opera note. And, it also powers note.

Wes Bos

But note is a bit weird because it, Like, uses VA, but then it also has its own APIs on top of it.

Wes Bos

There's JavaScript core, which powers WebKit, which is The biggest WebKit browser is Safari, but there's other like, the PlayStation browser is is based on WebKit as well. And then there's SpiderMonkey, which is the the engine behind Firefox.

Wes Bos

But then we have, like, other environments, like web workers, which is, like, not a browser environment, But it still is its own environment. There's Deno and Node. We talked about that. Cloudflare Worker. So Cloudflare has cooked up its own JavaScript environment.

Wes Bos

There's AWS Cloudfluntfluntfrat AWS CloudFront functions, Which is we talked about Edge.

Wes Bos

That's the that's their own version. I I recently learned that Bloomberg has its own JavaScript environment, and I was like, yeah, I would love to know more about that. And I got messages from 2 devs I worked at Bloomberg, and they said, the Bloomberg terminal, which is like a trading terminal that, like, streams I used to work at investment bank, and it had, like, Access to all kinds of, information about the markets.

Wes Bos

And apparently, that runs on, like, a Node. Js mixed with the browser and their own environment.

Wes Bos

I asked if they want to come on because I would love to love to learn a little bit more about that. And then I just, like, asked on Twitter. I was like, what other Environments are there, and there's, like, 3 or 4 Java based JavaScript environments, Which is unreal. Like, somebody has reim implemented all of JavaScript in Java. Mhmm.

Wes Bos

There is Hermes CS or Hermes, as people will say. That's the new JavaScript engine that's for React Native.

Topic 4 09:10

List many other JS environments

Scott Tolinski

There's Nashorn, which is Java, Bun. This is kind of an interesting one. Have you heard of this Bun? So I it. I've been following Bun's progress on Twitter for a bit, but the whole Yeah. Every every time something comes up about Bun, I'm kind of like, I what what is it? Like Yeah. Where where does it fit into things? So so, like, I'll see, like, bun is now 10% faster. I'm like, okay. But what is bun here?

Wes Bos

So I I had talked about BUN in the last 2 two times in the last week on Twitter. So I was talking about, like, running TypeScript, into Node. And someone's like, bun does that.

Wes Bos

And then and then I said, what's in another JavaScript environment? Someone said, bun is a JavaScript environment. I'm like, wait a second.

Wes Bos

So, it is a JSX and TypeScript transpiler, CSS and JS JavaScript bundler, a dev server With hot reloading and a JavaScript runtime environment like Node. Js or Deno is written in Zig.

Wes Bos

Never heard of Zig before either. These are a lot of words. Yeah. Yeah.

Wes Bos

Certainly a lot of words.

Wes Bos

So it's kind of like Rust, apparently, Zig. It's a low level VM that is compiled to native code. Kinda interesting.

Wes Bos

So that's another environment that JavaScript runs in.

Wes Bos

Lib. Js is apparently like a a a lib in serenity OS, which I think is a Linux version.

Wes Bos

There's somebody linked me to a, somewhat. There's Jscript, which is the old JavaScript environment that ran on Internet Explorer.

Wes Bos

Apps Script is I remember this. Google Docs used to have their own version of of JavaScript engine called Apps Script, and you could, like, You could only use certain things, and you couldn't use, like, any ES six stuff. Apparently, they swapped that out. I was reading into it the other day. They swapped it out for Node, Which is good, so you can just use Node. So all of this to say, there are very there are a lot of implementations of JavaScript out there in all kinds of from the browser to the server to, Edge functions too. There's even one that runs on, like, a pared down JavaScript environment that runs on, like, microcontrollers.

Wes Bos

I forget the a specific name of it right now, but, there is a lot of places that JavaScript will run. And writing JavaScript that is portable From one environment to another is doesn't exactly always work. When we talked about the edge functions, we said, okay.

Wes Bos

These edge functions, they're not browser. They're not web workers. They're not server side. Like, you can't use all the node modules that you want in them. They're they're not Deno. Right? They are just implementing standard browser APIs, and then sometimes they have a bit of vendor specific stuff added on top. And The downside to that is, like, I always get a little bit scared of, like, okay, I'm going to write this thing in this vendor's a version of JavaScript. Mhmm. But first of all, the like, it's hard to run it locally. Like, I know, Cloudflare had to build this thing called MiniFlare, Which just replicates the JavaScript environment locally because if it works locally in Node, that doesn't necessarily mean it works On their servers, you know, because they're not running Node. They have their own VM of JavaScript.

Wes Bos

So the idea of this, A working group that they it's called Interop, that they've announced is that there's folks from Bloomberg.

Wes Bos

We talked about them. They have their own Cloudflare, Do you know Node, Shopify, and Vercel? So, like, I was, like, wondering, like, what horse does Shopify have in this race, you know, and they said on Twitter, we want their hydrogen, which is their headless react based ecommerce thing. They want they want that to work anywhere. Like, you should be able to deploy Shopify Hydrogen app To literally anywhere, to Vercel, to AWS, to Cloudflare Workers, to, you know, anything. So that's the horse they've got in that race. And then Vercel, obviously, they're They're a big, implementer of serverless and edge workers and and all that stuff. So so this is kind of exciting. You might be saying, like, okay. Like, do we need another standards body. I've got a x k c d art, joke that I can show you about an an extra standards body. So, like, we have Alrighty. Lots of standards body. We have ECMA TC 39 as a committee that they're responsible for, when let in const Or when a sync would like the JavaScript core, syntax and functions set time out. That that's TC 39. Right? But then we have the what w g, the the what w three c working group.

Wes Bos

They're responsible for, like, web APIs.

Topic 5 14:04

Describe JS standards bodies

Wes Bos

They were responsible for fetch, initially, Add event listener, click handlers, things like that. Stuff that's in the browser, that that's what they are responsible for. The the, HTML 5 video API, that kind of stuff. Right? And then we have the no JS TSC technical steering committee. They're responsible for node APIs.

Wes Bos

And that's it. That's why, like, why we didn't have fetch in Node for so long because fetch was not a JavaScript spec. It was a browser spec.

Wes Bos

And then they said, okay. We we should implement that in Node as well. And then we have Deno, which Deno's whole thing was that We are, of course, that you're gonna do TypeScript, but we are just going to be implementing browser APIs or or, like, JavaScript APIs and not making up. Well, they do have some of their own as well.

Wes Bos

So that now we have Deno has a whole set of APIs as well. They're pretty tightly bound to the web APIs.

Wes Bos

And then we all of a sudden, we start having all these other ones, Cloudflare Workers and AWS and, and all kinds of stuff. So, like, what do we How do we standardize this type of thing? And and that's the sort of the idea behind this working group is that We they say we're not going to make our new our own APIs. Right? Like, they're not going to be saying, like, okay, we should have a, A dog API that just returns random dog names. Right? So they said that they will go upstream to What? Wg or t c 39 or or whatever.

Wes Bos

But what they are trying to do is that, if you write some code and it works in Cloudflare Workers, you'll be able to bring that thing over to Node. Js or Deno or another, Serverless or edge compute provider, and that thing should just run properly. Right? And there shouldn't be like apparently, there's this huge thread that There's some slight variations between fetch in all of these different platforms. So, like, what a pain in the butt that would be is, like, okay, well, fetch doesn't work properly it. With headers in this environment, so we gotta I gotta use some sort of, like, package that sits on top that normalizes it. Right? And now we're we're back browser inconsistencies again.

Topic 6 16:24

Goal to standardize APIs across environments

Wes Bos

That's kind of what the whole idea behind this is, and it's pretty exciting. They have a huge list of APIs that they're trying to standardize that works across the board in all of these different platforms, which is pretty cool.

Wes Bos

And, like, I'm just kinda sitting here being, like, okay. Like, what does this mean? What like, what's the future of this? And what I'm thinking is that we are going to soon see You just say I'm compliant. I don't know what they're going to call it. I'm going to I'm calling it worker ready. And that's because, like, I once tried to put a package in A Cloudflare Worker and it didn't work because it was using Node APIs.

Wes Bos

Because Cloudflare Workers has implemented the webworker spec.

Wes Bos

So I bet we're going to start seeing packages that say works anywhere, works in the browser, works in any of these JavaScript environment, works in Deno, works in Node. It's not using any APIs that are specific to those platforms. Right? Like Like Node. Js has has read and write file. Deno has read text file. The browser has, what's the browser? File File reader API. You talked about that in one of the last episodes.

Wes Bos

Yeah. File system API. So, like, I bet there's probably already this. Like, you get a ESLint rule that says, Don't touch any of those APIs because if you're trying to build something that works literally anywhere, you're a little bit more constrained. But the upside to that is that It will be able to deploy and work anything anywhere. And somebody on Twitter even already linked me to this thing called Un. Js, Unified JavaScript tools, and it looks like the whole idea behind this is that, it's a set of JavaScript toolings.

Topic 7 17:42

Tools will work across environments

Wes Bos

They have a A better fetch API, which is kinda interesting.

Wes Bos

IPX, high performance, secure, easy way to image proxy.

Wes Bos

Nitro, build and deploy universal JavaScript servers.

Wes Bos

This seems like they got all kinds of packages in there. And I bet we're gonna start seeing a lot more of that where they say, okay, I built this library. It works literally anywhere. I gotta say,

Scott Tolinski

some of the Contributors on this this on JS are making me kind of excited. Like, Anthony Foo, He does a lot of really great stuff, and Fu. He Oh, yeah. So I I'm a big fan of many of his projects, so I've never heard of this. I'm gonna have to take Take a look at a lot of these repos.

Wes Bos

So he is the dev. Oh, my gosh.

Wes Bos

Look at the contribution graph.

Wes Bos

Like raw solid green every single day of of the year. Let's see. Christmas

Scott Tolinski

day. Yeah. Yeah. Yeah. And and many of these projects are things that I I Using love, like, he he's he works on v test and all sorts of stuff. So, yeah, big fan.

Wes Bos

Only 8 contributions on Christmas day.

Wes Bos

Only 8. What? Holy holy smokes. That's impressive. Impressive. So, yeah, That's, that's where we're at with this type of stuff. We'll be sure to keep you updated on it. But that's exactly one thing I said When we talked about the edge workers is that it's kind of weird that they all have implemented their own API, and that makes me a little bit nervous Because you're not just writing JavaScript at the end, then you're writing JavaScript that is targeting 1, corporate entity deployment. You know? Right. Mhmm.

Scott Tolinski

But the promise of that it works just works dot tm is is pretty great you know yeah I mean anybody who's written Full stack SSR applications in the past couple of years knows that some of those issues are the most prominent things you run into. You Install something and just straight up doesn't work. And then you'd say, alright. Well, I guess I'm not using that, or I'm going to have to fork it and figure out why it's not working or who knows what. I mean, I've done that a handful of times myself. So having things just work in different environments seems like a good good win.

Wes Bos

Absolutely.

Wes Bos

Alright. That's it for today. Thanks for tuning in. We will catch you. Oh, one more thing. Sorry. I forgot to say. The website for this working group is The web interoperability runtimes community group or wintercg, and it's available at wintercg.org.

Topic 8 20:25

Announce web interoperability working group

Wes Bos

They have a list of And other FAQs and and whatnot. So shout out to people that do this type of thing. Like this is not writing code. This is trying to Have meetings and take notes and to come up with proposals and to listen to everybody's hot takes on Twitter and all that good stuff and align goals and whatnot. And, like, that's a that's a whole skill in itself. So shout out to everybody who's working on this type of thing. You have a high high level of synergy in your life If you're to do that, your synergy scores are off the charts.

Wes Bos

You don't just get to do a podcast talking about it. You actually have to weigh pros and cons and come up with specs and everything, so shout out.

Wes Bos

Beautiful. Alright. Thanks for tuning in. Catch you on Wednesday.

Scott Tolinski

Peace. Peace.

Scott Tolinski

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 it. Or drop a review if you like this show.

Share