Tango 是一個(gè)基于源碼的低代碼設(shè)計(jì)器框架，支持直接基于項(xiàng)目源碼提供低代碼可視化開(kāi)發(fā)能力，可以無(wú)縫的與既有的本地開(kāi)發(fā)工作流進(jìn)行集成，從而提供漸進(jìn)式的低代碼開(kāi)發(fā)能力。

Tango 低代碼引擎使用演示

按照計(jì)劃在 9 月底發(fā)布了 beta 版本，在此版本中遵循 “最小內(nèi)核” 的原則對(duì) Tango 的核心實(shí)現(xiàn)進(jìn)行了大幅的重構(gòu)，剝離了大量冗余的代碼實(shí)現(xiàn)。

為了幫助大家更近一步的了解 Tango 開(kāi)源版本的核心構(gòu)成與代碼實(shí)現(xiàn)，本文將會(huì)詳細(xì)揭秘 Tango 低代碼引擎的設(shè)計(jì)思考與實(shí)現(xiàn)過(guò)程。

• Github 倉(cāng)庫(kù)：https://github.com/NetEase/tango
• 發(fā)行歷史：https://github.com/NetEase/tango/releases
• 文檔站點(diǎn)：https://netease.github.io/tango/

01 低代碼可視化搭建之殤

從實(shí)現(xiàn)上看，低代碼搭建能力的核心是 UI 可視化編程。借助 UI 可視化編程，可以大大的弱化使用者對(duì)于代碼編程的感知，但在真實(shí)的業(yè)務(wù)需求場(chǎng)景中，我們面臨著大量的復(fù)雜的應(yīng)用邏輯，使用者很難借助 UI 操作表達(dá)功能邏輯。例如下圖中的合同管理，資金結(jié)算等頁(yè)面。如果借助于傳統(tǒng)的低代碼方案，通常會(huì)發(fā)現(xiàn)，很容易一條路走到黑，沒(méi)有回頭路。所以，經(jīng)常會(huì)有開(kāi)發(fā)者抱怨，稍微復(fù)雜的場(chǎng)景下，低代碼的效率甚至不如寫代碼。

在實(shí)際業(yè)務(wù)場(chǎng)景中面臨大量難以低代碼開(kāi)發(fā)的前端應(yīng)用

02 傳統(tǒng)低代碼方案的問(wèn)題

我們不妨先簡(jiǎn)單分析一下傳統(tǒng)的低代碼方案的問(wèn)題。傳統(tǒng)的低代碼搭建方案往往采用定義私有 Schema 協(xié)議來(lái)可視化表達(dá)視圖邏輯，也就是將代碼邏輯轉(zhuǎn)換為私有的描述，大致的原理可以參考下面這張圖。

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

這類方案很容易面臨不斷膨脹的私有 JSON 協(xié)議。并且，私有協(xié)議擴(kuò)展性和靈活性差，難以達(dá)到圖靈完備狀態(tài)。例如在我們的實(shí)際開(kāi)發(fā)過(guò)程中，傳統(tǒng)的低代碼方案會(huì)面臨各種各樣的擴(kuò)展性卡點(diǎn)。此外，開(kāi)發(fā)能力往往受限于內(nèi)置的組件和模板。且難以復(fù)用現(xiàn)有的前端資產(chǎn)，例如組件和代碼等等。對(duì)于開(kāi)發(fā)者而言，私有協(xié)議也導(dǎo)致問(wèn)題定位難，調(diào)試難。

借助于私有協(xié)議的搭建方案通常適合于輕業(yè)務(wù)邏輯的簡(jiǎn)單類表單，營(yíng)銷類的活動(dòng)頁(yè)面等等，很難用于復(fù)雜的業(yè)務(wù)邏輯搭建場(chǎng)景，因?yàn)樗接袇f(xié)議難以有效的應(yīng)對(duì)這類場(chǎng)景的復(fù)雜性和靈活性需求。雖然，有些方案提供了協(xié)議轉(zhuǎn)代碼的能力，但通常只實(shí)現(xiàn)了單向轉(zhuǎn)碼，可視化開(kāi)發(fā)和代碼開(kāi)發(fā)是兩條完全割裂的路徑。

在此基礎(chǔ)上，我們就需要重新思考低代碼搭建協(xié)議的設(shè)計(jì)問(wèn)題。

03 從私有搭建協(xié)議到公有協(xié)議

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

