写点什么

WebContainers 介绍: 如何在浏览器运行原生的 Nodejs

用户头像
代码先生
关注
发布于: 2021 年 05 月 22 日
WebContainers介绍:如何在浏览器运行原生的Nodejs

几年前,我们意识到网络正朝着一个关键的拐点发展。WebAssembly 和新功能 API 的出现,使我们有可能编写一个基于 WebAssembly 的操作系统,足以运行 Node.js,完全在你的浏览器内。我们设想了一个优越的开发环境,它比本地环境更快、更安全、更一致,以实现无缝的代码协作,而无需建立一个本地环境。


这听起来很牵强,甚至不可能。但是,如果在网络浏览器里,能够为平面设计、视频编辑和富文档编辑提供一个完整运行的环境,我们想知道:开发者最终是否有可能在网络上来构建这一切?


我们决定试一试,挑战一下。我们希望能有最好的结果,也期待着最坏的结果。两年后(时间飞逝😅),结果是出乎意料的惊人。


今天,我们很高兴地宣布 WebContainers。


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


  • 比你的本地环境更快

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

  • 浏览器中的 Node.js 调试

与 Chrome DevTools 无缝集成,实现了本地后端调试,无需安装或扩展。

  • 默认情况下是安全的

所有代码的执行都发生在浏览器的安全沙盒内,而不是在远程虚拟机或本地二进制文件上。


同样,这些环境不是在远程服务器上运行。相反,每个环境都完全包含在你的网络浏览器中。这是正确的:Node.js 运行时间本身是有史以来第一次在浏览器中原生运行。

你可以在 StackBlitz.com 上自己试试,或者点击下面的一个启动项目。

在几毫秒内,在浏览器中启动一个 Node.js 项目(不要眨眼!)。

NEXT.JS

GRAPHQL

HTTP服务器

node.js启动器

从今天的发布会开始,WebContainers 已经进入了公开测试阶段。目前的支持包括 Next.js、GraphQL 和 Vanilla Node.js,我们正在与其他开源项目合作以扩大支持。如果你想与我们合作,请查看我们的repo)。


为什么?

配置一个本地环境是还是会很麻烦的--特别是当你想快速建立一个很酷的想法的原型,尝试一个新的开源库,一个 bug 重现或与同事合作("嘿,你可以在本地快速检查这个分支吗?" 😒)。随着网络开发向 Next.js 这样的全栈式 SSR 和 SSG 工具链发展,这个问题比以往任何时候都更常见。

运行用户提交的代码进行错误重现,也正在成为开源维护者和财富 100 强公司的一个主要安全风险,这些类型的供应链攻击正在上升。

StackBlitz 通过利用浏览器内置的几十年的速度和安全创新来解决这些问题。StackBlitz 的所有计算都是在浏览器的安全沙盒中即时发生的,甚至可以脱离你的本地机器。这种模式也带来了一些关键的开发和调试的好处(更多关于这些的内容在后面)。


那么 Code Spaces/Sandbox/Repls/...呢?

传统的在线集成开发环境在远程服务器上运行你的整个开发环境,并将结果通过互联网传回你的浏览器。这种方法的问题在于,它几乎没有什么安全方面的优势,而且几乎在所有方面都提供了比本地机器更差的体验:它需要几分钟的时间来旋转容器,容易出现网络延迟,不能离线工作,经常导致网络超时,调试冻结/破碎的容器几乎是不可能的,而且点击刷新只是将你重新连接到破碎的容器。


释放你的浏览器的力量

使用 Chrome DevTools 对 Node.js 进行无缝调试。

事实证明,浏览器真的很擅长调试 Javascript。令人震惊,我知道;) 通过在浏览器中执行 Node.js,与 Chrome DevTools 的整合开箱即用。无需安装,无需扩展,只需在浏览器中进行本地后端调试即可。



运行服务器在你的浏览器中

是的,实际上。WebContainers 包括一个虚拟化的 TCP 网络堆栈,它被映射到你的浏览器的 ServiceWorker API,使你能够立即按需创建实时的 Node.js 服务器,即使你下线也能继续工作。由于它完全在浏览器的安全沙盒中运行,服务器响应的延迟比 localhost 更小!,并保护你的网络服务器免受 localhost 的攻击。


零依赖,甚至在几毫秒内启动

浏览器在执行 Javascript 和 WebAssembly 时速度惊人。我们利用这一点来创建一个即时的开发操作系统,不使用服务器资源,也不会在你的电脑上创建一个 node_modules 黑洞。


