likes
comments
collection
share

我该用哪个 Cloud Editor？

作者站长头像
站长
· 阅读数 2

联想到不少场景有 Cloud Editor 的需求，例如阅读源码时需要让项目跑起来加点断点调试，参与开源项目交流问题时重现出现问题的场景，在开发文档或者是技术教程中快速跑起一个 Playground。

我把这些场景归纳为以下几个需求点

  1. 快捷分享：通过共享链接直接访问和 Fork
  2. IDE 支持：支持项目运行和调试，支持命令行操作
  3. 环境支持：支持多种编程语言和项目运行环境
  4. 费用可观

市面上的服务商有 Github Codespace、Gitpod、CodeSandbox、StackBlitz、Codepen，我对他们的定位目前并没有一个清晰的了解，不如就来调研一番，把强大的工具用在合适的场景上

Github Codespace：Github 的强力辅助

我们在一个 GitHub 仓库中轻击 . 键，便能在 github.dev/ 提供的 VSCode 在线编辑器中阅读项目，但却无法在此跑起项目。

别急着 Clone 到本地，GitHub Codespace 可以直接在云端起一个环境跑起项目，通过在线或本地的 VSCode 编辑器和它交互。

VSCode 编辑器配备命令行终端、支持代码调试、支持 GitHub 操作，具备代码编辑器的基本素养。如果想要用更加专业的 IDE，也能用 JetBrains Gateway 让 WebStorm/IDEA 等 J 家 IDE 连接上 Codespace。

我该用哪个 Cloud Editor？

Codespace 本质上是在 Azure 云端创建了一个 Docker 容器，在其中安装好项目所需的开发环境，通过和代码编辑器通信来同步状态。项目所需的开发环境可以通过 .devcontainer 来自定义，Codespace 的本质是 Docker，因此可以通过配置 Dockerfile 或 Docker Compose 来设置。

GitHub - VSCode - Azure 云服务，微软这一环接一环的生态布局也是挺妙的。但职责明确、联系紧密的生态，也意味着 GitHub Codespace 的定位局限于 Github 的强力辅助，代码分享需要依赖于 GitHub 仓库，功能也只服务于 GitHub 一家平台。

收费方面，Codespace 每个月有免费使用时长，超出时长按时收费，双核环境每月免费运行时长为 60 小时

我该用哪个 Cloud Editor？

GitHub Codespace 作为 Github 的强力辅助，非常适合阅读 GitHub 仓库源码、临时的远程开发这类场景。

  • 分享：只能通过 Github 仓库分享
  • IDE 支持：支持项目运行、调试、Terminal，支持 VSCode 和 JetBrains 家产品
  • 环境支持：本质是云端 Docker，通过 .devcontainer 配置，自由度很高
  • 费用：双核环境每月免费运行时长 60 小时
  • 账户：只限 GitHub

官方站点：GitHub Codespaces

Gitpod：代码即时启动

Gitpod 的设计理念是"代码即时启动"，即无论何时何地，只要你有一个浏览器和网络连接，你都可以立即开始编程。

Gitpod 覆盖的功能和 Github Codespace 一致，但它是一个开源的 Kubernetes 应用程序，可以运行于任何安装了 Kubernetes 的平台。同时 Gitpod 开源第三方的角色，也允许他同时集成 GitHub、GitLab、Bitbucket 等代码托管平台。

Gitpod 可以通过链接分享当前空间或空间的快照，接收者能够直接访问当前空间或者根据快照启动一个新的空间实例。

Gitpod 的在线编辑器同样是用了 VSCode Editor，同时也支持 VSCode 和 JetBrains 家的本地 IDE

Gitpod 默认使用 Docker 作为虚拟容器，通过 .gitpod.yml 自定义运行环境。

