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 終端，你可以在瀏覽器進行等操作；

一個完整的 IDE 所包含的大部分功能，包括智能提示、代碼自動補全等

支持實時的代碼調試功能（發布時僅限 Node.js 可用）；

支持協作編碼，需要對方也擁有 AWS 賬戶；

包括對 AWS Lambda 的內建支持，這意味著你可以在 Cloud9 里新建、管理、保存新的 Lambda 函數。

如何使用

Cloud9 的使用包括圖形界面和 CLI 兩種方式。

通過 Cloud9 Console 面板，用戶可以進行創建環境、設置許可權等各種操作。

CLI 方式則通過 AWS CLI 工具，Cloud9 已經集成至 AWS CLI，在滿足前置條件下，通過以下代碼即可創建一個 Cloud9 實例：

實際代碼還需要包含其它配置項。

說了這麼多，那麼 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 界面）

在功能上，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

今日薦文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！