Node in the Browser × WebContainers + NodeBox

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 Syntax.

Today, I can't contain my excitement because we're gonna be talking about Node in the browser and web containers.

There's a lot of really neat stuff here talking about how we can actually run Node JS in your browser, which, on the surface, you know, you might never have thought about it, or maybe you think that it's absolutely wild. It it. It is absolutely wild. We're coming from a place where now we can run server side code directly in the user's browser.

It's bananas. I cannot, even wrap my mind around it sometimes. My name is Scott Tolinski. I'm a developer from Denver, and with me as always is Wes, the contain main boss.

Hey. Yeah.

Let's do our sponsor real quick, and then we'll get into what web containers and Notebooks are. We're sponsored today by Sentry at Sentry. Io.

They are it's it's funny. Sentry keeps rolling out lots of new features and whatnot, so it's it's not fair just to say they are the error Reception tracking that we've been saying for all these years. Basically, on their website, they say working code happy customers.

Basically, If you want to know why your website is crashing, you have broken lines of code, you have users that are unhappy, API calls, performance issues.

Sentry will give you crystal clear insights into how and where and why that is happening For your applications, you need to turn Sentry on in your app before you need this info. So check it out. Sentry. Io. Use a coupon code tasty treats, and that is going to get you 2 months for free. Thank you, Century, for sponsoring. Have you tried Century's

Cron monitoring stuff yet? It's in beta. I haven't tried it yet, but it looks neat. No. Cronmon is a a sick name for, like, a hardcore band, though. Crap mod. Yeah. This will tell you if you are, if any of your jobs are failing or if they're running on schedule or if they're succeeding, like, at a glance. Gotta love that. Right? Oh, that's nice. Yeah. Because it was those cron jobs you kinda hope they're hope they're going, you know. That's exactly right. Like, maybe Yeah.

I think they're running. Sure. Yeah. You want to see the output of those, even if it's just console log. It worked.

Yeah, that's cool. I'll have to check that out as well. Yeah,

Let's get into containers. Yeah.

So, I think about a week now that you're listening to us a couple of weeks ago, Stackblitz released this thing called web containers, or they've been working on it for a while, but they did, like, A big push to it. And then a couple of days later, Code Sandbox released a thing called Nodebox.

And so let's give a quick rundown of what these companies are. So Stackblitz is a both of them are like what I assume to be web IDE's, meaning that they are kind of like Versus Code that just runs in the browser. And we actually are going to do an entire a show on all of the offerings around this right now because some of them are like browser based IDs and some of them are remote IDEs, meaning that they're running on a server somewhere, and then some of them are also like light VMs, like code sandbox. You can run like a node process and like, how do they do that if You're not paying them. So Stackblitz rolled out web containers and CodeSandbox a couple of days later rolled out Nodebox. And both of them, they're a little bit different. We'll talk about the differences between the 2. But at the end of the day, both of them are projects that allow you to run Node. Js in the browser, meaning that you can essentially run a you can run an Express server us in the browser, and see the output of that, which is is wild to to think that you can do that type of thing. Yeah. Hey. Just have a, a sidebar here. Which one of these do you think has the cooler name? Stackblitz or CodeSandbox.

I'm talking about question. I'm talking about Notebooks versus, you know, web containers. Oh, web containers.

I think Notebooks is a good name. Notebooks

is pretty cool. Yeah. I like that a lot. Web containers is pretty cool too, though.

But then that makes me think of Docker, and Docker makes me Cry.

That's exactly how I felt too, so I was just learning to so glad we're on the same page of that one. Yeah. What about what about the names of the companies, Stackblitz and Kozo's sandbox. Which one is the cooler? Yeah. Well, I have a a real sandbox in my backyard, and I don't love it because it it my kids play planet, and then they get sand all in the house. Yes. So I'm gonna say Stackblitz because I also really like the video game NFL Blitz.

So gotta love Blitz.

Stacklets. I don't like when people put z's where s's should be. Seems a little nineties.

You're you're I'm gonna tell you. As a member of the b boy community and A long time breakdancer.

Throwing bees in there is kind of our bread and butter.

And that code sandbox is cool, but I always I always think like, oh, like I bet CodePen was pissed when you chose that name, you know? Yeah, right. Yeah.

Yeah. But both are cool. Both are super cool companies.

