WebIDE：在浏览器中写代码的时代即将来临？

Posted 2021-04-29 InfoQ

作者 | 徐川

编辑 | 小智

去年 12 月，在号称云计算风向标的 AWS re:Invent 大会上，AWS 宣布推出 Cloud9，这是用于编写、运行和调试代码的基于云的 IDE，它可以直接运行在浏览器中，相对于本地的 IDE，可以称它为 WebIDE。

今年 4 月，腾讯云一亿元战略投资 Coding，推出 Cloud Studio 云端 IDE。

在开发工具中，IDE 一向只是开发工具提供商的自留地，但它现在俨然已成为云计算厂商的目光焦点。

WebIDE 到底是什么？

它和以前的 IDE 有什么区别？

它背后的技术是什么样的？

为什么云计算厂商这么重视它？

本文将对这些问题一一梳理。

当前的 WebIDE 盘点

AWS Cloud9

Cloud9 原本是一家创业公司的产品，于 2016 年 7 月被 AWS 所收购，在经历一年半的雪藏后终于重新发布，而这次它是以和 AWS 各项产品深度整合的面目出现。

（Cloud9 界面）

全新发布的 Cloud9 的特性包括：

• 包括基于 SSH 的集成 Web 终端，终端可以在 EC2 实例下运行，也可以连接到你自己的 SSH 环境；

• EC2 实例里已经预置了很多开发工具和各种编程语言的开发环境，如 Git、Docker、Node.js、Python 等；

• 利用 Web 终端，你可以在浏览器进行npm install等操作；

• 一个完整的 IDE 所包含的大部分功能，包括智能提示、代码自动补全等

• 支持实时的代码调试功能（发布时仅限 Node.js 可用）；

• 支持协作编码，需要对方也拥有 AWS 账户；

• 包括对 AWS Lambda 的内建支持，这意味着你可以在 Cloud9 里新建、管理、保存新的 Lambda 函数。

如何使用

Cloud9 的使用包括图形界面和 CLI 两种方式。

通过 Cloud9 Console 面板，用户可以进行创建环境、设置权限等各种操作。

CLI 方式则通过 AWS CLI 工具，Cloud9 已经集成至 AWS CLI，在满足前置条件下，通过以下代码即可创建一个 Cloud9 实例：

aws cloud9 create-environment-ec2 --name demo

实际代码还需要包含其它配置项。

说了这么多，那么 Cloud9 能做什么呢？

AWS Cloud9 提供了一个长达 470 余页的文档，里面列出了 Cloud9 的各种使用场景，包括：

• 创建、运行、调试 AWS Lambda 函数、API Gateway、Serverless 应用；

• 在线编辑 AWS Lightsail instances（相当于应用市场）里预置的应用，如 WordPress、LAMP、Drupal 等；

• 与持续交付工具链 AWS CodeStar、CodePipeline 集成；

• 与 AWS CLI、aws-shell、各语言环境的 AWS SDK 集成。

可以看到，Cloud9 与 AWS 的各种服务深度集成，并且极大改进了 Lambda 函数、Serverless 应用的开发体验。

Eclipse Che

Eclipse Che 号称为老牌开源 IDE Eclipse 的下一代版本，该项目于 2014 年 10 月启动，2016 年发布初始版本，现版本为 6.7。其主要开发团队募集到 900 万美元并成立一家独立公司 Codenvy，该公司现在基于 Eclipse Che 提供 SaaS 服务。由于该项目是开源的，因此其贡献者还包括 IBM、红帽、三星等公司的工程师。

除了使用 Codenvy 的 SaaS 服务，你还可以在任意的 Kubernetes 和 Docker 中运行 Eclipse Che 的本地版本，Eclipse Che 在 6.0 版本之后也支持 OpenShift 平台。2017 年 5 月，红帽宣布了 openshift.io 在线开发环境，其中 IDE 部分由 Eclipse Che 负责。

（Eclipse Che 界面）

Eclipse Che 本质上是一个 workspace server，前台通过集成的 IDE 作为操作界面，编译和运行工作在后端的容器中进行。它的特性包括：

• 可移植的工作区，工作区可以本地保存并在另一台 Eclipse Che 实例上运行；

