写点什么

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:137926
用户头像

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

关注

评论 2 条评论

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

Penpad获OKX 、Scroll生态大力支持,ETH质押创新高

石头财经

2024石家庄矿业展|石家庄矿山展会|石家庄矿业矿山展览会

coal煤博会

河北矿业展览会 河北矿山展览会 河北矿博会 石家庄矿山展

2024河北煤炭装备展览会|河北采煤装备展会|河北煤博会

coal煤博会

利物浦都在用的AI教练,真能拯救国足吗?

脑极体

AI

鸿蒙HarmonyOS实战-ArkTS语言(渲染控制)

蜀道山

鸿蒙 HarmonyOS 鸿蒙开发 鸿蒙系统 ArkTS

Rest和Http什么关系?

百度搜索:蓝易云

云计算 Linux 运维 Rest 云服务器

X314协议市值机器人

区块链技术

鸿蒙HarmonyOS实战-ArkUI组件(Row/Column)

蜀道山

鸿蒙 HarmonyOS 鸿蒙开发 鸿蒙系统 鸿蒙 Ability

运用指针轻松实现多个数据排列

梦笔生花

PLC PLC-IoT

Penpad生态再迎新进展,Season 2 ETH 质押量超200万美元

BlockChain先知

2024石家庄煤炭展|石家庄采煤展会|石家庄煤炭装备展览会

coal煤博会

河北煤炭展会 河北煤化工展览会 河北煤博会 石家庄煤炭展会 石家庄煤炭展览会

2024河北矿业装备展览会|河北智慧矿山展览会|河北矿业展会

coal煤博会

OnelD全链设计:政企业务端到端提效的革新秘籍

鲸品堂

工具 运营商 政企

品牌升级 | 图扑物联正式启用新LOGO

图扑物联

LOGO 品牌 工业物联网 组态 web组态软件

C++ 默认参数与引用传递:语法、用法及示例

小万哥

程序人生 编程语言 软件工程 C/C++ 后端开发

使用 TypeScript 从零搭建自己的 Web 框架: Electron 环境运行

RoyLin

typescript

重塑新格局,拥抱新机遇|2024超聚变合作伙伴大会成功举办

彭飞

阿里云超大规模边缘容器云助力应用全球化部署

MasterInTech

阿里云 边缘云 边缘容器

Penpad再获OKX 、Scroll生态支持,外部资金涌入ETH质押

股市老人

基本的Linux命令以及Linux目录结构

百度搜索:蓝易云

云计算 Linux 运维 云服务器 ECS

Pet Peeve

EchoZhou

English

Penpad再获OKX 、Scroll生态支持,外部资金涌入ETH质押

威廉META

tomcat部署、tomcat虚拟主机及tomcat多实例

百度搜索:蓝易云

tomcat Linux 运维 Web JavaEE

nodejs发布静态https服务器

百度搜索:蓝易云

云计算 Linux 运维 https Node

KaiwuDB CTO 魏可伟:AIoT,用行业定义数据库

KaiwuDB

数据库 AIOT AIoT数据库

RocketMQ 事件驱动:云时代的事件驱动有啥不同?

阿里巴巴云原生

阿里云 RocketMQ 云原生

使用 TypeScript 从零搭建自己的 Web 框架:框架雏形

RoyLin

typescript

面试官追问的STW,到底什么是STW?有什么影响?

派大星

JVM Java 面试题

Python中两种网络编程方式:Socket和HTTP协议

华为云开发者联盟

Python 华为云 HTTP协议 华为云开发者联盟 企业号2024年4月PK榜

Penpad生态再迎新进展,Season 2 ETH 质押量超200万美元

股市老人

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