The WebContainer API === Sylwia: ~Test, test, test,~ Dominic: ~Test, test, test.~ Paul: ~Test, test, test.~ Sylwia: ~test. Oh, huh. Are you still picking that up? We'll see.~ Paul: ~Okay.~ [00:00:00] Hi there and welcome to Pod Rocket, a podcast brought to you by Log Rocket. Log Rocket helps software teams improve user experience with session Replay error tracking and product analytics. Try it for free@logrocket.com today. I'm your host Paul, and join with me is Dominic Elm and Sylvia Vargas from Stack Blitz team. They're joining us to talk about Stack Blitz. We're gonna be digging into the web container APIs. I mean, what even. Our web containers and who better to talk about it than the pair that we have. Fortunate enough to join us, Sylvia is working as a engineer and developer relations over at Stack Blitz and Dominic is ~actually~ one of the founding engineers on the team. So welcome to the podcast. Very excited to have you both. Sylwia: Hi. Thanks for having us. Dominic: Hi. Paul: ~ So~ for anybody who's not familiar, ~uh,~ maybe Sylvia, could you lead us into talking about what Stack Blitz is ~as a elevator speech?~ Sylwia: Oh yeah, definitely. Uh, is a startup that offers, ~um,~ you tools that enable running [00:01:00] node JS apps inside the browser. And this is not a marketing speak. ~Um,~ it actually. Allows you to run the apps, ~uh,~ no JS apps inside your own browser. There's no cloud involved or no magic. I mean, there is some degree of magic, but it's, ~um,~ our own magic. Paul: Why would I want that? Like why is that so cool? Sylwia: ~Oh yeah, definitely. Um, why wouldn't you so.~ Paul: ~Please~ ~tell me. Yeah, I. ~ Sylwia: currently stag, ~um,~ offers four different ways to, ~um,~ to. Make your life easier. So we have, ~um,~ classic editor, ~which, um,~ which allows you to, ~uh,~ make quick demos and, ~you know,~ embed small projects inside your documentation, for example. Or if you want to create a fancy bag production, that will be also your go-to. ~Um,~ tool. Then we also have Stbi called Flow, which, ~uh,~ streamlines contributing and also reviewing prs and issues in your repositories, but also for your daily work. So imagine that, for example, you are getting a PR [00:02:00] from someone. Or, ~you know,~ a back report and instead of having to stash your work and then, ~um,~ clone the repo or pull the changes, you can actually just click on the link and open the, the whole environment inside your browser. It takes seconds. And then ~it's ~a, it's a disposable environment, so you can just close it and then change another, ~um,~ see another pr. Then we also have, ~um,~ web container api, which we'll talk about more, that allows you to, ~uh,~ build your own tools, ~um,~ so your own IDs, your own ripples, and even more fancy stuff. So we'll talk about that later. And finally, we also have, ~um,~ a tool that is called Web Publisher. This is, ~uh,~ a tool that helps you edit, ~uh,~ documentation in a very like low key way. So, If you have, I dunno, let's say a marketing colleague who is not a very technical person, for example, ~um, you know,~ now they don't have to rely on developers to [00:03:00] introduce edits. They can just use the web publisher and, ~uh,~ see how the edits are visible on the page immediately. Paul: That's a lot of things ~and it's, it sounds like the paramount.~ Use case here is ~sort of~ like we have a cohesive development environment within the web browser. ~Like everything's set up. It's, it can last for a long time if you need it to actually run a production app where you can like Eem really boot new ones up.~ ~Dominic, if you're on the founding team of somebody who like came up from ground zero, you're a zero to wanting this idea.~ Was that sort of the original intent you wanted to, ~um,~ make a development environment in the web? Was that sort of the initial inspiration? Dominic: I, I think so. ~I mean, I'm, I'm,~ I'm a founding engineer, but I joined after the company has been bootstrapped already and ~it's been,~ it's been founded by Eric, ~uh,~ Simons ~and,~ and Albert Pie. ~ so~ they're ~the,~ the founders ~of,~ of Stock Butz. And, ~um, like~ I joined in, in 2019, but even before that, stack Blitz already existed and, ~um,~ It wasn't using web container, the technology, that's when I joined. And, ~um,~ we ~kind of like~ looked into, ~uh,~ ways of running like really a full ~like~ no chest environment in inside the browser and not on service, but the idea of running everything inside the browser was already there even before [00:04:00] 2019. So yeah, ~the,~ the initial idea. Of Stack Putz, I think was always to have ~like~ a convenient way to spin up like development environments inside the browser, ~you know,~ without relying on any cloud compute. And so that, that's been always the case for Stack Putz. And so web container just, ~uh,~ changes this and makes it even more powerful to, and allows you to run like really full fledged no chairs applications inside your browser. Which wasn't before, ~uh,~ sorry, which wasn't possible before. ~Um,~ we kind, we started working on We Container. Paul: ~That was gonna be my follow up question of sort of like, if this is what you guys have been doing all the time, then why? Our web containers so special and web containers to me as somebody that I, I was sort of speaking to Sylvia and Dominic in the beginning of the podcast is not something I tool with every day.~ ~It's like outside of my immediate realm of knowledge, and to me it is a level up of some way that I can, like you're saying, Dominic runs something in the browser. So maybe Sylvia,~ could you inform me about why this is ~like~ so paramount for the stack blitz development ~like,~ And as a follow up, I view it as something complex is Stack Blis and this new web container API and the features that we're gonna get into something that's more attuned for like the advanced teams that are using it? Or is it something really for everybody Sylwia: So I'll start with the follow up. It's, ~um,~ so web containers, ~um,~ to [00:05:00] use web containers or to use stack dates. This is, you don't have to be, ~um,~ an advanced developer. You don't even have to be a developer. That's the whole point, ~uh,~ that, ~um,~ This technology allows people who have even very little experience with web development to enjoy it, ~uh,~ to the fullest. Actually, stag beats was started as, ~um,~ Dom said by, ~um,~ Albert and. Eric, who previously were running a company, which was, ~you know,~ about teaching web development to folks, ~uh, different, you know, different beginners.~ And so now if you ever taught a beginner how to program, you must probably spend some time setting up the environment and explaining all the bags. And so imagine now you don't have to do that, ~um,~ because the whole environment is set up inside the browser. They literally don't have to. Put any, ~you know,~ effort into downloading vs. Code, for example, or I dunno, setting up all the terminal stuff right. And ~so, uh,~ definitely to enjoy this technology. You don't have to be an advanced user If you [00:06:00] want to build something with the technology. ~I mean,~ yes, you would need to know, ~uh,~ how web development works, but, ~um,~ there are al already, ~you know,~ solutions built for total beginners, which is, ~uh,~ for example, the new spelled key tutorial uses, ~um,~ web containers. And so this is, Editorial that is running inside the browser so that, ~um,~ total beginners can just learn full stack development without having to do any setup. ~Um,~ and ~uh,~ your first question was about ~what's,~ what's up with the, ~with,~ with, ~uh,~ containers? What makes it so special? ~Um, Well,~ oftentimes when people are thinking about, ~uh,~ running, ~you know,~ not JS applications inside the browser, they're either thinking about, ~you know,~ the cloud solutions that are enabling that or about, oh, ~you know,~ just compile it to WI web assembly and just. Make it run. However, it's not so simple. ~Uh,~ there's actually a lot of innovation that went into and a lot of hacking that went into the development of web containers. So it's not as simple as, ~you know,~ for example, [00:07:00] just, ~um,~ translating node js, ~uh,~ source into source code into web assembly because. Now JS as an technology wasn't created to be running inside the browser. It, ~um,~ knows of different features and different APIs that are not available inside the browser. ~Like,~ for example, ~a file,~ a file system. ~So in order to cre you can actually.~ Oftentimes when we are talking about web containers, we are saying that in, let's say an approximate, ~um,~ working mental model would be of a micro operating system. And it is, ~um,~ a correct mental model to some degree because you do have, ~you know,~ the file system you have, ~um,~ Paul: ~A whole operating system.~ Sylwia: ~sorry.~ Paul: Like a whole operating system, but Sylwia: ~Well,~ I wouldn't say whole because there are also some things that we didn't implement yet. Paul: Yeah, so Gotcha. Sylwia: yes. But you could say that, ~you know,~ an approximation would be like some, ~uh,~ operating system. And so in this kind of analogy, you could think about that on every refresh ~of a,~ of a website, you would get [00:08:00] a fresh operating system that's confined, ~you know,~ to your browser. And ~so,~ As such, you can install any node JS based c l i, you can run any node js ~uh,~ app or execute shell commands, ~um,~ inside the web container. And so all of that, ~you know,~ required a lot of hacking and a lot of innovation in order to actually be able to run because browsers as, ~uh,~ environments, they were created to be very secure and very isolated. ~Right.~ So they don't have the knowledge of many of those things that I just mentioned. ~Don, do you want to chip into this?~ Paul: ~I, I mean, Dom, if you could double click on one of the particular APIs that Sylvia's bringing up, maybe, uh. The file system api, like how does that even work? Uh, does it work, does it not work in the web container's, api, and anything else that you have to follow up as well, please.~ Dominic: ~I think I can, I can assure you that the file system is working really well and reliably at this point. Um, but also, um,~ I mean it's a ~central,~ central, ~uh,~ part of, ~um, our,~ our kernel, like the file system is essentially ~the, the heart, like~ the heart of it, ~um,~ if you will. And, ~um,~ In particular for the fire system, we've actually went through multiple iterations and the fire system has been one of, one of the biggest challenges I, I would say. And there was a lot of like learnings, ~uh,~ along the way. ~Um,~ so I think in total we went through three iterations until we arrived at a file system that works, ~um,~ [00:09:00] reliably and is also extremely performant. ~Um, Yeah.~ Sylwia: But there was also many other things, ~right, that, uh, I mean,~ I joined Stbi only one year and a half ago, but in conversations with my colleagues, For example, with Dom, I learned about all those joys and terrors of innovation. So for example, Dom is now just mentioning, ~uh,~ so casually the fact that they, ~um,~ went through three, ~uh,~ iterations of the file system, implementing file system. But actually, if you think about it, every single component of web containers went through similar route, right? ~So,~ If you're building something that is, ~uh,~ outside of the box, ~um,~ oftentimes you have to just be really comfortable with letting go of your ideas and, ~you know,~ trying a different route and seeing, ~you know,~ how something you spend numerous hours on is no longer, ~you know,~ in place. ~So, like,~ if you think about it, About all the engineering work that went into developing web containers. We are talking about implementing event loop, ~uh,~ implementing ES modules, ~um,~ to [00:10:00] be, ~you know,~ spec compliant. We are talking about, ~you know,~ creating some kind of way to manage packages. ~Um,~ we actually. We have our own, ~uh,~ package manager called Turbo, which actually will be sound setting now because again, that's the life cycle of innovation. We have a better solution now. ~So yeah,~ a lot of work went into, ~um,~ this innovation. Paul: When you're innovating and iterating on these ideas, ~I mean,~ you're talking about implementing ES modules. These are. Ground zero level things that you need to double click on and really get into. Is there something that when you visited the basics and you read the docs, the Ts deep dive get book, perhaps, ~you know~ when you get back in there that you felt like the team became really empowered with some new knowledge that maybe you went and created like an internal package manager. Sometimes you get these ~like~ inspirations when you're going back to the basics and you're just like, wow, I didn't know I could plug in like that. Did he have any of those moments when you were going through ~like~ the file system and all the things we just talked about? Dominic: ~So, so, okay.~ So [00:11:00] from an engineering, ~uh,~ point of view, absolutely. Yes. I think, ~uh,~ I had. Probably, I don't know, exaggerating, but millions of these moments. ~Um, like when I, when I,~ in the beginning, ~uh, beginning started, uh, working on, on web container,~ I actually didn't know much about no js ~uh,~ at all. Like ~I was,~ I was very new to no js. At least two. Yeah. At least ~to the,~ to the level. That I'm working on it now, ~like,~ which is, ~you know, the,~ the internals of no Gs and ~I have be~ before working on We Container. I have never used Chatter Reba us before. ~Um, I, I was,~ I wasn't new to ~like con like, you know,~ multi-threading and concurrent programming, but still I've never used these web APIs before. ~Um,~ And it also was somewhat new to ~like~ the no JS internals and various other ~like, you know,~ browser or web APIs. And so ~it was a,~ it was a really fun, ~uh,~ learning experience and there's been a lot of challenges where, yeah, where we constantly push, ~um, you know, the,~ the browser environment ~to its,~ to its limits. Sylwia: ~And actually, do you want to speak about that more? Because~ this is something that I find really fascinating. ~Um,~ web [00:12:00] containers being, ~you know,~ at the. Forefront of, ~um, well~ browser, ~um,~ limitations. ~Um,~ also oftentimes test what browsers are capable of doing or what those new features, ~you know, um,~ are enabling us to implement. And because of that we are like, ~Um,~ bag detectives and, ~um, we, yeah,~ there is a whole plethora of bags that were, ~um,~ either detected by stag date or even our engineers helped fix them. ~So,~ Dom, do you want to speak more to that? Dominic: ~_Uh, um_~~, I think I can, uh, do you have~ Paul: ~Like one of the bugs. One of the bugs. While you were developing some of these internal APIs, Sylvia, you're, you're getting at~ Sylwia: ~Yeah.~ Paul: ~Gotcha.~ Dominic: ~Okay.~ Yes. I think ~there's, there's, there's,~ there's a handful, ~like,~ just because web containers is really ~on the,~ on the cutting edge, we're really pushing, ~you know, the,~ the limits of what browsers can do. And I think a lot of the APIs, maybe they intended that, those APIs, Could be used ~in, in, for,~ for these use cases, but we are really pushing what's possible. And, ~um,~ I think one of the, one of the more recent issues we ran into, which was, ~um, well~ a pretty big showstopper for web containers in general. And ~the,~ the adoption [00:13:00] was an issue specifically with, ~uh,~ apple silicon, for instance. There was a very like specific low level, gnarly issue in the machine code that is that browser engines such as like V8 or Spider Monkey generate for a given web assembly module. So with web assembly, the browser engines stay always compile the. Web assembly module two machine code. And it turned out that on apple silicon, which uses ARM 64, which is an architecture, ~um,~ that the architecture basically didn't support like native atomic instructions for, I mean, this becomes ~very,~ very specific and like technical, but any, ~what, what I'm,~ what I'm getting at is, Like these sorts of issues, ~um,~ is very interesting. We didn't fix this issue. ~Um, so~ the bottom line [00:14:00] is that we ran into like pretty big performance issues on MacBooks that were running on Apple silicon. ~Um,~ which as a result, for instance, like the editor, ~um,~ was really slow running, like built tools from. For instance, V if you try to open up the V or V test repository in code flow, it was really slow. If you try to run like the DEF build, it took two minutes ~on,~ on an M one, for instance. Whereas ~on a,~ on a Windows computer, it took 10 seconds. Like there, there was a huge, ~uh,~ gap in performance. ~Um,~ and that all came down to basically the machine code that was generated for Apple silicon. Paul: Wow. Dominic: Yeah, it's like ~really, really,~ really low level. It's not that we fixed the issue ourselves, and at this point, I think I just want to give a huge shout out to the people that actually, ~uh,~ fixed the underlying issue, which is Pierre, ~uh, who's,~ who's an engineer ~on~ On Arm, and Ryan who's working on Firefox and also [00:15:00] Uri, I think, ~um,~ like incredible work. Yeah, that's, this is like the stuff that we're, ~um,~ oftentimes confronted with like really, really gnarly issues. Paul: You're almost doing a public service helping find needles in a haystack for the community as a whole for these really nasty bugs. ~I mean,~ machine code level bugs are like, how often do, does somebody go down the Mariana Trench, you know?~ Um,~ Dominic: ~Well,~ I, yeah, we only did that once. ~The,~ the poor request was up like before then. We actually didn't even know that, like what the issue was. And, ~um,~ so yeah, but ~there's, there's,~ there's plenty of other things, like another engineer, Roberto. Who's working on the web container team, ~uh,~ was chasing like ~memory, uh,~ memory books, ~you know,~ through V8 and web assembly as well, where you couldn't in instantiate, for instance, ~uh,~ say a thousand web assembly modules, it would just crash and run into out of memory. And so Roberto was really, ~uh,~ digging deep into like V8 source code, trying to identify what the issue was. And ~like, it's, it's,~ [00:16:00] it's pretty interesting things. Paul: Now if you happen to be a little higher up on the stack as a developer and you're developing a web application, whether that be in Next or React or Angular, really anything, ~um,~ I'll just take a moment to remind our listeners that the podcast is brought to you by Log Rocket. And Log Rocket offers session replay. Issue tracking and product analytics to help you quickly surface and solve impactful issues affecting your web application and ultimately your user experience. With Log Rocket, you can find and solve issues faster, improve conversion adoption, and spend more time building a better product. ~And circling back to the Stack Blitz product and what you guys are doing for the service and the community, ultimately what we're talking about here, It sounds like this is a very big problem, and when you tell me that you guys have, as a team are solving like machine code issues, it feels like you're boiling the ocean successfully, which is boggling.~ ~Um, is, is there anybody else in the space that's kind of tackling these same areas~ ~like any other competitors or people that are looking at the same APIs that you guys are building out? Are you working with anybody? Is it a stack blitz only endeavor right now.~ Sylwia: ~Um, wait, so you told me to say when we should stop. We should, we should, uh, think about this one second. Um, because it's always, um, it's always tricky when you don't, uh, give a shout out to someone. So let me think. Um hmm.~ Paul: ~Yeah, please take your time. We got all the, all the edit time.~ Sylwia: ~I mean,~ Paul: ~What about note box?~ Sylwia: ~Yeah. We're not gonna talk about that.~ Paul: ~We're not gonna talk about note box. Okay.~ Sylwia: ~Sorry. I mean, only because, um, um, well, yeah, it's, um, you know, folks, uh, We generally think that, um, it's good to, when the, it is good when there are lots of different actors in a, in a space and different, uh, that competition now helps people actually innovate better.~ ~And so, you know, notebooks in their docs wrote a lot of stuff that, um, kind of like oftentimes would, so this is just for you, this is not for the~ Paul: ~Okay. Yeah, we'll keep it out.~ Sylwia: ~Yeah. Just so that you understand the context. Like oftentimes, you know, um, When you write stuff like that in the dogs, then usually that trigger, um, triggers a response.~ ~And so I, and also the whole stack, this team, we believe that, um, innovation is better with collaboration even if you have like, competitors and stuff. And so, you know, just like we are not gonna be, um, dignifying this kind of like game. So just like. But, um, so your question was about Yeah. Other folks who are doing, I think, um, I think we can definitely respond with regards to like all the, uh, limit pushing, uh, projects.~ ~Don, do you want to give a shout out to someone? Like, it's basically like, yeah, usually we are talking about Figma and game developers and stuff.~ Paul: ~yeah.~ Dominic: ~yeah. Spec, yeah. Specific. Yeah. I mean for, for web assembly, yes. But for. What we do, I think not so many.~ Sylwia: ~so maybe we can disregard this question because otherwise we can either brag and that's, I mean, you know, we can just say, oh, we are the only ones, but actually that's. We, that might be only because we are not aware that other people are doing some cool, cool stuff or other. Our other option is dignify some comments that were, you know, not entirely, you know, also factual and so that's also another way we would go.~ ~Mm-hmm.~ Paul: ~Maybe we could rephrase it as, um, cuz people, anybody listening to this podcast is gonna be familiar with Figma. They're gonna be familiar with other. Coding in the browser tools, and I think a lot of people are also attuned to the fact that these are using web assembly, they're using these lower level APIs.~ ~So I'd be curious about how Stack Blitz is sort of pushing the envelope, either in conjunction or doing things extra than like what we would see in the existing Figma project that's been released that you guys think is particularly exciting through the lens of the web container api.~ Sylwia: ~Yeah. Um, then what do you think?~ Dominic: ~Yeah.~ Sylwia: ~Kate, I see you went on on video. Do you want to say something? Ah,~ Dominic: ~Oh yeah.~ Sylwia: ~yeah. We can talk about the web container api.~ Paul: ~Great. Yeah. About some specifics about what it offers. We could go into that, like how a developer would use it. Sure. Let's~ Sylwia: ~I like also the question about the headless or like the, what it offers, because this is actually a very happy, this is actually a very happy offering. You know what I mean? And it's just like, yeah, like it's a, our gift to the community. So let's talk about that. Let's cherish the collaboration and the web ecosystem and not like focus on stuff that is like math.~ Dominic: ~also like maybe clarifying a little bit the difference we could like. Web container versus the api? Like what's the difference, like~ Sylwia: ~Oh yeah.~ Paul: ~Sure. Okay, so why don't we kick things off again by going over Dominic with that.~ So if people are already attuned to like what a web container might be or they're attuned to like web assembly might be, what's the difference between the web container concept and the web container api? Dominic: Yeah, so web container itself. Singular is the technology itself. So ~like, um,~ basically [00:17:00] the, let's say ~the,~ the kernel, the operating system, ~um,~ that allows you to run essentially node GS fully inside your browser without relying on any remote, ~uh,~ service or the cloud. And you're asking what's the difference to the web container api, the web container. So web containers is, we offer. You know the UI as well on stack with.com. So if you go to stack with.com, you can open up like a new project. We have, ~um,~ a bunch of starters. If you click on an Angular project, you get a, ~uh,~ like the editor, it all boots up in your browser. So basically there's like an editor, ~uh,~ for code fluids. It's vias code running on top of web container. So that's basically just using the technology itself, like the runtime that allows you to run like no chest and a browser. And so with the web container api, we're, it's ~kind of~ like a hatless thing to use web container, ~the,~ the [00:18:00] technology without really using, ~um,~ like our editors, ~if you know what I mean.~ ~Like it's, it's kind of like.~ So I usually use the analogy of ~like, uh,~ using s SSH to, to connect from a client to some remote machine or some server. So there's something running somewhere like a container and you use like SSH to establish like a connection to that server. And then you, the door is wide open. You can. You have the terminal, you can run, ~uh,~ literally any, ~uh,~ shell command. For instance, you can spawn like a note process, but it's fully headless, which means ~there's,~ there's really no ui. You have the full flexibility, ~uh,~ flexibility, ~uh,~ in building your own experience on top of the web container api. So it just exposes some like functionality. If it gives you access to the file system, it allows you to. Run some processes from the outside and then it basically just, ~you know,~ spins up ~a,~ a web container and then you can, from the [00:19:00] outside, interact with that container, but also build your own experience on top, which is actually pretty cool because there's been so many cool projects that we've seen in the community where people have built amazing experiences. Like experiences that we cannot build ourselves just because we don't have, ~you know, ~the capacity to build all these ~like,~ cool, amazing, ~um,~ projects on top of like web container itself. Paul: What's an example of something that blew you away when you saw somebody build, Dominic: ~I,~ I think, like for me, ~uh,~ is ~the spelt~ the spelt kit, ~uh,~ playground, I think that's a, a pretty unique and novel experience. I think. Sylvia, if ~you wanna,~ you wanna take that. Sylwia: ~Well, ~yes.~ Um, ~so. So actually the whole, ~um,~ web container API offering, we've been dreaming about it for a while, but the definite push to create it was that, ~um,~ rich Harris from the Pel team, ~um,~ reached out to us and he had this idea [00:20:00] for. A new interactive tutorial for Feld Kit, and please bear in mind that spelt kit is a full stack,~ um, framework, uh, ~application frame framework. And so Rich Harris had this idea that the user would be able to learn spelt kit entirely inside the browser instead of having to, ~you know,~ clone anything and set up the environment. And yeah, we worked really fast. ~Uh,~ to make it happen. And then reach actually presented, ~uh,~ the new tutorial at the JS Con in Amsterdam last year. ~Um,~ so the tutorial is entirely interactive. It's, it runs inside the browser. You don't need ~actually, um, You don't need~ any kind of, ~uh,~ setup ~for, uh,~ to learn Feld kit now. ~Right.~ So since then we, ~um,~ we were working for ~like~ half a year with, ~um,~ a small number of community members to develop the API further and to make it ready for the public use. So we would write documentation it relatively based on questions and also we would develop more features for the API based on the feedback from the community and [00:21:00] from wishes, right? Their wishes. And so that's why also in our docs, ~um,~ if you look in our docs, ~um,~ so web container.new, ~uh,~ you can see that oftentimes there are like shoutouts to different community members who share their. ~You know,~ solutions or their I ideas. So all throw the docs, ~you know,~ there are sprinkles, small shoutouts to different projects. And so really the web container API is our way to give back to the web community. It's ~um,~ just, you know, is why it is, and it will always be entirely free for the open source, but even for the commercial use, ~um,~ there's a very generous free tier. ~My~ our point is that, ~you know,~ you can go and really test it out and build something with web containers and see, ~you know,~ what kind of projects it unlocks for you. And so far, ~you know,~ the results have been pretty amazing. ~Um,~ there have been. Just pretty mind blowing playgrounds built, ~like,~ for example, the Pelt kit, but also just like the other day, ~uh,~ two developers, ~uh,~ Antonio [00:22:00] Sarz and ~uh,~ Paolo Chuti have, ~uh,~ released spelt lab, which is a full like rapport for spelt, which also includes like Vin bindings ~and so~ and so forth. You can just explore it. Then there's, ~uh,~ Nate Moore from the Astro team created Clark. So Clark dot, uh, cc, ~um,~ which is a tool for building really beautiful CLIs and the page also features a life play playground. Then of course you have like our code flow we t on that, but, ~um,~ You also have like solutions that we didn't even think about. For example, there's this, ~uh,~ app called NATO app, which is a spatial live multiplayer JavaScript environment from Paul Chen. ~Um,~ which also, ~you know,~ allows you to now run node gs, ~um,~ like in the app. And, ~um, Finally, you also have like,~ we also see more and more ai, ~uh,~ teams who are embracing web container API to just generate a full app. ~Uh,~ so you no longer [00:23:00] really. Need to, ~um,~ know how to code potentially to create an app of, ~you know,~ your wish. So one of such teams would be, and you could definitely watch them closely. So there is a bunch of innovation coming up and, ~uh,~ every now and then we just see that. Someone is using web containers to the end that we didn't even envision a year ago. So yeah, if you have some creative ideas and you're using web containers, please hit me up. ~Um,~ I'm very happy to feature you on our blog and our website and just celebrate your work. Paul: ~Do you feel like, um, the, you're gonna be taking some mindshare almost from people who might have been reaching for Docker to run a typical web application traditionally and having them. Port all their activity right into the browser.~ Sylwia: ~Could you repeat? I'm so sorry. I just couldn't.~ Paul: ~Um, do you,~ do you feel like, ~uh,~ with all these great applications coming out, we're even getting a full Seve re ~uh,~ reenactment built using Stack Plus, do you feel like you're gonna be taking some, ~uh,~ mindshare from developers and instead of reaching automatically as is the case right now for ~like Docker,~ Docker compose? You might be just going in the browser, like everything is just there for you. And maybe we'll see, because Docker sometimes can be a barrier of entry for people to boot up, like an open [00:24:00] source project. Sylwia: ~Oh yeah, definitely. Adam, do you want to, do you want to speak to that?~ Paul: ~Oh, put on the spot. Let's go.~ Sylwia: ~no, no, because I, I noticed that you were nodding so.~ Dominic: ~Well, I was nodding because~ I think, ~uh,~ DACA can be very painful. I have to be honest, I'm not using DACA very often. ~Like I, so ~the way I. Work on web container as I, ~well~ just install everything on my local machine. I wish I could use, ~uh,~ a web container for it, but unfortunately we're not there yet. ~There's,~ there's things that still need to happen in terms of like web APIs and some advancements to, ~uh, you know,~ to web assembly itself that will allow us to make the kernel even more powerful. ~Uh,~ and. Allow us to run other languages, for instance, ~like,~ which is definitely something that we're planning, ~uh,~ at some point. ~Um, um, yeah, but daca, I mean, I think that's why I can't really speak to daca, myself, ver uh, that much because I'm, I'm just not using it very often. But I know from other, uh, people that it can be very painful to set up and use~ Paul: ~Yeah,~ Sylwia: ~True. Yeah.~ For me, doctor has been very intimidating and, ~uh,~ painful and frustrating. I am ~not,~ not a very experienced engineer, and ~um,~ my first attempts were I. I dunno, just still, I still have nightmares about them, so I would prefer if everything, ~you know,~ was just [00:25:00] made simple. ~Um,~ browsers are now becoming so power powerful that, ~um,~ I mean it is just really pleasant to be able to run, ~you know,~ your whole repository ~inside, um,~ inside the browser. So now when, for example, we are developing something, ~um,~ let's say our blog or. Our, ~uh,~ some of our websites, we are actually using code flow with trans on web containers because it's just so pleasant to use. Dominic: ~Well,~ and another thing is that the story for DACA on Mcwe. ~Is in is~ isn't like particularly bad, Paul: Oh yeah, Dominic: ~perfor, the performance for, well, I guess we don't wanna talk about this,~ but that's one of the reasons why, I guess I'm not using DACA that often, just because it's like~ really,~ really slow on, on, on meccas. Paul: ~Dom just telling us he has the newest MacBook.~ Dominic: ~Oh.~ Paul: ~Yeah.~ Dominic: ~Well, I have apple, silicon.~ Paul: ~Yeah. Um,~ yes. ~I, I, I mean, if people,~ I totally agree. If people can like just hop into their web browser and boot up full stack open source application for GitHub, that's gonna be game changing. I feel like there's a huge barrier of entry or if, like, if you know how GitHub works and you can clone something and install npm install, you have access to a plethora of [00:26:00] software that like most people don't. ~And~ Sylwia: ~tell you.~ Yeah, I can tell you that. For example, the moment we, ~um,~ added with publisher to our documentation ~we receive,~ we started receiving so many typo corrections and so many contributions from people for whom that was the first contribution ever. And I know one of the contributors who now actually is doing office source in one of. ~You know,~ the popular frameworks because he started with, ~you know,~ this very low key, very ~like,~ pleasant experience of editing out a typo and being thankful and featured, ~you know,~ as a contributor. ~So,~ yeah, definitely happy story, ~Tom. Hmm.~ Dominic: ~Um, yeah, I, I think, um,~ another huge benefit ~of,~ of, ~uh,~ code flow and web container is for open source maintainers that they can just. Use it for reproductions. ~Like~ if you think about everything running inside the browser, like the browser has been ~years and ~years and many people working ~on,~ on these browser engines, and there's been years of ~like,~ Work that goes into making a [00:27:00] browser like super secure, right? Like the browser ~is,~ is probably like the most secure sandboxed environment that you can get. Like it doesn't allow you, it, you don't have access to the file system. Sure. There's like file system APIs, you have to grant, ~uh,~ grant access, but still by default it's, it, it tries to be very secure.~ Um,~ and ~so,~ That's great for running, for instance, like web container inside the browser because for reproductions you have to trust, like if someone opens an issue and files an issue for your open source project, right? You have to debug ~the,~ the issue. And so maybe they send like a link to a get up repository. You have to trust whatever ~is, is~ is in that repository. However, with code flow, you just get a link, you click on it. It has absolutely no access to anything on your local file system. So it can't like steal, ~um,~ I don't know, SSH keys or it can't do, ~you know,~ various malicious, bad, ~uh,~ things. So I think ~that's,~ that's really great. Like [00:28:00] for open source maintainers, having ~like,~ not having to think about the trust aspect and they can just click on a link and ~like, you know,~ When they're done, they just close the tap and everything is gone. Then ~that's,~ that's great. Paul: It's almost like ~the,~ the developer's version of try it in a vm. Like before you run it. Sylwia: Yep. Dominic: Yeah. Paul: So in, in the coming, ~uh,~ months and quarters in 2023, what is something that you're able to share with us now, either Sylvia or Dominic that is not out? Because I know there's always things in the pipeline that you can't share. So what's something that you want to have people excited about? Sylwia: ~Well,~ I'm very excited about that today actually, when we are recording this, ~uh,~ episode, ~um,~ we are announcing that, ~uh,~ with containers, Run on iOS and iPad os. ~Uh,~ this is something that has been already working for like a few months, but ~um,~ now we are confident, ~um,~ in that. So yeah, go ahead to our, ~uh,~ blog and [00:29:00] read about the adventures that, ~you know,~ we're involved in shipping this, ~um,~ this feature. So this is definitely a milestone for us. ~Um,~ We are also, ~uh,~ now improving the wor user workflows around the authentication features. But more on that, if you follow our account on Twitter, for example, Paul: And what is your Twitter account Sylwia: ~Ah, yeah, it's stbi. So, uh,~ yes, so for Stbi, it's stag bits, so just, ~you know,~ check that out. ~And, uh, for me it's Sylvia Vargas.~ ~I think that it's, yeah, it's a confusing name, so it just, yeah.~ Paul: ~And, uh, Dominic, do you have a Twitter or medium handle where people can keep up to date with your writings or postings?~ Dominic: ~I think both. I think, yeah. I'm on medium. Uh, I think my Twitter handle is elm. D underscore.~ Paul: ~LMD underscore. Great.~ Dominic: ~Yeah,~ Sylwia: ~But then~ we are also, ~you know,~ planning to upgrade note, ~uh,~ to note 18 and then note 20 this quarter. And we are sunsetting our package managers. So now we have, ~um, You know,~ unmodified native support for all package managers, including mpm, which is still behind a feature flag. So soon it's going to be out, and that means that, uh, has just gotten faster and more reliable. Dominic: Sneak peek those package managers. Are really, really, really fast. Paul: Really, really, really Dominic: Really, really, really [00:30:00] fast. Sylwia: ~And if they're not fast, let us know because maybe there is another bag like the one that Don was tackling. Uh, and then we are gonna go on a little bag hand.~ Paul: Well, Sylvia, Dominic, thank you for taking your time today to come on and talk about web containers and your new web container, a p I ~and I mean, what a time to record the episode on the day that you're having support for iOS launch. We're really talking about like a global platform to run apps, so that's amazing.~ ~So, um,~ like you said, we're hoping people listening. If they run it and they have suggestions, reach back out to the team. ~I'm sure they could do that on the Twitter, like you said, and if not on Twitter, they're, um, GitHub, right. Pull requests. And if, is there any other place that people can reach back to the team?~ Sylwia: Yes, we have a, a discord committee so you can find us there, but really, ~you know,~ however, is best for you. You can even send an email or a postcard if you would like to describing the bag that you, we just really love your ideas and feedback and, ~um,~ just the wildest dreams and wishes. Just send them over. Ideally, if you want something fixed, the fa, the fastest way is either the, uh, GitHub bag report or a DM to me. ~Um,~ I would say, ~but you know,~ whatever way works for you, just let's do that. Paul: Awesome. Thank you guys. Sylwia: Thank you so much for having us. This has been fun. ~Thank you.~ Dominic: Yeah, thanks.[00:31:00] Sylwia: ~You are so nice. It's good, uh, for me. It's good. Uh, Don?~ Dominic: ~I think. I think this looks great.~ Sylwia: ~Okay.~ Paul: ~I love that we stepped a little bit into like, um, some of the Docker stuff and examples. You had specific examples, Sylvia? I thought that was fantastic. Like~ Sylwia: ~Oh yeah.~ Paul: ~those up. Yeah.~