• 提供工作区代理以提供 SSH 连接、监控及远程调试等服务；

• 支持工作区快照以在错误中恢复或重启；

• 支持多用户，支持协作；

• 对 Git 工作流做了可视化；

• 提供 SDK 支持扩展和插件。

Eclipse Che 是目前想要体验 WebIDE 的优秀选择，你可以在本地安装并取得完全控制，也可以基于它打造持续交付工作流。

Cloud Studio

Cloud Studio 的前身是 Coding 所开发的 WebIDE，该项目于 2015 年 4 月正式发布。2018 年 6 月，Coding CEO 张海龙在 GMTC 上发布了 Cloud Studio 2.0 beta 版。该项目负责人杨臻告诉笔者，Cloud Studio 以后会作为一项服务集成至腾讯云中，同时也会作为 SaaS 服务向外提供。

（Cloud Studio 界面）

在功能上，Cloud Studio 与上面的 Eclipse Che 类似，并且 2016 年 Coding 也将 WebIDE 开源了。由于界面本地化，对于中文开发者更为友好，并且它还支持微信小程序的开发和预览。

WebIDE 的原理

从时间上来看，这一代的 WebIDE 基本都是 2015 年后发展起来的，这是因为容器技术在 2015 年左右进入主流，而容器的一系列特性让 WebIDE 的设想成为可能。

（Eclipse Che 系统架构）

基本上，WebIDE 由三部分组成：

• 后端服务器。包括用户管理、代码存储、容器编排等。通过 HTTP 与客户端通信。

• 客户端，运行于浏览器的 IDE，这个可以参考开源项目 Ace Editor，AWS Cloud9 就是在这个项目基础上开发的。类似项目有 Theia 等。

• 运行容器。编译和运行用户代码的容器。通过 SSH 代理与服务器和客户端通信。

由于容器的标准环境、快速启动等特点，WebIDE 可以容易的模拟开发环境并进行管理。

WebIDE vs Native IDE

对于开发者来说，习惯了传统 IDE，对 WebIDE 这种新鲜事物可能会本能抗拒，事实上，目前 WebIDE 在开发体验上的确还比不上传统 IDE，具体表现在：

• 对于各编程语言语法的完整支持。基本上 WebIDE 都只支持部分特性或少数语言完整特性，对于不支持的语法特性，其开发体验会大打折扣。

• 对大型项目的支持。项目规模提升对网络的考验加大，再加上 WebIDE 性能受限于编译运行容器所获取的资源，这些资源有时候还比不上本地机器。

• IDE 插件生态。对于本地 IDE，一般都会有插件系统来满足不同需求，并且多年积累下插件种类丰富，而 WebIDE 虽然也支持插件，但目前数量还少，难以满足广泛需求。

但是，虽然 WebIDE 有这些不足，Web 也给它带来了不少优点：

• 免安装。在很多时候搭建开发环境是一个很容易将人“劝退”的点，对于 WebIDE 来说，则基本不存在这个问题，即使需要安装额外的工具和插件，通过 SSH 命令行就可以完成。而免安装还带来一个好处就是 随处可用，以及 代码安全性，这在传统 IDE 上是很难做到的。

• 环境恢复。有些时候你错误的设置或者删掉了某些东西，其后果是灾难性的，有时候你甚至需要重装系统。而在 WebIDE 里，你只需要重启就可以恢复环境，如果 WebIDE 支持环境快照，你甚至可以恢复到发生错误前的状态。

• 协作编辑。这个可以说是 WebIDE 的卖点之一，虽然近来传统 IDE 和代码编辑器也在引入这一特性，但与 WebIDE 比支持的力度不一样，Cloud Studio 甚至在 IDE 里嵌入了一个聊天室。

事实上，从近些年的趋势来看，传统 IDE 也越来越 Web 化了，除了上面提到的协作编辑，微软的 Visual Studio 集成的 VSTS 为 Azure 提供构建和发布服务，Google 在 android Studio 中也集成了很多 Firebase 的功能。WebIDE 与传统 IDE 中间的界限越来越模糊。

WebIDE 的适用场景

根据上面提到的优缺点，我们可以设想 WebIDE 的具体适用场景：

