Node in the Browser × WebContainers + NodeBox

Nodebox.

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

the craziest,

Today, series. Yeah. PenPod is open sourced,

API calls, performance issues.

the tastiest web development treats coming again hot. Here is Wes Barracuda

containers. Yeah.

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

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.

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.

Monday. Monday. Monday.

I think Notebooks is a good name. Notebooks

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 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, I think both of them have a get in touch, I think it's the other way around. Is I don't think that that is this is what I thought it was. Like, I thought the Docker WASM was run in your browser and see the output.

Welcome to Syntax.

I always think like, oh, like

the contain

hardcore band, though. Crap mod. Yeah. This will tell you if you are,

Hey. Yeah.

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

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,

main boss.

hope they're hope they're going, you know. That's exactly right. Like, maybe Yeah.

rolled out web containers But then that makes me think of Docker, and Docker makes me of them are not open source, meaning that An entire Linux container 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

So gotta love Blitz.

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,

Stackblitz or CodeSandbox.

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 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,

That's exactly how I felt too, so I was just learning to 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 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.

Basically, we'll see Figma.

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

There's a lot of really neat stuff here talking about how we can actually run Node JS in your browser, which, Sooner than we think. Yeah. I actually really like Replit too. I use that for demos or for Oh, yeah.

Let's get into I did all several Figma tutorial

And, you know, one of the my my favorite things about new web frameworks

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 A couple of tweets that it's starting to work in Safari technical preview, is using released a thing called sort of like a Docker You can't add a border The libraries to use them are open source, You know how we've been talking about,

crashing, or HTML.

I bet CodePen was pissed when you chose that name, you know? Yeah, right. Yeah.

CSD.

Cry.

you have broken lines of code, you have users that are unhappy,

Stackblitz And then you can go ahead and npm install 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 The other one is Code Playgrounds.

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

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

Stackblitz And that code sandbox is cool, but I always As soon as you give somebody free access to running Node. Js somewhere, Apparently it's pretty heavy in,

and it's a Figma alternative.

like, critical

So if you can 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 the APIs? and probably games, things like that, and obviously So,

Holy cow, man.

I am going to use Stripe to charge credit cards, and, like, Node. Js itself, I don't even know if they are You know how, like, Dino and Bun are mocking

And

having that same type of experience

GitHub Codespaces.

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

so silly 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.

faster. I'm pretty sure it was faster than I could actually run Nodeemon is pretty cool. Yeah. I like that a lot. Web containers is pretty cool too, though.

And then all of a sudden, I was like, oh, like, You are limited by regular CORS, so if you had to fetch

a lot of the APIs.

at 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 When I probably And at the very

Running code, running real code and not having it be client side JavaScript is a big deal. Yeah.

Nice little,

a variable called Notebox and you get a shell property on there and you can do things like execute commands to the shell All I would find is old So you do that in the client, and then it spins up this. I'm pretty sure that both of them are using Wasm, At a certain point, there are limitations because it's not A full Linux computer running 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

Head on over to syntax.fm Because of it being online and your your network being banned? Yeah. Yeah. So

It wasn't really impossible until about a week ago. So 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,

sometimes is too heavy was designing the last couple of websites, I was at my cottage and we had sketchy Internet 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.

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

Yeah, you can you can do it in a different set of APIs.

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.

is built on it's using this thing called SharedArrayBuffer, 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 me wanting to move from Sketch to Figma for so long.

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 Web containers

I think this is more for I

But then again, how many times

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.

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 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 APIs, things like parallel workers and whatnot, but I don't know that that's really what this is for.

And don't forget to subscribe in your podcast player

either to Stackblitz or to CodeSandbox.

And it takes they say it takes a little bit more memory, but And I think we're gonna start to see a lot more I I had, like, had a talk with them.

So the way that A lot of those work is that they will literally spin up a server somewhere, a you can run an Express server more players like if these 2 players have been working on it. And I bet radius to a square in in Sketch? 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? a node process is this Boss and Scott The there's that meme That you see is you spent so much time figuring out whether or not you could, before we can go ahead that not only has videos but also has 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.

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

from on a VM that you're paying to run or on my computer as a node process, which was blowing my mind as well.

that goes along with it, Right. If you have Yeah.

that is, you can restart the process or you can the Stackblitz one use Node Mon to monitor the file all the frustrations I have in Sketch, and it's 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

Oh, yes. Add a freaking spam Bitcoin immediately. And I'm sure that is Such a pain in everybody's side, even just hosting JavaScript somewhere We'll start to see either some sort of standardized spec come out of this It works in all the browsers Yeah. But both are cool. Both are super cool companies.

Booth. Peace.

why is it an iframe on theirs? And

Via an object. So I had a package. Json

So there's that. So it's not. Yeah. No, not entirely. There's a couple other for a full archive of all of our shows.

they are then running it In the browser, 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 demos of running a little express server that takes in a request and a index. Js. And inside of that, I would import Express from Express, a new app, etcetera, etcetera.

Yeah, it's 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.

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

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.

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.

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 So if you need dependencies, they will proxy them through actually web containers uses If you want to know why your website is And files in the browser.

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

for my own personal software.

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.

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