每次加载页面时都有一个新的环境


再见,rm -rf node_modules! WebContainer 的内置 npm 客户端是如此之快,以至于它在每次页面加载时都会运行一个全新的安装,确保你每次都能得到一个干净的环境。如果你的环境真的出了问题,你可以回到一个干净的状态,就像你做任何其他网络应用一样:点击刷新按钮。



零延时,可离线工作

如果说居家工作的转变让我们有什么教训的化,那其中之一就是网络故障经常发生。互联网服务供应商经常宕机。有了 StackBlitz,你可以继续工作,没有网络连接,无论你是在火车上,在飞机上,还是在雨中的后座上。


默认情况下是安全的

有了 StackBlitz 新颖的计算模型,100%的代码执行都发生在浏览器安全沙盒中。这导致了一个比本地更快、更少限制的开发环境,同时提供了更多的安全性,这是一个非常罕见的组合。

事实上,默认的安全态势是如此稳固,我们的嵌入式软件包管理器是第一个公开可用的工具,解决了 Sam Saccone 五年前发现的长期未解决的 npm 漏洞。


让我们停一下。

真正令人费解的地方在于这一切究竟是怎么发生的呢?


网络 "应用和 "本地 "应用之间有什么区别?Chrome 团队一直在开发新的能力 API 以缩小这一差距,而且这一差距正在迅速接近零。


桌面级编辑。即时的桌面应用安装

由于 Chrome 的 PWA 功能,安装 StackBlitz 就像一次点击一样简单。几毫秒后,你就有了一个可以从你的 Dock 启动的桌面 IDE。你在日常工作中所依赖的键位,如 CMD + W 和 CMD + T 这般工作。此外,就像在本地一样,你有能力在一个完全独立的窗口中打开和调试你的开发服务器。



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

Chrome 团队最近推出了文件系统访问 API。这使 PWA 有能力请求对你的本地文件系统的部分进行持久的读写访问。与 StackBlitz WebContainers 搭配,这暗示了一个潜在的未来,不需要 node、npm、git、VS Code 或其他安装在你硬盘上的东西。你只需要一个网络浏览器。


技巧问题:哪一个是StackBlitz,哪一个实际上是VS Code?🙃


下一步会做什么呢?

在接下来的一两个季度,我们将在测试阶段与开源维护者合作,为他们的用户群带来完全的兼容性,并稳定 WebContainer 的核心技术。在那之后,我们将推出功能齐全的 StackBlitz v2。

如果你能做到这一点,那不是很好吗。


  • 在每个 PR 上都可以打开一个环境(编辑器+实时预览!)。你可以浏览、玩耍、测试,从而进行真正扎实的代码审查,而不必关闭你正在进行的其他项目。

  • 同时查看多个分支,并排比较。(你会考虑在本地环境中这样做吗?在 StackBlitz 中,这意味着只需打开一个新标签)

  • 从浏览器上直接更新你的 Docusaurus 文档或 Gatsby 博客。

  • 不需要安装任何东西就可以学习世面上的任何 JavaScript 前端或后端框架!


传送门♾️

我们与 Vercel 和 Next.js 的合作也才刚刚开始。准备好获得你从未见过的无缝开发体验吧(这里可访问)。


软件开发的未来是光明的


还有很多工作要做,但我们现在可以自信地说,一个没有 node、npm、git 和 VS Code 本地实例的未来是切实可行的,甚至可以让世界上的软件在以前无法运行的地方运行。


想象一下,在未来,你可以在 Cloudflare Workers 等平台的边缘运行 WebContainers,或者在 iPad 上原生运行整个开发环境。在浏览器中通过 WASI 运行你最喜欢的 VS Code 扩展,或运行 Python、Java 或 R 等非网络本地语言,如何?还有许多未知数有待发现和解决,但我们相信这项技术的未来机会是巨大的。


这些事情可能看起来有点疯狂。而且还有许多未知的未知因素。但我们认为这个新的未来值得一试。因为,谁知道呢?它最终可能会有意想不到的惊人效果。



用户头像

代码先生

关注

一起提升技术,刷新认知 2018.03.22 加入

10年技术工作者+打杂产品经理,死磕互联网技术与面试

评论 (1 条评论)

发布
用户头像
如果完美的话, Electron这样的是不是不需要了
2021 年 05 月 25 日 10:14
回复
没有更多了
WebContainers介绍:如何在浏览器运行原生的Nodejs