I have been paying a lot of attention to those because like I used CodeSandbox the other day to just debug something. Somebody needed like a replication of a bug And you no longer give people like a repo.

You give them a code sandbox of the bug actually happening. In that case, you can give them a whole node environment and everything.

And it's so nice rather than having to say like, all right, well, NPM install this thing and blah blah blah, you just link them to it and they can start to code right away, which is I honestly think it's the future of distributed computing and whatever. I'm pretty sure we're going to be coding in the browser

Sooner than we think. Yeah. I actually really like Replit too. I use that for demos or for Oh, yeah.

Reproductions.

And, you know, one of the my my favorite things about new web frameworks communities is that so many of them have put time into building their own rebel it. So that you can share demos and save them. And that, to me, is, like, a big thing in learning. I really like to get my hands dirty with code And being able to just pass a URL, load up that URL, fire it up, and take a look is, oh, just really as good as it gets for me in terms of understanding something. Alright. So let's talk about it. Obvious, why would you ever want to run Node. Js in the browser? You know? Right. Yeah.

The there's that meme That you see is you spent so much time figuring out whether or not you could, versus whether or not you should. So why would you wanna run Node in the browser? So Probably the biggest one right now is code demos. If you want to be able to give somebody a fully operational thing like with maybe with a Vite or maybe with a server on the back end.

If you want to run that totally in the browser, It wasn't really impossible until about a week ago. So that's the clearest one. And to me, I'm very interested in this space because I can foresee a future where I ship a course that not only has videos but also has some integrated playground that goes along with it, Right. If you have some demos or something that you need to integrate, I think that probably the future past, just a video is some sort of interactive environment. Or at the very least, you have everything set up for you, especially for the beginner stuff. Is that like You're like, all right, let's learn HTML and CSS. Install these 42 things and here's the terminal and whatnot. And it's a lot easier just to say, all right, let's learn some HTML and CSS. Here's a link. Click it, and we can we can start typing in there. Yeah.

Yeah. And it's a big, big thing for educational sites. Right? You wanna teach somebody how to learn known? I mean, that setup is just brutal sometimes. So, just get getting into Running code, running real code and not having it be client side JavaScript is a big deal. Yeah.

The other one is Code Playgrounds.

So Every like Scott just said, Svelte's website has this type of thing. I think Svelte is running on 1 of 2 of these. I couldn't figure it out. I remember seeing somewhere that The Svelte or SvelteKit is is running on It's the SvelteKit

tutorial that they're working on, and I believe it's Stackblitz, but,

I'm not 100% positive. Yeah. It's so good to be able to just run the code in your browser and see the output.

And often you can do that just client side. But if there's any sip of server side that is needed in the tutorial, then You're kind of out of luck in you. Yeah, you got to go somewhere else.

It's cheap remote dev. So you think about These companies code sandbox, Stackblitz, Gitpod. What's the GitHub one? GitHub Codespaces.

So the way that A lot of those work is that they will literally spin up a server somewhere, and they will run that server while you're using it. And you pay by the hour of how many hours you're using it.

And that's great, but that's expensive. And it's also a security issue because As soon as you give somebody free access to running Node. Js somewhere, spam Bitcoin immediately. And I'm sure that is Such a pain in everybody's side, even just hosting JavaScript somewhere or HTML.

I'm sure Companies like Code Pen and whatnot have to constantly fight this as well, where people are posting links to Viagra and stuff like that because you can't Ignore it from the search engines because you want your code pens to be searchable, right? And then maybe we should have Chris Coir on at some point as well to Talk about, like, how do you how do you deal with that? So, like, giving it's a hard problem to run code. People posting links to Viagra. That's a hard problem.

So if you can change where the node is running from on a VM that you're paying to run In your user's browser, then you have just solved that problem. There's no security issues there.

You're literally running on the machine that the user is running, which I think would probably be a major plus. Yeah. Totally.

You know, there is security straight up. You know, the browser is kind of as you think about it, it's it's kind of its own sandboxed environment in a way. Now granted the browser has been getting more and more, features and abilities to access the file system and interesting things like that, but it's all behind heavy permission based systems. Right? So it. These things just can't, like, willy nilly access your file system. So, it gives you a little bit more of a sandboxed environment.

So how does it work? It's pretty cool if you look at Iran demos of both of them. Iran demos of running a little express server that takes in a request Does some processing and sends the data back.

And at the very least, what you do is On the client it's so trippy.

