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 的创始人。