Gitpod 是一个优秀的独立产品，尽管开源的尽头是卖云服务😂，但 Gitpod 在产品体验、平台支持上做的很好。脱离微软生态，Gitpod 是 Github Codespace 的完美替代。

  • 分享：可通过链接共享空间和快照
  • IDE 支持：支持项目运行、调试、Terminal，支持 VSCode 和 JetBrains 家产品
  • 环境支持：通过 .gitpod.yml 配置，自由度很高
  • 费用：每月免费运行时间 50 小时
  • 账户：不限平台，GitHub、GitLab、Bitbucket 都支持

官方站点： Gitpod: Always ready to code.

开源仓库： gitpod-io/gitpod: Gitpod automates the provisioning of ready-to-code cloud development environments. (github.com)

CodeSandbox：Browser + Cloud 双面战士

Codesandbox 初期给我的印象是 Codepen 的强化版本，偏向于前端代码的即时编辑、效果分享，但现在 Codesandbox 也提供了 Cloud 支持。

现在有两类 Sandbox：一种是在浏览器中直接运行的 Browser Sandbox，一种是在云端起 Docker 的 Cloud Sandbox。

我的理解是 Browser Sandbox 对标 Codepen，用来写点轻量化的 Demo；Cloud Sandbox 对标 Gitpod/Codespaces 支持即时运行和编辑项目。

分享和协作是 Codesandbox 的特色卖点，打开分享链接， Fork 到我的 Sandbox 写写改改，整个流程非常顺滑。

CodeSandbox 的编辑器用的是自己研发的一套，能满足 Browser Sandbox 的轻量化开发。但不支持调试，用来运行项目还是差一点，得配合本地 VSCode Editor 一起使用。Terminal 也是只提供给 Cloud Sandbox。

CodeSandbox 目前免费力度还是挺大的，按空间而非时长计量

我该用哪个 Cloud Editor？

Codesandbox 提供了两方面的功能，不管是 Browser 还是 Cloud，我觉得它非常适合在交流问题时做 Bug 重现、或者是在技术教程中给一个 Playground，重点在轻量化编辑和流畅分享。

  • 分享：Share & Fork 模式
  • IDE 支持：支持运行，不支持调试，支持本地 VSCode Editor
  • 环境支持：Cloud Sandbox 通过 .codesandbox 配置 Docker 环境
  • 费用：不限时长，免费空间 6 GB

官方站点： codesandbox.io/

StackBlitz：随时随地运行 NodeJS

围绕 WebContainers，StackBlitz 提供了前端 Online Editor、多端实时预览、嵌入可交互文档这些应用场景。

Codesandbox 中说到的前端向的代码分享，用 StackBlitz 也是一个不错的选择。

  • 分享：Share & Fork 模式
  • IDE 支持：不支持项目调试，根据项目项目是否需要 Node.js 环境决定使用 WebContainers 还是 EngineBlock 环境，后者不提供 Terminal
  • 环境支持：只支持 JS/NodeJS 相关的环境
  • 费用：Public 仓库免费

官方站点： stackblitz.com/

Codepen：轻便、分享、社区

  • 写点简单的小效果，分享出去
  • 逛逛社区 Trending 里有哪些有趣的效果，看看代码实现

大项目请出门左拐，Codepen 只做小而美的分享社区

  • 分享：Share & Fork 模式
  • IDE 支持：HTML + JS + CSS，顶多加个 Vue
  • 环境支持：HTML + JS + CSS，顶多加个 Vue
  • 费用：免费使用公开 Pen 和模板

官方站点： codepen.io/

总结

现在对每个平台的功能和强项都有些了解了，来总结下应用场景吧

  • 涉及大项目，项目源码阅读或临时修改源码
    • GitHub 托管的项目：GitHub Codespace 最便捷，Gitpod 也能搞定
    • 项目托管在其他平台或者临时修改后分享：Gitpod
  • 分享问题重现环境或 Playground：Codesandbox 和 StackBlitz 都不错
  • 写点简单的效果：Codepen