On the client side, you make an object and your the object's called files. And in the In that, you have package. Json, and then it's literally a string of the code that would go in your package. Json. And, of course, you can abstract that and and make pseudo files and load them from git repos and whatnot. But at the very basic, it's literally just you're making files Via an object. So I had a package. Json and a index. Js. And inside of that, I would import Express from Express, a new app, etcetera, etcetera.

And then you can go ahead and npm install right from that. And whenever you change The contents of that file, you can restart the process or you can the Stackblitz one use Node Mon to monitor the file From changing, and it would restart itself every single time. And it was faster. I'm pretty sure it was faster than I could actually run Nodeemon on my computer as a node process, which was blowing my mind as well.

So you do that in the client, and then it spins up this. I'm pretty sure that both of them are using Wasm, and it spins up a sort of like a Pseudo Linux VM, where they have basically just reimplemented a lot of the APIs.

We'll probably have the folks from both of these on the show to explain it a little bit more, but they are then running it In the browser, you can stream the output, from it runs it in an iframe. I'll talk about that in just a second, But it runs in an iframe and streams the output directly to you.

Yeah, it's all client side APIs as well. So like you with Nodebox, You get a variable called Notebox and you get a shell property on there and you can do things like execute commands to the shell and run it. And I think I and one of them I did lsl.

At a certain point, there are limitations because it's not A full Linux computer running in your browser. It's an environment that will allow you to run most of the Node. Js API,

in in a sort of a container. Would you think that it's just like mocking the rest of that so that, like or is it just like Pretending that it's a Linux system, you said, or is it you think it's like a pared down Linux system that it's running that is I think that it's mocking

Most, if not all, of of that. So they they figure out, and, like, Node. Js itself, I don't even know if they are You know how, like, Dino and Bun are mocking the APIs? I don't know if they have done that as well or if they literally just go get no JS and run it. I'm assuming it's A lot of stubbing out a lot of the Node. Js APIs and and trying to make it via make it work via Wasm. It's all fascinating. Yeah. Yeah. It's It's wild that you can do this type of thing. So when I fired it right up, I gave it a package. Json with a couple of dependencies and it ran npm install and whatnot. And I had the console open and it was amazing that it worked. And it's usingboth of them are using iframes to proxy the messages.

And you see a lot of network requests go from your local server to either to Stackblitz or to CodeSandbox.

And then all of a sudden, I was like, oh, like, is this actually running on my computer, or is this going to Their servers and then just coming back to me. And I was like, what's all these all these back and forth going? So both of them said Those network requests are for proxying npm, which makes sense because you don't have npm installed in your browser as well.

So if you need dependencies, they will proxy them through actually web containers uses turbo, which is is really cool.

What what is this Sandpack CDN then? Like, what is that where does that come into play here? You know? That's the Okay. That's the CDN that sits in front of NPM, and And we'll proxy all of your dependencies for you. That's for Nodebox, by the way. That's for Nodebox. Yeah, that's for the code sandbox version of this.

And then I also was wondering the iframes for both of them have URLs that are not local URLs. So npm installed the Both of these packages and random, and then it just embeds an iframe. And I was like, what's the why is it an iframe on theirs? And Both of them said, oh, it's just for node modules and some and some messaging back and forth.

But neither of them would say I asked them both is like, is that the special sauce? Like, like, what is this? So I got to it at the end of the day is these are not this is not an open source thing.

The libraries to use them are open source, but the actual implementations of them are not open source, meaning that They have probably put great engineering efforts into making this friggin node in the browser to work, And they probably both don't want to give that away, which is totally fine by me. I was just a little bit confused because I thought it was like, oh, I thought this was like an open source thing that we And when I just read into it a little bit wrong, what runs on their servers is not the node process.

What runs on their servers? I don't know.

Both of them just said it's messaging and kind of hand wavy stuff, and I'm assuming that's the The special sauce that gets to work. So I would like to get to the bottom of that and and truly understand what is actually running on their server and why The messaging has to go through their server, but it is pretty cool. And I bet with time We'll start to see either some sort of standardized spec come out of this or we'll see more players like if these 2 players have been working on it. And I bet that code sandbox saw Stackblitz launched this thing and they said, shoot, 2 days later they launched it. You know, I'm sure sure there was some they've been waiting on it. Yeah. Yeah. They probably both knew.

