前言

本文介紹了網易云音樂開源的低代碼引擎 Tango 的實現原理。Tango 是基于源碼的低代碼設計器框架，采用 ESTree 規范將源碼解析為 AST，并通過遍歷和修改 AST 實現低代碼搭建邏輯。Tango 還包括一個在線渲染沙箱，使用 工具庫在瀏覽器中實時執行 源碼。通過 Tango，開發者可以基于項目源碼提供低代碼可視化開發能力，實現漸進式的低代碼開發。

今日前端早讀課文章由 @景莊分享，公號：網易云音樂技術團隊授權。

正文從這開始～～

在 8 月底正式開源了 Tango 低代碼引擎。Tango 是一個基于源碼的低代碼設計器框架，支持直接基于項目源碼提供低代碼可視化開發能力，可以無縫的與既有的本地開發工作流進行集成，從而提供漸進式的低代碼開發能力。

Tango 低代碼引擎使用演示

按照計劃，我們在 9 月底發布了 beta 版本，在此版本中我們遵循 “最小內核” 的原則對 Tango 的核心實現進行了大幅的重構，剝離了大量冗余的代碼實現。

為了幫助大家更近一步的了解 Tango 開源版本的核心構成與代碼實現，本文將會詳細揭秘 Tango 低代碼引擎的設計思考與實現過程。

低代碼可視化搭建之殤

從實現上看，低代碼搭建能力的核心是 UI 可視化編程。借助 UI 可視化編程，可以大大的弱化使用者對于代碼編程的感知，但在真實的業務需求場景中，我們面臨著大量的復雜的應用邏輯，使用者很難借助 UI 操作表達功能邏輯。例如下圖中的合同管理，資金結算等頁面。如果借助于傳統的低代碼方案，通常會發現，很容易一條路走到黑，沒有回頭路。所以，經常會有開發者抱怨，稍微復雜的場景下，低代碼的效率甚至不如寫代碼。

在實際業務場景中面臨大量難以低代碼開發的前端應用

傳統低代碼方案的問題

我們不妨先簡單分析一下傳統的低代碼方案的問題。傳統的低代碼搭建方案往往采用定義私有 Schema 協議來可視化表達視圖邏輯，也就是將代碼邏輯轉換為私有的描述，大致的原理可以參考下面這張圖。

基于 Schema 的低代碼可視化搭建方案

這類方案很容易面臨不斷膨脹的私有 JSON 協議。并且，私有協議擴展性和靈活性差，難以達到圖靈完備狀態。例如在我們的實際開發過程中，傳統的低代碼方案會面臨各種各樣的擴展性卡點。此外，開發能力往往受限于內置的組件和模板。且難以復用現有的前端資產，例如組件和代碼等等。對于開發者而言，私有協議也導致問題定位難，調試難。

借助于私有協議的搭建方案通常適合于輕業務邏輯的簡單類表單，營銷類的活動頁面等等，很難用于復雜的業務邏輯搭建場景，因為私有協議難以有效的應對這類場景的復雜性和靈活性需求。雖然，有些方案提供了協議轉代碼的能力，但通常只實現了單向轉碼，可視化開發和代碼開發是兩條完全割裂的路徑。

在此基礎上，我們就需要重新思考低代碼搭建協議的設計問題。

從私有搭建協議到公有協議

那么，我們能否不使用私有協議，而是采用公有協議？

答案是，可以的！ESTree 規范作為主流的處理 源代碼的標準社區協議，被廣泛用于瀏覽器 Parser 的實現。借助于 ESTree 協議，可以完美的實現對源碼邏輯的描述，并且社區有大量的工具可以幫助我們完成這個過程。

基于 ESTree 規范，實現雙向互轉的低代碼搭建能力

因此，我們嘗試使用 ESTree 規范來實現低代碼搭建過程。借助于 ESTree 規范，我們無需定義私有的渲染描述協議，并且可以低成本的實現代碼到協議，協議到代碼到互轉。借助于雙向轉碼的能力，我們獲得全新的低代碼開發體驗。

Tango 低代碼引擎實現原理

基于這個思路，我們設計了基于 ESTree 規范的低代碼引擎方案 -- Tango。可以通過下面這張圖來簡單的描述下實現邏輯：

Tango 低代碼引擎實現分析

