酷应用

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

百家作者：InfoQ 2018-07-20 03:08:12

作者 | 徐川

编辑 | 小智

去年 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 将可以终结这个问题。