Yeah. The Stackblitz one I I know has been, you know, because it's with the Svelte Team had access to that a little while early for the beta of their docs. Mhmm. So I know it's been, like, around. I I found this in their in their, FAQ for Notebooks.

His Notebooks open source? Well, unfortunately, we are not open sourcing Notebooks for a variety of reasons, some of which are outside of our control. We believe that this technology may be the future of improved the DX, so we will continue to explore whether we can open source it in the future.

Nice little,

you know That is probably code for Yeah. Our investors need to get paid first before we can go ahead Or we paid a lot of money to some very smart devs, to do this type of thing, and we can't just give it away it before we we make our money as well because there's likely people like me who look at this technology and say, I will pay for that to integrate it into my own platform Because I would like to have that sort of experience on it. And that's the other cool thing is that you can inherently use both of these free of charge And all of the resources, all of the bandwidth, all of the CPU that it takes to get this running is footed by by them and I'm assuming some investors behind them. And, at if you do want to use it for commercial, I think both of them have a get in touch, so you can you can figure out what the actual commercial usage is for it. So I see this thing as Not an open source project that is entirely standalone, but I see it more like a Stripe API or Stripe Elements, where I am going to use Stripe to charge credit cards, and I am using their amazing APIs in order to interact with them and to build products on top of their service. So I think that is pretty nifty. Yeah,

I think it's very nifty differences between the 2. So

Web containers is built on it's using this thing called SharedArrayBuffer, which is a new thing in the browser that allows you to allows multiple processes to access the same memory

Way over my pay grade. Yeah, I totally understand my name.

You're sharing the array buffer. Exactly.

And Apparently it's pretty heavy in, like WebGL rendering and probably games, things like that, and obviously Doing things like emulating an entire Linux VM in the browser.

So that does not currently work in Safari, although I have seen A couple of tweets that it's starting to work in Safari technical preview, so I bet it's only a matter of time before this works in Safari as well. The NoteBox 1 is using a different set of APIs.

And it takes they say it takes a little bit more memory, but It works in all the browsers currently. So if you want to use, especially if you want to use CodeSandbox on an iPad when you're coding from the beach, You can run technically, you can run a node process in the browser, although you can't. You have to still have Wi Fi because it has to talk to their servers. So That that's one thing. I was like, oh, this is not an entirely offline

dev thing. But Yeah. Yeah. That does seem to be a bit it. Of, like, like, a bit of a snag.

But then again, how many times you know, I think about the the amount of times that I'm working offline, and it's very rarely. But there are it. Times, you know, certainly are times. Yeah. Oh, yeah. It's you know what? I finally got to start using? What?

Figma.

You know how we've been talking about, me wanting to move from Sketch to Figma for so long.

Holy cow, man.

This Do you remember why I couldn't?

Because of it being online and your your network being banned? Yeah. Yeah. So

When I was designing the last couple of websites, I was at my cottage and we had sketchy Internet and Figma did not allow you to save locally, and it was syncing everything to the browser. So there's no way I could use it. It was just an awful experience. So I had to go I kept going back to Sketch. Every project I kept going back to Sketch, not because I was, like, comfortable in it, but because I needed to work offline, or I needed to work on a choppy network.

And finally, I'm designing something right now and I'm like, here I am, Figma, and it's so much better. I can't believe all the frustrations I have in Sketch, and it's just

so good. I'm so happy. I will write as you're getting on that train. I'm getting off of the Figma train. I'm moving on to PenPod. Oh, boy. What's that? Well, well, ever since Figma got purchased by Adobe, I kinda have, like, a no Adobe policy for my own personal software.

Yeah. I really I have a no Adobe policy, so it. I've been trying to avoid them. So when when Figma got purchased like, granted, I was I'm a huge fan of Figma. I did their their videos for their training site. You know, early on, I did all several Figma tutorial series. Yeah. PenPod is open sourced, and it's a Figma alternative.

And they're really not trying to hide the fact that it is a Figma clone, kinda say, but it's really nice looking. And, honestly, as far as, like, this type of thing goes, it. Like an open source alternative to Figma, it goes. It's it's a really impressive effort. Woah. I I was shocked at how good it was. Wow. I'll have to I'll have to check that out. There was There's something that was

so silly that I couldn't do in Oh, yes. Add a freaking rounded border.

