WebIDE:在浏览器中写代码的时代即将来临?

去年 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