WebAssembly 和新功能 API 的出现，使得编写一个基于 WebAssembly 的操作系统成为可能，它可以完全在浏览器中运行 Node.js。我们设想了一个优越的开发环境，它比本地环境更快、更安全、更一致，以实现无缝的代码协作，而无需建立一个本地环境。 —— StackBlitz

image.png

WebContainers 允许你创建一个完整的Node.js环境，在毫秒内启动，并立即在线和链接共享 — 只需一次点击。该环境加载了 VS Code 强大的编辑体验、一个完整的终端、npm等。它也完全在你的浏览器中运行，这产生了一些很棒的优点。

  • 比你的本地环境更快。构建完成的速度比yarn/npm快20%，软件包安装完成的速度比yarn/npm快5倍以上。
  • 与 Chrome DevTools 的无缝集成实现了本地后端调试，不需要安装或扩展。
  • 默认情况下是安全的。所有代码的执行都发生在浏览器的安全沙盒内，而不是在远程虚拟机或本地二进制文件上。

image.png

优势何在?

设置本地环境是一个巨大的麻烦

现在前端的工作流已经非常复杂了，一个标准的开发环境要包括 npm，yarn，git，node，vscode 在这之上还需要 umi，webpack, babel ，一套流程下来可能需要很久的时间才能搭建好环境。 而且不同的依赖库对 node 的需求也是不同的。

现在其实在 cloudide 中也解决了这个问题，并且可以和 github 等仓库联通，这个问题解决的算是比较完美。但是 cloudide 远程服务器上运行整个开发环境，并将结果通过互联网传回浏览器。这种方法的问题是几乎在所有方面都比本地的代码编辑器差。启动容器需要时间，因为成本问题也不能给你一个很好的容器。而且总是有网络延迟无论是智能提示还是终端的运行结果。如果你要调试容器那也是几乎不可能的。

WebContainers 的优势是不用占用服务器的资源，可以直接在浏览器中跑。省了一大笔机器和网络开销。几乎解决了 cloudide 的所有问题。

零延时。离线工作

  1. var myBody = new Blob();
  2. addEventListener('fetch', function(event) {
  3.   event.respondWith(new Response(myBody, {
  4.     headers: { "Content-Type" : "text/plain" }
  5.   });
  6. })
  1. workbox.routing.registerRoute(
  2.   /file\:\/\//,
  3.   new workbox.strategies.CacheFirst({
  4.     cacheName: 'File System Worker'
  5.   })
  6. )

模块也在本地的 workbox 中，无需请求服务器，如果本地没有，sw 也会自动请求服务器的文件。配合包管理工具 Turbo 可以在浏览器中安装依赖，并且显著的减少大小。
image.png

浏览器执行 Javascript 和 WebAssembly 的速度快得惊人

构建完成的速度比 yarn/npm 快 20%，软件包安装完成的速度比 yarn/npm 快 5 倍以上。

我本来觉得是因为用 rust 实现的 node，要比 c++的性能好一些，结果官方对比的是传统的 cloudide 和 WebContainers 的对比。真实比较下来性能其实是有一些损失的。

至于模块安装的速度是因为他们牛逼的 Turbo 包管理器来实现的。Turbo 在 2017 年说要开源，现在已经 2021 年了。

  • 🔥 安装包的速度最少是 Yarn 和 NPM 的五倍
  • 😮 将 node_modules 的大小减少到两个数量级?
  • 💪 用于生产级可靠性的多层冗余
  • ⚡️ 完全在 Web 浏览器中工作，能够拥有闪电般的开发环境

1_flSBzkA6MwhaGdXnHE9B1g.gif

一个奇怪的戳中我笑点的吐槽

image.png

从本地文件系统读取和写入

这里使用了 chrome 的新功能 Native File System，可以让 js 读写硬盘上的文件，并且是基于文件夹维度的
7c04f32416f3186f06fd904b7b21cbd7.gif

局限性

  • 浏览器不能启动端口，只能带来一个页面的路由
  • 不能 proxy 到非当前端口，跨域的问题还是很难解决
  • node 的 native 模块和多线程模块不支持，所以 带 postinstall 的很多库无法使用

应用

利好 cloud ide

cloudide 现在有个非常难受的问题，代码智能提示要现在本地收集输入，然后发到服务器上去计算，计算完成之后结果返回 cloudide 导致智能提示非常慢。

我们不需要迁移整个 cloudide 的环境，只需要用 WebContainers 实现 cloudide 的智能提示，就能获得显著的体验提升。

对于 cloudide 来说能叫节省巨量的计算资源。如果能把依赖安装 与 代码编译都修改为 WebContainers 服务器只需要提供一个文件系统的 api mock 就可以完成整个开发链路。

代码管理平台的 diff 体验

WebContainers 可以做到无状态和零延时，并且每次刷新都是一个新的环境，这个对于 代码管理平台的 review 界面是个重大利好。

image.png

现在代码 review 其实是个虚假的代码编辑器，如果能用 WebContainers 实现，就可以达到类似 vscode 的 review 体验，完美的高亮和智能提示，甚至于有实时的 tsc 和 lint。并且不需要消耗服务器的性能。

如果是前端项目，那么对每一个前端的 pr 进行代码的编译和实时预览也是可以实现的，这样可以大大的减少 review 的难度。

更棒的 playground

playground 几乎是每个语言必备的工具，在其中可以方便进行语言的编译，但是现在不少语言的编译时是服务器编译，大大的减少了灵活性。并且现在的很多前端脚手架并不能提供的demo，只能靠文档来告诉用户功能，如果可以将其打包为一个在线的可运行的工具对 umi 来说的也是很有用处的。

image.png

边缘流式渲染

ESR 作为一种新兴的渲染方式，依赖于在 边缘节点上执行 js 代码来获取动态内容，这个容器来执行 js 的代码一般来说都要比较小，但是功能要比较强。WebContainers 可以是个比较好的方式，用 rust 执行 js，并且因为是 node 环境，兼容性天然也比较好。

WebAssembly是一种新的二进制格式的开放标准。从设计上看，它是内存安全的、可移植的，并以接近原生的性能运行。

image.png

Solomon Hykes 是 docker 的创始人。