Why do we need Web Interop? Another Standards Body?

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

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

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,

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.

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

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.

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.

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.

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.

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.

You're able to attend virtually for free.

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

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

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

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

last last week. Should we tell that story?

Sure. Yeah. We could tell that story.

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

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.

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.

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.

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

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.

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

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.

Ten different JavaScript environments.

No.

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

Node and Deno.

Okay.

And I need more.

Does it isn't is,

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.

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

action script.

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

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.

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

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.

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.

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

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.

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

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.

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

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?

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.

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.

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.

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

Certainly a lot of words.

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

So that's another environment that JavaScript runs in.

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

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

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.

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.

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.

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.

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.

They're responsible for, like, web APIs.

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.

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.

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.

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

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.

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.

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.

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.

Because Cloudflare Workers has implemented the webworker spec.

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.

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.

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

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

Nitro, build and deploy universal JavaScript servers.

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,

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.

So he is the dev. Oh, my gosh.

Look at the contribution graph.

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

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.

Only 8 contributions on Christmas day.

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.

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.

Absolutely.

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.

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.

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.

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

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