• 编程教学。对于教学场景来说，没有比 WebIDE 更合适的了，WebIDE 的免安装以及协作编辑完美的支持了这一场景。与之类似的还有面试、培训等。

• 静态博客。Coding 杨臻提到一个很有意思的点，在之前他们的项目还叫 WebIDE 的时候，有些开发者会拿它来写技术博客，因此后来他们直接内置了 JekyII 和 Hexo 两个静态博客生成工具。

• 虚拟机或容器环境。因为 WebIDE 提供容器以及 SSH 连接，因此你相当于拥有一个容器环境，像 Eclipse Che 还支持本地 IDE 或编辑器通过 SSH 来编辑代码，这样的话 WebIDE 的大部分限制其实就不复存在了。

上面只是从使用者的角度看 WebIDE 的优缺点及应用，但如果从行业及技术趋势分析会发现 WebIDE 有更多的优势。

为什么云厂商追逐 WebIDE

近两年来云原生的概念被越来越多的公司接受，云原生的代表项目 Kubernetes 更在 2017 年取得了辉煌的成功。而云原生概念下的开发体验，集中体现在 DevOps 和 CI/CD——这是云计算公司打造围绕云计算的开发流程的背景。

2017 年 4 月，AWS 发布了持续交付工具链 CodeStar，它将开发者在运维上消耗的精力降到了最低，开发者几乎只用关心写代码就好了。8 个月后，Cloud9 发布，并且与 CodeStar 集成。

（AWS CodeStar 工作流）

在上面这张图中，Cloud9 几乎参与了应用的整个生命周期，包括代码的提交、构建和部署。有了 Cloud9 和 CodeStar，你甚至不用离开 AWS 网站就可以维护一个项目。不过，为了兼容传统开发习惯，CodeStar 开发了 Visual Studio 和 Eclipse 的插件，使用插件也可以和 Cloud9 达到同样效果。

除了 AWS 之外，众多公有云厂商也都在打造自己的 CI/CD 服务，比如红帽的 openshift.io，微软的 Azure DevOps Project，腾讯云的 CCI（暂未上线）、阿里云的云效等。在这些持续交付或者 DevOps 服务中，IDE 也是它们的支持部分之一，WebIDE 可以很好的融合到 CI/CD 流程当中，甚至由于开发习惯和体验的原因，可以将开发者“软绑定”在自己的平台上，因此 WebIDE 受到部分云厂商的重视。

WebIDE 与 Serverless

云计算公司青睐 WebIDE，还有另一大原因，就是 Serverless 无服务器计算。

当前 Serverless 与云函数难以普及的一个原因，就是配置十分繁琐，开发体验很差。云函数的测试、调试、升级都没有现成的解决方案。

这其中一个重要的原因就是，开发环境和线上环境难以统一，也许你只是开发一个几十行的函数，但是配置开发环境、模拟线上环境就要好几个小时。而 WebIDE 将可以终结这个问题。

（Develop in your production!）

因此，国外很多人都将 WebIDE 与 Serverless 结合起来看，认为 WebIDE 将成为 Serverless 的一大推手。

结   语

云计算拥有现代网络应用最重要的基础——资源，以后应用的开发毫无疑问将围绕着云来进行。WebIDE 是这股潮流中的一朵浪花，我相信，它和其它工具一起，将彻底改变我们的开发习惯。

声明：本文仅代表作者观点。

参考：

https://aws.amazon.com/cn/cloud9/

https://aws.amazon.com/codestar/

https://www.eclipse.org/che/features/

https://openshift.io/features.html

https://studio.coding.net/

https://www.eclipsecon.org/sites/default/files/slides/Benefits%20of%20Eclipse%20Che%20When%20Developing%20Microservices%20Apps%20%281%29.pdf

今日荐文

永远不要在 mysql 中使用“utf8”

---

今日福利

网络协议知识点太多，学完记不住？看上去懂了，但是经不住问？知识学会了，实际应用依旧不会？这个专栏，可以帮你理清繁杂的网络协议概念，还帮你构建一个精准的网络协议知识框架。点击下方免费试读。

极客时间 戳此查看 小程序