答案是，可以的！ESTree 規(guī)范作為主流的處理 JavaScript 源代碼的標(biāo)準(zhǔn)社區(qū)協(xié)議，被廣泛用于瀏覽器 JavaScript Parser 的實(shí)現(xiàn)。借助于 ESTree 協(xié)議，可以完美的實(shí)現(xiàn)對(duì)源碼邏輯的描述，并且社區(qū)有大量的工具可以幫助我們完成這個(gè)過(guò)程。

基于ESTree規(guī)范，實(shí)現(xiàn)雙向互轉(zhuǎn)的低代碼搭建能力

因此，我們嘗試使用 ESTree 規(guī)范來(lái)實(shí)現(xiàn)低代碼搭建過(guò)程。借助于 ESTree 規(guī)范，我們無(wú)需定義私有的渲染描述協(xié)議，并且可以低成本的實(shí)現(xiàn)代碼到協(xié)議，協(xié)議到代碼到互轉(zhuǎn)。借助于雙向轉(zhuǎn)碼的能力，我們獲得全新的低代碼開(kāi)發(fā)體驗(yàn)。

04 Tango 低代碼引擎實(shí)現(xiàn)原理

基于這個(gè)思路，我們?cè)O(shè)計(jì)了基于 ESTree 規(guī)范的低代碼引擎方案 -- Tango?？梢酝ㄟ^(guò)下面這張圖來(lái)簡(jiǎn)單的描述下實(shí)現(xiàn)邏輯：

Tango 低代碼引擎實(shí)現(xiàn)分析

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

AST 的全稱是抽象語(yǔ)法樹(shù)，是一種分層的程序表達(dá)，根據(jù)編程語(yǔ)言的語(yǔ)法呈現(xiàn)源代碼的結(jié)構(gòu)。

其實(shí)，數(shù)量眾多的前端工具庫(kù)都是基于 AST 操縱實(shí)現(xiàn)的。我們可以發(fā)現(xiàn)，在任意的前端項(xiàng)目中的 package.json 里的 devDependencies 里的很多工具包是基于 AST 解析操縱實(shí)現(xiàn)的，例如 JS 的轉(zhuǎn)譯，代碼壓縮，ESLint 等等，我們可以閱讀這些工具的源碼來(lái)進(jìn)一步的學(xué)習(xí)。

如圖所示，將源代碼轉(zhuǎn)為 AST 描述的基本過(guò)程包括詞法分析和句法分析兩個(gè)階段:

• 詞法分析：借助詞法分析器將代碼字符串分割為標(biāo)記列表。
• 句法分析：借助句法分析器將標(biāo)記數(shù)據(jù)轉(zhuǎn)為 AST 描述。

最后，我們可以獲得源代碼的結(jié)構(gòu)化描述樹(shù)。有很多工具可以幫我們來(lái)實(shí)現(xiàn)這個(gè)過(guò)程，例如 babel -- 它可以幫助我們輕松的實(shí)現(xiàn)代碼到 ast，ast 遍歷修改，ast 到代碼的過(guò)程。

05 基于 AST 實(shí)現(xiàn)搭建的基本過(guò)程

我們來(lái)看一下使用 ast 實(shí)現(xiàn)搭建邏輯的基本過(guò)程。

看一個(gè)具體的例子：通過(guò)修改 AST，在 Page 中插入一個(gè) Section 節(jié)點(diǎn)。

基于 AST 實(shí)現(xiàn)搭建邏輯

中間這段代碼，展示了核心的邏輯，通過(guò)遍歷整個(gè) AST 中的所有 JSXElement 節(jié)點(diǎn)，找到第一個(gè) Page 元素，然后在 Page 元素的 children 里插入新的 Section 節(jié)點(diǎn)。這只是一段演示代碼，具體的過(guò)程比這個(gè)要復(fù)雜的多，因?yàn)橛泻芏嗟倪呺H邏輯要處理。最后，我們可以將 ast 重新生成為代碼，得到我們想要的結(jié)果。

06 Tango 的數(shù)據(jù)變更流程設(shè)計(jì)

了解了基本的實(shí)現(xiàn)原理后，我們來(lái)看一下低代碼引擎的數(shù)據(jù)變更流程設(shè)計(jì)。

數(shù)據(jù)變更流程設(shè)計(jì)

首先是引擎初始化。源碼文件會(huì)被引擎內(nèi)核解析進(jìn)行狀態(tài)初始化。接下來(lái)，對(duì)于用戶的操作，會(huì)觸發(fā)瀏覽器事件，引擎接收到相應(yīng)的事件，觸發(fā)內(nèi)核中的狀態(tài)變更，更新 AST。

