写点什么

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

  • 2018-07-27
  • 本文字数:4053 字

    阅读完需:约 13 分钟

去年 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 of Eclipse Che When Developing Microservices Apps (1).pdf

2018-07-27 07:137889
用户头像

发布了 164 篇内容, 共 106.9 次阅读, 收获喜欢 392 次。

关注

评论 2 条评论

发布
用户头像
我总觉得Web版的是个玩具,只有当你没有自己的电脑时候才用下坚决临时问题,真正生产力工具还是本地的,不过我觉得用来做在线学习的场景应该还不错,比如katacoda里集成下
2019-11-29 10:43
回复
web也是平台, 事实上浏览器可以作为一种操作系统来提供服务. 就像微信为微信小程序提供的是操作系统的能力类似. web发展至今, 各项能力已经很完整, 完全可以代替native, 只是普及还需时间. web的即开即用是native无法做到的.
2020-06-23 11:36
回复
没有更多了
发现更多内容

释放「数据价值」,请别忽视基础软件本身的提升

ToB行业头条

ModStartCMS模块化建站系统 v3.4.0 富文本粘贴上传,自定义分页

ModStart开源

php laravel modstart

2021年券商APP盘点:用户规模大幅度增长,智能炒股成为行业标配

易观分析

券商

使用Rust的几点理由,加入我们,一起学习!

非凸科技

软件商店上新:石墨文档、Shotcut 等 5 款便捷办公类软件上线!

优麒麟

Linux 生态 优麒麟 石墨文档 办公软件

FabEdge 成为 CNCF 沙箱级项目

BoCloud博云

边缘计算 cncf 开源技术

销售CRM系统解决方案

低代码小观

销售管理 CRM 企业管理系统 CRM系统 客户关系管理系统

“==”和“===”,难道不是多一个的区别吗?

华为云开发者联盟

JavaScript typescript string 变量 操作符

网络协议之:socket协议详解之Datagram Socket

程序那些事

socket 网络协议 udp 程序那些事 3月月更

帮助企业实现客户服务自动化的方式

小炮

2022北京智慧工地-招商报名中

InfoQ_caf7dbb9aa8a

智慧工地展览会

2022阿里云采购季,移动研发平台EMAS爆款清单来袭

移动研发平台EMAS

阿里云 开发者 emas 采购季 移动研发

Intel CET缓解机制实战解读

腾讯安全云鼎实验室

安全攻防 网络安全 安全研究

设计秒杀系统架构,这4个关键点要注意

华为云开发者联盟

秒杀系统 订单 秒杀系统架构 RabbitMQ延时队列 Rabbit MQ

C++后台开发学习路线

Linux服务器开发

后台开发 C/C++ 后端开发 Linux服务器开发 C++后台开发

网络安全 kali web安全【渗透测试】目录遍历漏洞

学神来啦

网络安全 渗透测试 WEB安全 kali kali Linux

一眼定位问题,函数计算发布日志关键词秒检索功能

Serverless Devs

阿里云 Faas 函数

揭秘字节跳动云原生Spark History 服务 UIService

字节跳动数据平台

大数据 spark 字节跳动 湖仓一体

【web安全】Spring boot heapdump获取敏感信息

H

Java 网络安全 WEB安全

详解图像处理的算术运算与逻辑运算

华为云开发者联盟

OpenCV 计算机视觉 图像处理 图像算术 逻辑运算

【CAD】系列Ⅰ

謓泽

3月月更

云图说|DRS数据对比——带您随时观测数据一致性

华为云开发者联盟

数据一致性 DRS 数据复制 数据迁移

NextRPC : RPC多段返回的创新和探索

阿里巴巴终端技术

RPC 客户端

1688 复杂业务场景下的 Serverless 提效实践

Serverless Devs

阿里云 电商 1688

围观报名中-2022北京物联网博览会

InfoQ_caf7dbb9aa8a

物联网

【过等保】2022年过等保常见问题解答

行云管家

网络安全 等保 等保2.0

二维码的应用技术

源字节1号

开源 前端开发 二维码 后端、

vivo鲁班RocketMQ平台的消息灰度方案

vivo互联网技术

RocketMQ 消息中间件

国产虚拟化软件H3C CAS体验之环境搭建(虚拟机搭建)

WangNing

虚拟化 环境搭建 H3C CAS

消息复杂计算的抽象和简化

阿里巴巴终端技术

数据处理 客户端 消息

大咖说|阿里巴巴闻佳:数字技术将引领我们走向节能型社会

大咖说

阿里巴巴 数字化 环保 双碳

WebIDE:在浏览器中写代码的时代即将来临?_服务革新_徐川_InfoQ精选文章