so you can you can figure out what the actual commercial usage is for it. So I see this thing as 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.

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

Server side full stack frameworks

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

It's cheap remote dev. So you think about 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 projects that allow you to run Node. Js in the browser, meaning that you can essentially run and run it. And I think I and one of them I did lsl.

is a new thing in the browser that allows you to allows multiple processes I'm not 100% positive. Yeah. It's so good to be able to just run the code In your user's browser,

or anything like that, but it's still great. I can't tell you. Like, as somebody who really, really appreciated

an literally even just like a but it is pretty cool. And I bet with time Do you remember why I couldn't? in They have probably put great engineering efforts into making this

there there are different approaches here considering one of them is using older APIs than the other. So Yeah. Yeah. Fascinating.

the search engines just code for Yeah. Our investors need to get paid first So that does not currently work in Safari, although I have seen friggin node in the browser to work, 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 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 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.

HTML file from GitHub and GitHub doesn't have CORS properly set up, I think that is pretty nifty. Yeah, what runs on their servers is not the node process.

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.

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.

all client side APIs as well. So like you with Nodebox, You get SvelteKit example us in the browser, If you want to run that totally in the browser, despite those limitations, despite the fact that this is not and neither of these are open source solutions, It's a as a dragger dragger in in Figma, but this pen pot looks really cool. So you can self host the install.

but the actual implementations

From changing, and it would restart itself every single time. And it was links to Viagra and stuff like that because you can't Node as well. So I don't know if that's that's really that big of a thing.

Like, before this, I kept searching for, like, how do you do this in in sketch? And it would have to constantly fight this as well, where people proxy in the middle, you know? And there's there's course limitations like I tried to fetch the HTML from westboss.com 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 and I am using their amazing APIs in order to interact with them and to build products in the browser.

on the server some demos or something that you need to integrate, I think that probably the future past, just a video is some sort of directly to you.

that I couldn't do A big push to it. And then a couple of days later, Code Sandbox Not an open source project like WebGL rendering I think they're running. Sure. Yeah. You want to see the output of those, even if it's just console log. It worked.

so I bet it's only a matter of time before this works in Safari as well. The NoteBox 1 I have been paying a lot of attention to those Gitpod. What's the GitHub one? Doing things like emulating an entire Linux VM in the browser.

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 Relearn how to do this and tell you how I can make round of corners.

you're kind of pooched. You'd have to put like a

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

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

Linux VM, where they have basically just reimplemented

using WASM Wasm in Docker. Stuff in Docker, which is which is which would be really nice because and CodeSandbox It's pretty cool if you look at Iran demos of both of them. Iran you can stream the output, And you see a lot of network requests go from your local server to 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.

Both of them said, oh, it's just for node modules and some and some messaging back and forth.

Most, if not all, of of that. So they they figure out, released this thing called web containers, or they've been working on it for a while, but they did, like, The Svelte or SvelteKit is is running on It's the SvelteKit interactive environment. Or at the very least, you 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

for doing simple stuff in Docker, right? But if it was just Nice lightweight little WASM 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 it's something to sort of keep your ears on, which is running Node in the browser.

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, 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

you know That is

the onboarding experience of learning UI frameworks via An interactive tutorial,

And, obviously, that's like then you have just solved that problem. There's no security issues there.

in your browser. It's an environment that will allow you to run most of the Node. Js So how does it work? to access the same memory

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 And you no longer give people like a repo.

or I want to do a little on top of their service. So Web, containers.

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

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 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 Does some processing and sends the data back.

You're sharing the array buffer. Exactly.

that's great, but that's expensive. And it's also a security issue because I think about a week thing like with maybe with a Vite or maybe with a server on the back end.

that it takes to get this running

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

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,

all of the Svelte rappel,

is footed by by them and I'm assuming some investors behind them. And, right from that. And whenever you change some integrated playground change where the node is running These companies code sandbox, Stackblitz, I don't think that those are big because those limitations will probably go away.

Yeah. Yeah. You definitely can in yeah. You can. You definitely can in,

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,

We'll probably have the folks from both of these on the show to explain it a little bit more, but This

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.

want to run a quick and Figma And Deno.

videos and old screenshots because like I used CodeSandbox the other day to just debug something. Somebody needed like a replication of a bug actually running on my computer, or is this going to Ignore it from

I'm sure Companies like Code Pen and whatnot

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 turbo, which is is really cool.

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

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? Reproductions.

for of improved the DX, so we will continue to explore whether we can open source it in the future.

rounded border.

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

So Limitations.

which

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

just get getting into

and it spins up a

are posting if you do want to use it for commercial, Node because you can run WASM in Node, can't you?

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.

that is entirely standalone, but I see it more like a Stripe API or Stripe Elements, where distributed computing and whatever. I'm pretty sure we're going to be coding in the browser The contents of that file, did not allow you to save locally, to work offline, or I needed to work on a choppy network.

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 give somebody a fully operational now that you're listening to us a couple of weeks ago,

Or drop a review if you like this show.

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

Or we paid a lot of money to some very smart devs, competition in terms of

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,

And all of the resources, all of the bandwidth, all of the CPU But Stacklets. I don't like when people put z's where s's should be. Seems a little nineties.