WebContainers

Node.js - in the browser

Stackblitz has announced their latest creation: native Node.js development in the browser, enabled by a new product called WebContainers! What sounds quite insane in the first moment is now reality. Just to give you a taste of what’s possible, you can now develop your Next.js project. Directly in the browser. Wow.

Not so fast - because it’s even faster!

To see the magic happening, you can just try out one of Stackblitz’ examples. For starters, here’s the aforementioned Next.js-project. The whole environment launches insanely fast, on my machine (Mac Mini M1, Chrome 90) it was up and running in a matter of seconds - including the NPM install!

Local is the new remote

Other tools promise similar features, but the whole dev environment is hosted in the cloud. Personally, I’m totally fine with that. A great example for such a cloud-based development would be Github Codespaces, which launches a container for your repo with real file system access - all in the cloud, with an editor that’s based on Monaco, the “engine” that runs VS Code.

Stackblitz’ editor is based on VS Code-technology as well, therefore the experience is quite similar.

Now let’s get into some details: WebContainers run completely locally inside your browser, specifically inside a sandbox instance, as any tab in a browser does. The code that powers this system is compiled to WebAssembly. Thanks to the latest advancements in creating a unified interface called WASI (WebAssembly System Interface, a layer between the OS and WebAssembly-code), portable containers in WebAssembly are possible now. According to the announcement, Stackblitz has even developed its own TCP-stack for WebContainers!

A marvel of a PWA

And yes, this shiny new thing called WebContainers is full-fledged, locked-and-loaded PWA. It leverages all the features of progressive web apps, including the Native File System API. WebContainers can be installed on your system and work offline as well.

The border between native and web apps is becoming more and more transparent. Writing your Node.js-apps inside your browser is not only a proof of what’s to come, but what has already been achieved. Google was especially a main driver for pushing these technologies, and by all its flaws, I have to thank Google for the effort.

Where light there’s shadow (a little bit, at least)

One disadvantage I’ve noticed that wasn’t particularly highlighted in the announcement page: Using WebContainers is free for open source projects, but has a subscription attached if you intend to use it for private repositories. So even though it’s working great locally, WebContainers is still a SaaS-offering, after all. But sure, offering such advanced (and arguably good sounding) products has to cost some money.

Overall, as you might have guessed, I’m very impressed with WebContainers. If you’re a Full-Stack-dev, the future really looks brighter than ever in regards to your tooling system.