下一代 IDE 的形態究竟是什么呢？VS Code For Web 試圖回答這個問題，
背景
眾所周知，VS Code 是當前工業界最優秀的代碼編輯器之一，它由《設計模式》的作者 Erich Gamma 領導開發，因此，它的設計架構在很多地方十分精妙，近些年已經成為了各家競相模仿學習的物件，
盡管 VSCode 作為桌面端應用十分優秀，但由于它基于 Electron，相當于在 Chromium 外套了一層殼，使得它的打包體積非常大，且無法直接安裝在云端環境中，這就導致了它的使用場景非常有限，
2019 年，微軟在 PyCon 2019 大會上發布了 VSCode Remote 擴展，支持了遠程開發，這個擴展的出現，使得 VSCode 成為了一款真正的跨平臺 IDE，不再局限于本地開發，可以通過 SSH 連接到遠程服務器，然后在遠程服務器上開發，
2020 年，Github Codespaces 又將 Web IDE 的進展向前邁進了一步，它允許用戶訪問 Github 上托管的所有專案來直接進行編輯與提交，而無需自己搭建服務器，實作了一個全托管的遠程開發解決方案，但微軟當時并未將其 Server 部分開源，由 Github 集中運營，
而在最近的 2022 年 7 月，微軟公開并發布了 private preview 版本的 VS Code Server，這是一個可私有化的，可以在遠程開發機器上運行的獨立服務端，與 Github Codespaces 相同，它允許用戶直接通過 URL，在瀏覽器中安全地鏈接到遠程開發機，且同時支持了 HTTP 與 Web Socket 協議，在此程序中不需要進行任何前期的 SSH 或 HTTPS 設定，
官方基于此制作了基于 VS Code Server 的 Web IDE，可以直接通過瀏覽器訪問 https://vscode.dev/ 進行體驗，可以預見，這就是下一代 IDE 的形態，Serverless, and Run Anywhere，
注：本文基于 VSCode v1.71 版本，
VS Code For Web 代碼架構
注意，在了解 VS Code For Web 的架構之前，我們最好對 VS Code 的組織架構有一定的了解，（詳細內容可自行參考 VSCode 的官方檔案，）
從設計上說，VS Code 是一個多行程架構的應用程式，它主要由客戶端與服務端 2 個應用程式組成，
其中，客戶端是一個 Electron 應用程式，它負責 UI 的渲染，以及與服務端的通信，而服務端則是一個 Node.js 應用程式，它負責處理客戶端的請求，以及提供一些基礎的功能，
而在 VS Code For Web 中，得益于使用TS語言，其客戶端可以幾乎無縫擴展到瀏覽器中，因此，主要的改動點在于 VS Code Server 的實作，
在 VSCode 的設計中， VS Code Server 是 VSCode 服務端的一個子集，它只實作了 VSCode 的本地服務端的一部分功能，它的主要目的是為了提供一個更輕量級的服務端，以便于在云端環境中運行，
VS Code For Web 的架構分為了兩個部分：
- Web Workbench，即 VSCode 的 Web 客戶端，此處為瀏覽器各項服務配置的入口點，處理如何與后端建聯，決議資源，以及加載 WebView 等，
- Remote Server，為客戶端提供 Terminal，File system，Debugger 等服務的訪問能力，
接下來，我們可以對照著 VSCode 的主要原始碼 src/vs，來直觀的理解代碼架構，
其中，base 檔案夾提供通用的基礎依賴能力，如通用 UI 組件庫，woker通信能力，IPC 通信能力等，platform 檔案夾更上一層，提供依賴注入能力、以及剪切板、檔案處理等基礎能力Service，editor 檔案夾即為代碼編輯器 monaco，處理核心編輯區相關的內容，最外層的 workbench 檔案夾則負責view層除了編輯器之外的作業區的UI布局與渲染，
而剩余部分即為啟動客戶端的支持能力，其中，code 檔案夾為客戶端啟動的入口，包括從web端啟動與桌面端啟動，而 server 檔案夾則是 VS Code Server 的主要位置，負責運行服務端程式的 entrypoint，
其代碼組織如下圖所示：
從架構設計上可以看出，VSCode 采用從 view 到 infrastructure 的分層思想，使得資料與事件流單向流動，
從這里也可以看到，VSCode 的客戶端與服務端采用了同構的設計思路，使得客戶端與服務端提供服務形式的切換變得更加容易，從架構上就兼顧到了 Web IDE 的可行性，
VSCode For Web 職責分工
VSCode Server 與客戶端運行的 VSCode 的架構職責區分如下圖所示：
我們知道 VSCode 是一個多行程專案，從這張圖中我們可以看出，VSCode 將幾乎所有的運算行程都交給了服務端，由于機能的限制，實際上，屬于客戶端處理的除了主行程外，只有 UI 繪制相關的行程，以及與插件服務與本地服務間的通信行程（語言相關的service除外，為了在web端也能擁有不錯的開發體驗，language server 是使用了worker thread 旁路執行的），
因此VSCode Server 除了負責啟動服務的 Running App 行程外，還需要處理如 Terminal，File system，Debugger、Search 等等行程，它們的生命周期都是由 VSCode Server 管理的，
結語
本篇文章為導讀篇，主要介紹了 VSCode For Web 的設計背景，并簡單介紹了 VSCode For Web 的架構設計，以及前后端的職責分工，在下一篇文章中，我們將會著重介紹 VSCode For Web 的前后端通信機制，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/516413.html
標籤：JavaScript
上一篇：百度ueditor工具列配置