原創 張偉（上坡） 淘系技術 2020-12-30
阿裡巴巴淘系技術部前端技術專家張偉（花名：上坡），受邀參加 QCon 大會，為大家帶來《基于 KAITIAN 的前端工程研發模式變革》，本文為大會現場演講内容實錄。
前言
在正式的内容之前，先來回顧去年在這邊 GMTC 會議上，由當時的前端委員會主席圓心帶來的分享
《前端路上的思考》中的關于前端在 IDE方向上的描述，期望通過 IDE 将前端工程領域中研發态與流程态進行整合聯通，同時通過插件能力将阿裡體系内外的研發模式、能力進行打通，形成生态能力發揮價值。
而 KAITIAN 就是後續面向這個問題的答案，KAITIAN 從誕生到如今已經一年多，下面從架構本身以及業務落地上開始正式的内容分享。
大綱
這次的分享主要由四個部分組成 - 首先是介紹 KAITIAN 項目的背景以及經過了一年多，如今在 KAITIAN 上建設的各個業務的情況與現狀 - 然後介紹整個 KAITIAN 項目的技術分層架構，以及架構中核心插件部分的相關實作 - 其次因為我們的主題是 研發模式 相關，第三個話題講的是目前由 KAITIAN 底層及上層建設的産品推動的一些研發模式上的變化 - 最後一個部分再講下，我們從建設 KAITIAN 以來，從觀察體系内、體系外、國内、國外的一些 IDE 相關領域的進展之後，對于未來的一些思考和預測。
KAITIAN 背景及業務現狀
首先進入到第一部分背景和業務相關的介紹，這部分通過穿插很多真實發生在我們内部團隊的與外部行業中的案例來介紹整體項目的背景概況。
▐ 前端工程研發新問題
我們從一個内部類似的例子入手，這個例子分成三層邏輯來介紹：
第一層
從 PPT 左側可以看到，存在着 A、B、C 三個團隊，目前這三個團隊都有一個共性，都通過對平時的業務支撐研發過程中進行抽象和建設，打造出了例如像 中背景研發工具、前台研發工具、函數研發工具這樣的研發工具。這裡提效工具對當下的團隊的該類研發場景提到了很好的提效作用。
但是存在一個問題，這裡 A、B、C 三個團隊不會隻負責單獨一類業務，其餘的業務需要相鄰團隊的工具來提效。但是缺乏一種機制使他們各自的工具能進行橫向拉通，通過從通用底層的方式進行标準化建設，輻射到 A、B、C 以及更多的團隊，發揮更大的作用和價值。
第二層
再進一步，這裡其實除了 A、B、C 這樣的團隊，在内部體系中，還會存在 D 這樣的團隊，專門負責整個團隊的架構能力建設，例如中背景、前台、函數的基礎運作時邏輯、編譯建構邏輯等等。那麼由上面的出發點延伸，我們還可以再将工具與架構能力進一步橫向統一和結合，起到更好的串聯效果。
第三層
而還有一層邏輯，在有橫向負責架構基礎能力建設的團隊 D 的同時，也還有負責團隊前端研發流程的團隊 E ，通過提供橫向通用的工程能力進行研發流程支撐，最終我們想到，期望能結合工具、架構、工程的各個能力，形成下一階段的最佳解決方案。
在這樣的整合出發點下，期望通過一種機制或者方式，完成前端工程域下流程态與研發态的新一輪整合，提高研發過程中的整體品質和效率。
▐ IDE 行業背景
前面的部分更多的是我們在當時工作中的一些思考，而背景的另一面，是在 IDE 這個領域中我們看到的一些發展趨勢。
由圖上可以看到，在領域之中的技術正不斷發展和成熟。- 随着以雲計算為代表的基礎硬體計算設施的發展，基礎的 IAAS 等底層設施的橫向擴充變得快捷、簡便 - 以及以 docker 為代表的軟體容器技術的成熟，讓運作時環境變得簡便易用 - 最後在編輯器領域的 LSP、DAP 協定的規範落地，刺激了在編輯器領域中例如語言服務、調試服務的發展，大大地降低了 IDE 建設的技術門檻。
在行業中也陸陸續續地孵化浮現出一些新的同時也是基于 Web 技術的 IDE 相關的産品。- VSCode: 微軟基于 electron 基礎容器研發的，目前在前端領域有相當使用量的 IDE 産品 - Github Codespaces: 起源于 VSCode Web 版本的編輯器工具，目前由微軟收購的 Github 作為産品承載提供 Web 線上研發能力 - Coder: 當下線上 IDE 研發産品中，與 VSCode 插件生态相容度較高的産品 - Codesandbox: 在原型開發領域具有相當影響力的線上研發工具 - Expo: 在 RN 等跨端研發場景中的專屬內建研發工具 - Theia: 由 Eclipse 公司團隊上司的兩端一緻的開源 IDE 研發架構 - Cloud9: 由 AWS 收購的老牌線上研發平台 - Coding: 由騰訊收購的國内線上研發平台。
上面的這些平台都是在這個領域不斷得到發展和認可的産品，其中舉兩個例子：
這裡的 Coder、Codesandbox 兩家公司分别在 18 年和 19 年的時候拿到 $4.5m 和 $2.4m 的投資，而這兩個産品在今年分别拿到了 $30m 和 $12.7m 的投資，從一定程度上也看得出來 IDE 這塊領域的茁壯發展。
▐ 契機
于是在這樣的背景下，我們也期望嘗試通過 IDE 的方式來解決遇到的問題。通過 IDE 這樣的形式來承載在 編碼研發 基礎之上的，對研發鍊路中對于 工程能力、架構定制、研發工具 的整合。
最終通過 IDE 接入的方式完成各個垂直研發鍊路的搭建，實作各個鍊路的研發最佳解決方案。
而對于編碼研發與垂直研發鍊路中的定制工具、架構、工程能力來說，這裡就要求 IDE 在具備一定的基礎編輯能力的同時，也需要具備一定的定制能力。而後續的整體内容，更多的就是關注 KAITIAN 架構的定制能力進行展開。
針對定制能力，其實這裡比較容易想到的是例如像 VSCode 的插件市場，VSCode 通過完善的插件機制，建設出了一個龐大的插件生态。通過使用者基于插件 API 來實作各自的定制訴求，這樣靈活的擴充能力使得 VSCode 平台在幾年之内時間得到的非常多使用者的認可。
借助這樣的經驗，我們也希望基于類似的這樣的插件機制來實作對研發鍊路定制的支援。通過搭建插件容器環境，基于可适配、擴充的插件來完垂直業務鍊路的內建整合。
由插件定制能力出發，實作對體系内、外、線上、線下各個能力的串聯打通，來實作對内、外各個團隊、各個研發場景的研發鍊路建設支援和提效賦能。
▐ 發展現狀
在描述完大緻的背景之後，我們來看下 KAITIAN 在經過一段時間發展之後，核心體系的一些發展。
随着由技術到業務落地的推進，從最初的架構層建設開始，也逐漸完成了上層相關的支撐能力的建設，以及最終在業務形态上也有了多方面的發展。- 整個體系由最底層也是最核心的 KAITIAN 架構作為基礎，通過建設基礎能力子產品以及在此之上的插件能力，來實作對在不同端上 IDE 內建定制能力的支援。- 在架構上層，針對插件能力的上架管理、安裝更新、權限分組等場景的支援，我們建設了插件市場，以及通過 中心插件市場 與 業務插件市場 的機制，來實作基礎能力與業務規則，同時支援定制能力的建設和擴充。- 在往上層就是內建端這層，因為 KAITIAN 本身是一個一套代碼兩端一緻的底層 IDE 架構，同時支援上層的 Web 形式與本地端 Electron 形式的 IDE 用戶端。同時因為相對 Web 形式的 IDE，需要處理容器相關的排程、通路、磁盤等相關的問題，而我們也是通過建設 WebIDE 中台 這樣具備通用能力的橫向平台來快速支撐 Web 版本 IDE 的搭建。- 最上層描述的是，當下 IDE 的服務形式，一方面通過基礎服務能力的形式對在整個工程研發流程中的各個環節提供相關的能力；另一方面，基于插件定制能力，提供給了目前在體系内外的例如像小程式、搭建、函數等等這樣的核心研發模式鍊路。
這幾層結構如今就是當下 KAITIAN 當下業務發展的整體大緻情況，而通過黃色框線的部分，我們支撐起了基于 KAITIAN 插件的業務研發模式定制能力。
一方面通過基于底層子產品能力實作的插件能力來實作插件的基礎的運作、激活、管理等機制，同時基于插件市場來實作插件的分發、安裝更新等上層能力，進而實作對前面提到的插件容器的能力閉環。
以上就是整體的 KAITIAN 項目的背景以及目前的發展業務現狀，下面我們開始介紹 KAITIAN 技術架構相關的内容。
技術架構與實作
技術架構與實作的内容首先會介紹整個項目的整體架構。因為目前核心主題是業務研發模式相關，前面提到其實整個 KAITIAN 項目是通過插件機制能力來實作對研發模式的支撐，後續架構與實作介紹也主要是圍繞着插件展開。
▐ 架構整體架構
我們首先來看下項目整體的架構，我們這裡把項目整體分為四層結構來闡述。
- 能力層: 首先是作為底層運作基礎的能力層，這一層是作為架構功能子產品的基礎依賴，主要是架構運作時中的一些核心能力，提供了例如檔案服務、存儲服務、布局渲染等基礎能力；同時建設了指令機制、依賴管理相關的組織通信機制等。架構通過這層的能力，來實作整體子產品能力的支撐串聯。
- 功能層: 功能層的能力是大家比較熟悉的内容，也就是傳統 IDE 中的一些基礎子產品，例如檔案樹、編輯器、終端等子產品能力，通過實作功能層的各個子產品，來完成 IDE 基礎能力的組織實作。
- 應用層: 在往上就是應用層，其實從前端技術角度切入來講，IDE 實際是一個大型的前後端富應用，而這裡的應用層主要負責的就是前後端生命周期邏輯的管理，包括相應的前端應用的管理邏輯以及後端服務能力的應用管理邏輯。
- 定制層: 而在整體架構最上層，是通過基礎功能層與能力層來實作的定制層能力，通過将子產品的能力基于标準 API 的方式進行插件定制，來實作架構整體的定制層能力
- 支撐層: 在除了架構本身的四個分層介紹之外，其實還有生态周邊的服務相關的支撐層，我們通過建設插件市場、容器排程相關的 WebIDE 中台，以及端相關的更新能力的搭建，使整個架構更好地落地到日常的業務研發用戶端及服務場景中。
項目整體通過這幾層能力實作了一個兩端一緻的 IDE 架構。
前面提到過 IDE 實際上是一個大型的前後端富應用，這裡從這個角度切入基于前面提到的架構看下整體的應用啟動流程。
與基本的前後端應用一樣，首先啟動背景服務，完成服務 server 的建立及背景服務的綁定，等待前台用戶端的連接配接。然後是前端啟動流程，前台用戶端首先與背景服務進行連接配接，然後進行與背景服務相對應的前台服務綁定，以及完成事件相關的前台應用生命周期啟動流程，在完成首屏 IDE 頁面渲染之後，整個前背景應用 IDE 進入工作狀态。
在整體架構的最後，我們回過頭來看下，在前文提到的 IDE 基礎能力 以及 IDE 定制能力 實際在現有的架構分層中，由 能力層、功能層、應用層 承接了 IDE 基礎能力 的角色，同時由基于插件機制體系的 定制層 承接了 IDE 定制能力。
▐ 插件實作背景
在整體結構介紹完之後，我們再來看下插件技術實作更細節的部分。
在正式介紹插件的架構和實作之前，我們先來看下插件設計的主要需求背景。這裡首先向大家展示的是兩張截圖。分别是 LSP 協定與 DAP 協定的截圖，我們在實作插件之前也注意到 VSCode 基于插件機制，依托 LSP 、DAP 這樣的标準協定，實作對語言服務、調試服務的标準化支援，保障了基本的 文法提示、文法定義、定義跳轉、斷掉調試 研發的基礎體驗，這塊我們思考到也可以依托标準協定來通過标準的 language server 與 debug adpter 保障基礎編碼體驗。
與此同時，這裡是一些實際在業務中的 IDE 相關的截圖。可以看到例如向右上角的截圖，主要是一些阿裡雲雲開發平台針對函數研發場景的部署操作相關的界面，左下角是小程式開發的相關界面。在整體研發鍊路中，除了像語言服務這樣的研發體驗，還有鍊路相關的工具能力、工程能力需要依托類似這樣的界面能力進行透出，友善使用者一鍵完成操作。
在這樣的背景下，我們将前文提到的由插件承接的 定制層 主要分為兩個部分。一個是針對基礎研發體驗的定制，另一個是針對業務鍊路的定制。整體的思路就是通過實作與 VSCode 插件相容的機制來實作對基礎研發的體驗保證。通過針對在環境能力、UI 界面能力上的擴充來實作對業務鍊路中工具能力、工程能力的支撐。
我們分别來看下兩塊遞進能力的具體的功能細節：
- VSCode 插件相容: 首先在滿足 VSCode 插件相容這個目标上，我們基于浏覽器渲染環境程序以及服務的 Node 程序進行串聯，基于基礎子產品的能力，通過 API 的形式注入到以這兩個程序為連接配接的插件環境中，進而實作了例如具體的 DAP、LSP 的運作時能力。目前依托實作能力，支撐了例如前端體系的 typescript/javascript、html、css 以及 php、java、c++ 等等這些語言服務及調試能力。
- 能力擴充: 除了實作 VSCode 插件的标準運作環境之外，我們還根據實際的業務擴充訴求，擴充出了以 WebWorker 為主的插件環境，以及增加以前端更熟悉的 React 元件為渲染定制能力，同時也提供更多、更深入的 KAITIAN 插件 API。通過基于插件消息機制的擴充能力，實作了元件 UI 與業務邏輯的隔離機制，保障整體插件體系的穩定性。
▐ 插件實作架構
與前面 KAITIAN 的整體架構介紹一樣，這裡我們也是按照分層架構來進行介紹。
首先是前面提到的以例如檔案樹、編輯器、終端這些上層子產品為主的功能層，插件的基礎 API 背後的能力依托這些子產品以及更底層的能力層子產品。然後則進入插件架構的幾個核心層。
- 插件服務: 主要是插件的頂層管理邏輯，一方面服務插件的掃描、組織管理，另一方面也負責基礎插件與底層能力之間通信能力以及基于此通信能力的插件程序的管理。
- Node 程序/Worker 程序: 然後 Node 程序則是插件實際運作的環境，這層也通過 API 注入能力以及對應插件的激活管理能力，來實作插件啟用；與之對應的是在 KAITIAN 擴充出來以浏覽器 WebWorker 為宿主的插件程序，同樣的具備基礎的通信能力、插件激活能力，通過 WebWorker 的能力，能在一定場景下大幅降低服務端消耗。
- 渲染環境: 這裡也是由 KAITIAN 單獨擴充的一層能力，插件通過 React 元件來承接工程、工具、架構相關的能力，同時基于插件的消息通信機制，完成與 Node/Worker 程序的渲染與業務邏輯分離，保障整體插件流程的穩定性。
可以看到整體插件程序基本也是由 Browser 環境與 Node 環境組成。
▐ 插件示例
說完了插件的基礎架構内容，我們來看下幾個示例。
第一個示例是通過對 VSCode 插件環境的相容實作，完成了例如 gitlens 這樣核心插件的基礎支援。
第二個是相關的界面拓展 API，以及可以通過邏輯的分離能力，實作對 KAITIAN API 調用關閉展開面闆，以及 VSCode API 調用彈出提示框。
第三個示例相對比較複雜。可以看到是分别調用 Node 環境與 Worker 環境的服務，同時通過各自程序的業務邏輯回報資料，通過前台的 React 元件程序展示的流程。
研發模式上的推進
在完成了相關的技術架構之後，也針對我們今天分享的主題，研發模式及業務落地這塊進行介紹。我們一起來看下 KAITIAN 項目從去年 5 月開始，一年多的時間，從技術項目到業務落地相關的進展。
首先在講訴的具體的案例之前，我們可以看下我們對前端工程、前端研發流程的相關梳理。開發者開發一個項目，首先借助腳手架進行基礎模闆代碼的生成以及倉庫建立的初始化，随後進入到代碼研發階段。
在完成研發之後進入到內建階段，以及開始進行往複循環的代碼合并及代碼稽核流程。在完成研發調試工作之後，進入傳遞部署流程，随後進入對應業務的監控、灰階等運維環節。
我們着重看下流程線上綠色的部分，可以看到當下 IDE 相關在整個研發流程中的适用場景，一方面是在這裡淺綠色顯示的使用者編碼研發階段，另一方面，則是在這裡青綠色顯示的在例如像監控、代碼稽核、沖突合并等場景中提供服務能力。
目前業務上通過 KAITIAN 架構的插件體系能力，一方面通過标準化的架構、工具、工程結合鍊路提高研發的效率以及保障代碼品質，另一方面在研發流程中将 IDE 抽象為類似雲服務中的存儲能力的通用服務能力，在各個場景中提供支援。後續的内容也主要從這兩個方面進行展開。
▐ 編碼研發
我們首先來看下編碼研發相關的場景。這裡的截圖都是目前阿裡體系内外的一些案例。
例如左上角的中背景場景，右側的小程式研發場景，以及右下角的搭建場景。後面我們着重從目前比較熱門的小程式研發的鍊路來講。
這裡是我們在内部研發工具的一個截圖，可以看到這裡提供了由架構團隊提供的編譯預覽能力、文法服務等相關能力，然後底部面闆內建了調試的 devtool 工具。
這裡可以看到相關的調試預覽二維碼，以及相關的編譯調試日志，像這樣的工具和架構的相關能力基于插件機制直接內建到操作面闆中。
以及針對工程疊代部署相關的疊代、釋出能力，也是通過插件進行內建，實作流程的閉環。
例如像小程式這樣的鍊路，我們同樣是基于 KAITIAN 插件，完成了工程相關的例如應用管理、疊代管理、部署釋出相關能力的內建，同時将架構中的文法轉換、編譯預覽能力內建到插件的運作時環境中，以及通過插件的形式将在研發過程中所用到的工具能力進行串聯。從前文提到的三個層面将以往各個平台各個使用體驗、思路進行整合統一，最大化的研發體驗，同時也實作效率與品質的提升。
以往，我們使用不同的工具、架構能力、工程能力的時候，需要從各個平台的角度去進行了解學習，并基于對各個方面的了解來整合出自己的最佳實踐來完成開發工作。而如今借由 IDE 容器以及提供的基于插件實作的定制內建能力，将不同平台、不同能力進行整合，形成統一的使用操作模式，使整個鍊路更加自然、快捷。
與之同時在技術角度，就小程式這個例子來看，我們也從業務訴求出發，推動着架構的能力更新。這裡可以看到左側截圖中的浮窗能力，今天開發者需要借助這樣的視窗組織能力實作更靈活的調試檢視能力，提升研發過程的調試預覽體驗。
我們通過在底層插件機制中，在 Electron 運作環境下，通過打通 Main 程序與新開視窗中的消息鍊路，以及打通 Main 程序與插件 Node 程序的消息鍊路，實作新開視窗與插件 Node 程序的間接通信邏輯。進而實作了通過插件 API 對視窗的控制能力。
而在如圖的 PC 端場景下，我們可以到浮窗能力的重要性，通過浮窗能力實作 PC 用戶端小程式的預覽，進而從根本上解決了傳統預覽能力中的編碼區域與預覽區域沖突問題。
▐ 服務能力
以上是編碼研發的一個例子，然後除了可能比較直覺的編碼相關能力，其實越來越多的場景也基于 IDE 的方式進行切入和變化，提高了産品功能的整體表達效果。
這裡也是體系内外的一些截圖，在代碼稽核、示例展示、沖突合并以及在一些嵌入場景中， IDE 除了在研發編碼場景中也同樣更像是一種基礎能力，在研發相關的場景中提供着能力支援。
這裡是我們同樣是基于 KAITIAN 架構的能力，以及對應的後端服務，實作基于 IDE 架構的代碼稽核平台。首先是基于插件 API 實作基礎的代碼稽核相關的 代碼 DIFF 檢視、變更檔案樹清單、評論注釋能力 等等功能。同時基于 KAITIAN 插件的定制能力，還實作了更多的業務邏輯上的定制，例如針對 CR 本身的規則、攻防品質保證政策以及結合服務端能力實作了多版本稽核的代碼稽核模式。
可以看到，在傳統的一些場景中，通過足夠開放的定制能力，可以打開更多的想象空間。
這裡從最後提到的基于插件能力實作的多版本稽核能力來進行展開。以往的研發模式可以看到黃色部分，整個 CR 流程和粗略的看做是在最後上線階段發起。這裡我們發現在一線研發過程中，在最後階段發起會導緻 CR 的成本過高，往往可能是幾百上千的代碼直接進行 review ，這裡與疊代研發過程的功能子產品的組織串聯成型流程存在着明顯脫節。
而我們通過插件實作多版本稽核能力之後，可以看到綠色部分，穿插到整個疊代功能的實作過程中，基于一定的 CR 發起規則來分階段步驟進行 CR ，保證 CR 的效率和品質進而提高代碼品質。
可以看到基于 IDE 形式的代碼稽核，在與研發流程結合與規則拓展上，相比較以往的類似借助 Gitlab 的方式能有更多的方式來進行模式上的更新。
同樣的，我們在實作這個項目的時候，也發現了傳統的 IDE 能力上場景不比對的問題。
以往的 Web 環境下的 IDE 依托容器服務，通過黃色部分我們可以看到，在真正進入到 IDE 界面進入 CR 流程之前會有容器啟動、IDE 前背景連接配接等流程。但是在代碼稽核這個場景下，其實無需容器環境提供的例如終端、檔案等服務能力，這其實對資源造成一定的浪費，同時加載帶來的耗時對體驗也造成一定的影響。
基于這樣的業務背景，我們在架構側進行改造，使之可以不借助容器環境啟動，提高資源使用率以及以及大幅提升加載速度。
而在這背後，底層架構方面的實作思路是這樣，我們将例如檔案能力這樣的基礎服務進行生産方服務端以及消費方用戶端進行拆分，依托接口描述來進行抽象解耦。
基于這樣的拆分，我們将在代碼稽核場景下使用到的例如文檔編輯、評論、檔案樹、存儲等子產品進行拆分，以及基于 KAITIAN 插件的 Worker 環境能力，與之前對接 IDE 服務端能力不同的是，與遠端服務直接對接。進而實作前端環境版本運作時效果，針對弱編輯場景下提供了更好的架構能力支援。
未來趨勢
我們在完成了核心技術細節相關的内容之後，再來看下我們從做 KAITIAN 以來，看到的行業中的一些觀察以及我們對未來發展的思考。
在編碼方面，這裡是一些外部公司的截圖，從 facebook、微軟、google 各個公司的研發模式中可以看到，基于遠端标準化環境研發的模式逐漸成為研發流程中的主要鍊路之一。通過遠端研發的模式，能在保障研發環境能力全面統一的同時，也能較好切入的保障研發過程的安全，以及能快速進行啟動使用。
與以往研發由不同的本地環境不同的是，基于服務端的排程管理與內建能力，提供給開發者完全統一的環境，實作研發流程中研發環境的标準規範化。
這樣的模式優勢在于借助當下雲原生的能力，在統一背後可以做到軟硬體環境的資源利用，同時也能保證更好的安全性。同時這樣的研發模式在我們日常的接觸和觀察測試中，對于基礎設施例如容器、網絡、存儲等方面的要求和挑戰也非常高。
我們在編碼方面上，還有一個點是可以從左側的圖看到，以往的編碼是在工程流程形狀之外，而後續更多的完整包含流程的方式，例如像在 Codesandbox 這樣的産品中也越來越強調跟整個研發流程 Workflow 的內建，進而實作整體鍊路的高效率。
通過從基礎編碼到釋出整個工作流的串聯內建，借助 IDE 這樣的方式實作新的研發模式體驗。
不僅是研發編碼，在服務能力上，可以從這裡的截圖看出，無論是 Codesandbox 在原型開發場景上的易用，以及 Node 官方文檔之前采用的 Runkit ，以及當下左下角展示的小程式 APP 的效果預覽，都可以看到 IDE 在作為一種基礎服務能力形式發揮價值。
可以看到從編碼研發開始，無論是協同問題排查還是沖突合并，以及在部署和線上環境中排查，IDE 的能力将會逐漸滲透，在原有方案的基礎上進行體驗更新。