You can add a radius to a square in Sketch, and the the answer to that was to mask it. I was like, are you Serious? You can't add a border radius to a square in in Sketch? And, obviously, that's like It's a as a dragger dragger in in Figma, but this pen pot looks really cool. So you can self host the install.

Yeah. So it probably runs like a server locally. Maybe you could run it in the browser. Yeah.

Web, containers.

I gotta tell you, Russ, the the reason why I moved off of Sketch in the 1st place was, like, entirely for petty personal reasons.

I I had, like, had a talk with them.

Somebody who said that they were they would, like, help promote the course that I was doing for, Sketch, so I, like, worked really hard. I I I made a course for Sketch, and I put it out. Silence on there and just nothing. Man. And I had already, like, worked for that. I'd, like, done videos for them. I would like new people there, and I was so it's just like, you're You're not gonna you're not gonna give a tweet? You you you told me you'd you'd you'd do something. Not even give a tweet. Nothing.

So then I'm like, alright. I'll go I'll go to your competitor. I don't care. That will be part of their downfall as I keep searching.

Like, before this, I kept searching for, like, how do you do this in in sketch? And it would All I would find is old videos and old screenshots of the UI that doesn't I'm like, I don't have that button anymore. You know, I know it's not under there. You moved it. You moved my cheese.

And then I'm just like, all right, I'm not learning. I'm not going to relearn how to do this in the new UI. I'm just going to Relearn how to do this and tell you how I can make round of corners.

Love it. Anyways, back to it. What else here? Limitations.

Of course. This is one thing that I didn't think would be an issue, but it makes so much sense as I tried to make a fetch request on the server in the browser.

And there's there's course limitations like I tried to fetch the HTML from westboss.com and on server side, you You can just fetch anything you want. There's no course limitations on the server, but on the server that runs in the browser, You are limited by regular CORS, so if you had to fetch an literally even just like a HTML file from GitHub and GitHub doesn't have CORS properly set up, you're kind of pooched. You'd have to put like a proxy in the middle, you know? Yeah.

So there's that. So it's not. Yeah. No, not entirely. There's a couple other

limited APIs, things like parallel workers and whatnot, but I don't know that that's really what this is for.

I think this is more for I want to run a quick SvelteKit example or I want to do a little I'm learning JavaScript with Wes, and I want to be able to run these node APIs. You know, like, I want to do something simple and do it inside the browser. I think that is probably more what this is for. So despite those limitations, despite the fact that this is not and neither of these are open source solutions, I don't think that those are big because those limitations will probably go away.

And I think we're gonna start to see a lot more competition in terms of

like running VMS in the browser. That's pretty exciting. Yeah. It works. They've, proven it. 2 people have proven it. Not 2 individuals, but 2 companies have proven it. And they have proven that you can do it in kind of different ways, so to say, because, you know, we have it's not it's not like there there are different approaches here considering one of them is using older APIs than the other. So Yeah. Yeah. Fascinating.

There's also this like this is kind of but not really related to the Docker WASM. I think we've talked about this before.

I don't think that that is this is what I thought it was. Like, I thought the Docker WASM was run Docker files in the browser.

I think it's the other way around. Is using WASM Wasm in Docker. Stuff in Docker, which is which is which would be really nice because An entire Linux container sometimes is too heavy for doing simple stuff in Docker, right? But if it was just Nice lightweight little WASM file, then you could run that on Docker. That'd be kind of cool. But I guess you could also just run it in the browser, you know, or run it in Node because you can run WASM in Node, can't you? Yeah. Yeah. You definitely can in yeah. You can. You definitely can in, And Deno.

Yeah, you can you can do it in Node as well. So I don't know if that's that's really that big of a thing.

But that is, it's something to sort of keep your ears on, which is running Node in the browser.

Shout out to both of these companies, Stackblitz and CodeSandbox, for working on this type of stuff. I'm pretty Excited about the future of this. Heck, yeah. I can't wait to see where this stuff goes. And like you said, it it might not be for anything,

like, critical or anything like that, but it's still great. I can't tell you. Like, as somebody who really, really appreciated the onboarding experience of learning UI frameworks via An interactive tutorial, all of the Svelte rappel, having that same type of experience for Server side full stack frameworks is going to be game changing for people trying to learn or pick these things up. So, Yeah. Very pumped about that aspect of it. Alright. Thanks, Trevor, for tuning in. Catch you later.

Booth. 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.