要實現一個Web IDE 需要哪些前端技術？

01-14

我是個自學的前端愛好者。
面試過程只有小demo，有接觸到Web IDE 開發。
我想系統錘鍊下我的技能、找到不足，然後改善。
故，想實現一個具備基礎功能的IDE！

謝邀！我是 Coding WebIDE 的項目負責人。我們的 WebIDE 採用的前後端分離的架構，前端一共寫過三個版本：

第一版：Backbonejs，Coffeescript

第二版：Reactjs，Coffeescript

第三版：Reactjs，Redux，ES6

2014年10月發起這個項目，到現在快2年了，後端代碼好多都健在，前段已過了三代，前端技術風起雲湧啊。

從控制項組成上說，最精簡的版本需要實現五樣東西

layout
菜單
文件樹
編輯器
Terminal

基於學習的目的，我建議菜單和文件樹可以自己實現。每一個版本我們都是自己實現的。layout 主要負責各個控制項的布局，沒有找到一個合適的開源實現，所以我們也是自己實現的。

編輯器有兩種選擇 CodeMirror 和 Ace，這兩個都做的不錯，看你個人偏好，我們選了 Ace。

Terminal 分為前端部分的終端模擬器和後端的 tty server，剛開始開發的時候從還是比較有難度了，需要了解一些底層的知識以處理出現的一些棘手的問題，比如寬字符集的支持，國外搞的 Web Terminal 基本對寬字元處理不友好。這部分內容可以參考我的博客Docker 在 Coding WebIDE 項目中的運用和開源項目GitHub - vangie/docker-web-terminal: A web-based terminal for docker container。我們的 Terminal 後端採用了 docker 技術，主要是考慮到平台版本多租戶情況下的資源限制問題。需要限制CPU，內存和磁碟。CPU和內存用docker原生的技術很容易搞定，限制磁碟比較棘手，我們做了不少嘗試，目前的解決方案可以參考我在社區做的技術分享《Docker Container 磁碟容量限制》http://pan.baidu.com/s/1mgridok。社區版本並不需要這些功能，所以社區版我們並沒有加入這些繁瑣的模塊。

前後端的通訊：Restful + Websocket，restful處理常規的業務 API，Websocket 負責伺服器想客戶端發送文件變化通知，主要是 git 模塊或者 terminal 中改變了文件，需要更新的文件樹和編輯器中去。

後端部分的實現，平台版本我們採用的混合語言的微服務架構：Java，Golang，Elixir，Ruby 都實現了部分模塊。社區版本簡化了繁雜的部署，只用 Java 實現了所有的業務。當然如果你偏愛前端技術的話，用 Nodejs 寫一個後端完全是沒有問題的。

打個廣告，Coding WebIDE 歡迎你的參與 Coding WebIDE 開啟雲端開發模式！

最後以一張模塊圖結束吧，

8 月份我剛好也寫了一個 Web IDE，主要是文件樹、Terminal 和編輯器。目前已經在生產環境中使用。

因為中秋放假，懶得打開開發電腦，我就發一下設計圖吧。（設計圖省略了代碼高亮，實際上是有的）

文件樹最開始打算用 jsTree.js，後來發現它是個 jQuery 插件，並且文檔寫得太差，於是就自己隨手用 Vue.js 擼了一個。也不難，就是遞歸組件。在節點有變動時（比如在 Terminal 里刪了一個文件），你會需要一個操作樹節點的演算法來處理。

編輯器本身倒是簡單，底層是 CodeMirror，然後我在它上面封裝了一個 MultiFileCodeMirror，支持多文件，這樣我就可以只用一個 CodeMirror 對象，通過切換 buffer，來實現多文件編輯器了。右上角可以看到，我有做一個設置的下拉菜單（齒輪圖標處），它可以切換 Vim、Emacs 和 Sublime 模式，還有 2、4、8 個縮進等。另外，我還順便做了個自動根據文件名後綴來判斷編程語言，以便自動切換不同的代碼高亮。

值得一提的是，編輯器打開的文件可以另外用一個數組來管理，每次編輯器有改動時，就自動與文件樹上的文件對比，看是否被編輯過，如果被編輯過就會有相應的 UI 改變（如 Tab 上的叉叉變成鉛筆）以及一些交互（如關閉時提示未保存）。

另外，像 CodeMirror 這種需要通過 editor.getValue() 和 editor.setValue() 來獲取和修改內容的，就需要結合 Vue 的 watch 來自己實現一個雙向數據綁定了，這裡有點麻煩，因為很容易會寫成無限循環——編輯器 change -&> data.code change -&> 編輯器 change……，所以要用閉包加一把鎖。

Terminal 的話，我用了 xterm.js，它通過 WebSocket 連接到後端，比較簡單，簡單看看 xterm.js 的例子就好（對，它沒有文檔 233333）。

數據狀態管理自然是用 Vuex 了，如果不用 Vuex 估計寫這個會瘋掉。

以上是前端，後端不是我寫的，並且我不能把完整的架構說出來，但我可以簡單說說用到了哪些基礎技術。

Terminal 和文件樹的實現在後端是基於 Docker 的，我們為每個用戶都開一個 Docker Container，並且為每個用戶都創建一個文件夾，後端用 Node.js + term.js + WebSocket（http://Socket.io）來模擬 Terminal。監控文件變化我們是用了 chokidar.js 這個庫來實現的，一旦文件發生變化，就會通過 WebSocket 向前端發消息。

我也留意到 Coding 把 Web IDE 開源出來了，贊一個，不過還沒來得及看，估計有不少可以借鑒的地方。

另外想說的是，樓上幾個說糊一個很快的，只不過是 demo 級別。然而，要在實際生產環境下實現一個 IDE，並不是那麼容易的一件事，前端有大量的交互細節需要打磨，後端也有大量的安全性防禦要做，demo 離生產代碼有十萬八千里。

coding ide 開源了Coding WebIDE 宣布開源 - CODING - 知乎專欄

感覺還是先實現一個富文本編輯器吧，踩踩坑。

用Monaco Editor糊一個很快的 (逃

如果是要一個通用的IDE，可以參考eclipse的web版本 eclipse orion，這個開發很多年了：

Welcome to Orion

主要研究業界一些重量級產品會比較有意思

Eclipse CHE

http://C9.io

現在IDE除了前端技術，更講究容器化了。