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环境；\\t
EC2实例里已经预置了很多开发工具和各种编程语言的开发环境，如Git、Docker、Node.js、Python等；\\t
利用Web终端，你可以在浏览器进行npm install等操作；\\t
一个完整的IDE所包含的大部分功能，包括智能提示、代码自动补全等\\t
支持实时的代码调试功能（发布时仅限Node.js可用）；\\t
支持协作编码，需要对方也拥有AWS账户；\\t
包括对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应用；\\t
在线编辑AWS Lightsail instances（相当于应用市场）里预置的应用，如WordPress、LAMP、Drupal等；\\t
与持续交付工具链AWS CodeStar、CodePipeline集成；\\t
与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实例上运行；\\t
提供工作区代理以提供SSH连接、监控及远程调试等服务；\\t
支持工作区快照以在错误中恢复或重启；\\t
支持多用户，支持协作；\\t
对Git工作流做了可视化；\\t
提供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与客户端通信。\\t
客户端，运行于浏览器的IDE，这个可以参考开源项目Ace Editor，AWS Cloud9就是在这个项目基础上开发的。类似项目有Theia等。\\t
运行容器。编译和运行用户代码的容器。通过SSH代理与服务器和客户端通信。\

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

WebIDE vs Native IDE

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

对于各编程语言语法的完整支持。基本上WebIDE都只支持部分特性或少数语言完整特性，对于不支持的语法特性，其开发体验会大打折扣。\\t
对大型项目的支持。项目规模提升对网络的考验加大，再加上WebIDE性能受限于编译运行容器所获取的资源，这些资源有时候还比不上本地机器。\\t
IDE插件生态。对于本地IDE，一般都会有插件系统来满足不同需求，并且多年积累下插件种类丰富，而WebIDE虽然也支持插件，但目前数量还少，难以满足广泛需求。\

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

免安装。在很多时候搭建开发环境是一个很容易将人“劝退”的点，对于WebIDE来说，则基本不存在这个问题，即使需要安装额外的工具和插件，通过SSH命令行就可以完成。而免安装还带来一个好处就是随处可用，以及代码安全性，这在传统IDE上是很难做到的。\\t
环境恢复。有些时候你错误的设置或者删掉了某些东西，其后果是灾难性的，有时候你甚至需要重装系统。而在WebIDE里，你只需要重启就可以恢复环境，如果WebIDE支持环境快照，你甚至可以恢复到发生错误前的状态。\\t
协作编辑。这个可以说是WebIDE的卖点之一，虽然近来传统IDE和代码编辑器也在引入这一特性，但与WebIDE比支持的力度不一样，Cloud Studio甚至在IDE里嵌入了一个聊天室。\

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

WebIDE的适用场景

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

编程教学。对于教学场景来说，没有比WebIDE更合适的了，WebIDE的免安装以及协作编辑完美的支持了这一场景。与之类似的还有面试、培训等。\\t
静态博客。Coding杨臻提到一个很有意思的点，在之前他们的项目还叫WebIDE的时候，有些开发者会拿它来写技术博客，因此后来他们直接内置了JekyII和Hexo两个静态博客生成工具。\\t
虚拟机或容器环境。因为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