What is StackBlitz's web container

As shown in the figure below, we can use StackBlitz to develop Node.js applications in the browser:

This is all thanks to the so-called WebContainer, as shown in the following figure Booting WebContainer and Installing dependencies:

A few years ago, we could sense that web development was approaching a critical inflection point.

The advent of WebAssembly and the new capabilities API made it seem possible to write a WebAssembly-based operating system that was powerful enough to run Node.js entirely in the browser. The goal of providing a superior development environment that is faster, safer, and more consistent than a local environment for seamless code collaboration without having to set up a local environment seems to be getting closer to web developers.

One of the keys to achieve this goal is Web Container.

Traditional online IDEs run your entire development environment on a remote server and stream the results back to your browser over the Internet. The problem with this approach is that it has few security benefits and provides a worse experience than a local machine in almost every way: takes minutes to start a container, is prone to network delays, cannot work offline, often results in network timeouts, debugging A frozen/broken container is nearly impossible, hitting refresh will just reconnect you to the broken container.

WebContainers provided by StackBlitz allow you to create a full-stack Node.js environment that can be launched in milliseconds and instantly online, which can be shared via a link - with just one click. The environment is loaded with VS Code's powerful editing experience, full terminal, npm, and more. It also runs entirely in the browser, which yields these key benefits:

• Faster than local environment. Builds complete 20% faster than yarn/npm, and package installations complete >= 5 times faster.
• Node.js applications can be debugged in the browser. Seamless integration with Chrome DevTools enables native backend debugging, no installation or extension required.
• Default security level. All code execution happens inside the browser's security sandbox, not on remote virtual machines or local binaries.

Again, these environments are not running on remote servers. Instead, these runtime environments are completely contained within the Web browser. The Node.js runtime itself runs natively inside the browser for the first time.

More Jerry's original articles, all in: "Wang Zixi":