然后，內(nèi)核會(huì)基于新的 AST 的同步生成代碼，由引擎將代碼同步給渲染沙箱。渲染沙箱感知到代碼變化后，會(huì)觸發(fā)頁(yè)面重新渲染，也就是沙箱的 HMR 過(guò)程。

07 基于源碼的在線渲染沙箱設(shè)計(jì)

接下來(lái)，我們需要考慮的是如何在瀏覽器中執(zhí)行 JavaScript 源碼工程？有很多方案可以選擇，我們選擇的方案是 sandpack，它是由 CodeSandbox 開(kāi)源的可以在瀏覽器中實(shí)時(shí)運(yùn)行 JavaScript 項(xiàng)目的的工具庫(kù)。在具體實(shí)現(xiàn)上，我們對(duì) sandpack 進(jìn)行了一系列的改造，以滿足低代碼生產(chǎn)環(huán)境的需要。

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

Tango 沙箱設(shè)計(jì)

在實(shí)現(xiàn)上，主要包括 3 個(gè)部分，分別是：

• 低代碼沙箱：它是一個(gè)開(kāi)箱即用的前端組件，只需要傳入源代碼和構(gòu)建配置信息即可完成前端項(xiàng)目的構(gòu)建和執(zhí)行。
• 在線 Bundler：是低代碼沙箱的核心，用來(lái)在瀏覽器上構(gòu)建和執(zhí)行源代碼，本質(zhì)上是一個(gè)在瀏覽器端運(yùn)行的簡(jiǎn)化版 webpack。
• 打包服務(wù)：是一個(gè) node 服務(wù)，用來(lái)對(duì) npm 包執(zhí)行預(yù)構(gòu)建和資源合并。

從沙箱執(zhí)行流程來(lái)看，首先 Sandbox 組件將項(xiàng)目的源代碼和 compile 指令使用 postMessage 傳遞給在線 Bundler，在線 Bundler 在接收到 compile 指令后，bundler 會(huì)從 packager 打包服務(wù)加載項(xiàng)目的 npm 依賴，然后編譯和執(zhí)行代碼，最后發(fā)送 success 消息給低代碼沙箱。

08 Tango 低代碼引擎的構(gòu)成

結(jié)合上面的介紹，在構(gòu)成上，Tango 低代碼引擎主要包括 3 個(gè)核心組成部分，分別是：

• 引擎內(nèi)核：扶額建立文件，節(jié)點(diǎn)模型，提供輸入輸出能力。
• 拖拽引擎和可視化面板：提供可視化開(kāi)發(fā)能力
• 渲染沙箱：提供源碼在瀏覽器上的編譯執(zhí)行能力。

引擎構(gòu)成

借助于 Tango 低代碼引擎，我們可以為開(kāi)發(fā)者提供全新的在線開(kāi)發(fā)體驗(yàn)，支持源碼級(jí)的自定義能力。對(duì)可視化開(kāi)發(fā)而言，可視化配置會(huì)觸發(fā) AST 的修改，進(jìn)而會(huì)重新生成對(duì)應(yīng)的源碼。而對(duì)源碼開(kāi)發(fā)而言，修改源碼后會(huì)同步更新 AST。

09 開(kāi)源版本發(fā)行計(jì)劃

目前已經(jīng)完成了 Tango 核心實(shí)現(xiàn)的基本代碼庫(kù)的開(kāi)源，包括核心引擎內(nèi)核、沙箱、設(shè)置器、應(yīng)用框架、物料協(xié)議等等。

正式版本將在 2023 年 Q4 結(jié)束前發(fā)布，屆時(shí)會(huì)進(jìn)一步完善開(kāi)源社區(qū)運(yùn)營(yíng)機(jī)制。

在云音樂(lè)，我們還在構(gòu)建更加完善的面向生產(chǎn)場(chǎng)景的低代碼研發(fā)體系，包括 RN 跨端應(yīng)用的低代碼研發(fā)，后端邏輯和服務(wù)的低代碼編排能力，以及基于低代碼的前后端研發(fā)工具鏈等等。隨著相關(guān)能力的穩(wěn)定和時(shí)間的成熟，后續(xù)我們將會(huì)持續(xù)向社區(qū)開(kāi)源更多的內(nèi)部實(shí)踐。

繼續(xù)閱讀：

未經(jīng)允許不得轉(zhuǎn)載：RPA中國(guó) | RPA全球生態(tài) | 數(shù)字化勞動(dòng)力 | RPA新聞 | 推動(dòng)中國(guó)RPA生態(tài)發(fā)展 | 流 > 網(wǎng)易云音樂(lè) Tango 低代碼引擎實(shí)現(xiàn)揭秘