首先將源代碼解析為 AST。用戶的拖拉拽等操作則映射為對 AST 的遍歷和修改。最后將新的 AST 重新生成代碼，交給設計器沙箱去渲染執行。而對 AST 的解析、遍歷、修改、生成，則可以借助大量的社區工具，這里我們選擇的是 babel！

AST 的全稱是抽象語法樹，是一種分層的程序表達，根據編程語言的語法呈現源代碼的結構。

大量的工具基于 AST 實現

其實，數量眾多的前端工具庫都是基于 AST 操縱實現的。我們可以發現，在任意的前端項目中的 package.json 里的 里的很多工具包是基于 AST 解析操縱實現的，例如 JS 的轉譯，代碼壓縮，ESLint 等等，我們可以閱讀這些工具的源碼來進一步的學習。

將源碼轉為 AST 描述的基本過程

如圖所示，將源代碼轉為 AST 描述的基本過程包括詞法分析和句法分析兩個階段:

最后，我們可以獲得源代碼的結構化描述樹。有很多工具可以幫我們來實現這個過程，例如 babel -- 它可以幫助我們輕松的實現代碼到 ast，ast 遍歷修改，ast 到代碼的過程。

基于 AST 實現搭建的基本過程

我們來看一下使用 ast 實現搭建邏輯的基本過程。

看一個具體的例子：通過修改 AST，在 Page 中插入一個 Section 節點。

基于 AST 實現搭建邏輯

中間這段代碼，展示了核心的邏輯，通過遍歷整個 AST 中的所有 節點，找到第一個 Page 元素，然后在 Page 元素的 里插入新的 Section 節點。這只是一段演示代碼，具體的過程比這個要復雜的多，因為有很多的邊際邏輯要處理。最后，我們可以將 ast 重新生成為代碼，得到我們想要的結果。

Tango 的數據變更流程設計

了解了基本的實現原理后，我們來看一下低代碼引擎的數據變更流程設計。

數據變更流程設計

首先是引擎初始化。源碼文件會被引擎內核解析進行狀態初始化。接下來，對于用戶的操作，會觸發瀏覽器事件，引擎接收到相應的事件，觸發內核中的狀態變更，更新 AST。

然后，內核會基于新的 AST 的同步生成代碼，由引擎將代碼同步給渲染沙箱。渲染沙箱感知到代碼變化后，會觸發頁面重新渲染，也就是沙箱的 HMR 過程。

基于源碼的在線渲染沙箱設計

接下來，我們需要考慮的是如何在瀏覽器中執行 源碼工程？有很多方案可以選擇，我們選擇的方案是 ，它是由 開源的可以在瀏覽器中實時運行 項目的的工具庫。在具體實現上，我們對 進行了一系列的改造，以滿足低代碼生產環境的需要。

基于 的在線渲染沙箱方案如下圖圖所示。

Tango 沙箱設計

在實現上，主要包括 3 個部分，分別是：

從沙箱執行流程來看，首先 Sandbox 組件將項目的源代碼和 compile 指令使用 傳遞給在線 Bundler，在線 Bundler 在接收到 compile 指令后，bundler 會從 打包服務加載項目的 npm 依賴，然后編譯和執行代碼，最后發送 success 消息給低代碼沙箱。

Tango 低代碼引擎的構成

結合上面的介紹，在構成上，Tango 低代碼引擎主要包括 3 個核心組成部分，分別是：

引擎構成

借助于 Tango 低代碼引擎，我們可以為開發者提供全新的在線開發體驗，支持源碼級的自定義能力。對可視化開發而言，可視化配置會觸發 AST 的修改，進而會重新生成對應的源碼。而對源碼開發而言，修改源碼后會同步更新 AST。

開源版本發行計劃

目前我們已經完成了 Tango 核心實現的基本代碼庫的開源，包括核心引擎內核、沙箱、設置器、應用框架、物料協議等等。預計在 10 月底，我們將會發布 Tango 的社區 RC 版本，該版本將會獲得更加穩定的 API 和更加完善的文檔。

正式版本 我們將在 2023 年 Q4 結束前 發布，屆時我們會進一步完善我們的開源社區運營機制。

在云音樂，我們還在構建更加完善的面向生產場景的低代碼研發體系，包括 RN 跨端應用的低代碼研發，后端邏輯和服務的低代碼編排能力，以及基于低代碼的前后端研發工具鏈等等。隨著相關能力的穩定和時間的成熟，后續我們將會持續向社區開源更多的內部實踐。

關于本文