整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
前言
本文介紹了網(wǎng)易云音樂開源的低代碼引擎 Tango 的實現(xiàn)原理。Tango 是基于源碼的低代碼設(shè)計器框架，采用 ESTree 規(guī)范將源碼解析為 AST，并通過遍歷和修改 AST 實現(xiàn)低代碼搭建邏輯。Tango 還包括一個在線渲染沙箱，使用 工具庫在瀏覽器中實時執(zhí)行 源碼。通過 Tango，開發(fā)者可以基于項目源碼提供低代碼可視化開發(fā)能力，實現(xiàn)漸進(jìn)式的低代碼開發(fā)。
今日前端早讀課文章由 @景莊分享，公號：網(wǎng)易云音樂技術(shù)團(tuán)隊授權(quán)。
正文從這開始～～
在 8 月底正式開源了 Tango 低代碼引擎。Tango 是一個基于源碼的低代碼設(shè)計器框架，支持直接基于項目源碼提供低代碼可視化開發(fā)能力，可以無縫的與既有的本地開發(fā)工作流進(jìn)行集成，從而提供漸進(jìn)式的低代碼開發(fā)能力。
Tango 低代碼引擎使用演示
按照計劃，我們在 9 月底發(fā)布了 beta 版本，在此版本中我們遵循 “最小內(nèi)核” 的原則對 Tango 的核心實現(xiàn)進(jìn)行了大幅的重構(gòu)，剝離了大量冗余的代碼實現(xiàn)。
為了幫助大家更近一步的了解 Tango 開源版本的核心構(gòu)成與代碼實現(xiàn)，本文將會詳細(xì)揭秘 Tango 低代碼引擎的設(shè)計思考與實現(xiàn)過程。
低代碼可視化搭建之殤
從實現(xiàn)上看，低代碼搭建能力的核心是 UI 可視化編程。借助 UI 可視化編程，可以大大的弱化使用者對于代碼編程的感知，但在真實的業(yè)務(wù)需求場景中，我們面臨著大量的復(fù)雜的應(yīng)用邏輯，使用者很難借助 UI 操作表達(dá)功能邏輯。例如下圖中的合同管理，資金結(jié)算等頁面。如果借助于傳統(tǒng)的低代碼方案，通常會發(fā)現(xiàn)，很容易一條路走到黑，沒有回頭路。所以，經(jīng)常會有開發(fā)者抱怨，稍微復(fù)雜的場景下，低代碼的效率甚至不如寫代碼。
在實際業(yè)務(wù)場景中面臨大量難以低代碼開發(fā)的前端應(yīng)用
傳統(tǒng)低代碼方案的問題
我們不妨先簡單分析一下傳統(tǒng)的低代碼方案的問題。傳統(tǒng)的低代碼搭建方案往往采用定義私有 Schema 協(xié)議來可視化表達(dá)視圖邏輯，也就是將代碼邏輯轉(zhuǎn)換為私有的描述，大致的原理可以參考下面這張圖。
基于 Schema 的低代碼可視化搭建方案
這類方案很容易面臨不斷膨脹的私有 JSON 協(xié)議。并且，私有協(xié)議擴展性和靈活性差，難以達(dá)到圖靈完備狀態(tài)。例如在我們的實際開發(fā)過程中，傳統(tǒng)的低代碼方案會面臨各種各樣的擴展性卡點。此外，開發(fā)能力往往受限于內(nèi)置的組件和模板。且難以復(fù)用現(xiàn)有的前端資產(chǎn)，例如組件和代碼等等。對于開發(fā)者而言，私有協(xié)議也導(dǎo)致問題定位難，調(diào)試難。
借助于私有協(xié)議的搭建方案通常適合于輕業(yè)務(wù)邏輯的簡單類表單，營銷類的活動頁面等等，很難用于復(fù)雜的業(yè)務(wù)邏輯搭建場景，因為私有協(xié)議難以有效的應(yīng)對這類場景的復(fù)雜性和靈活性需求。雖然，有些方案提供了協(xié)議轉(zhuǎn)代碼的能力，但通常只實現(xiàn)了單向轉(zhuǎn)碼，可視化開發(fā)和代碼開發(fā)是兩條完全割裂的路徑。
在此基礎(chǔ)上，我們就需要重新思考低代碼搭建協(xié)議的設(shè)計問題。
從私有搭建協(xié)議到公有協(xié)議
那么，我們能否不使用私有協(xié)議，而是采用公有協(xié)議？
答案是，可以的！ESTree 規(guī)范作為主流的處理 源代碼的標(biāo)準(zhǔn)社區(qū)協(xié)議，被廣泛用于瀏覽器 Parser 的實現(xiàn)。借助于 ESTree 協(xié)議，可以完美的實現(xiàn)對源碼邏輯的描述，并且社區(qū)有大量的工具可以幫助我們完成這個過程。
基于 ESTree 規(guī)范，實現(xiàn)雙向互轉(zhuǎn)的低代碼搭建能力
因此，我們嘗試使用 ESTree 規(guī)范來實現(xiàn)低代碼搭建過程。借助于 ESTree 規(guī)范，我們無需定義私有的渲染描述協(xié)議，并且可以低成本的實現(xiàn)代碼到協(xié)議，協(xié)議到代碼到互轉(zhuǎn)。借助于雙向轉(zhuǎn)碼的能力，我們獲得全新的低代碼開發(fā)體驗。
Tango 低代碼引擎實現(xiàn)原理
基于這個思路，我們設(shè)計了基于 ESTree 規(guī)范的低代碼引擎方案 -- Tango。可以通過下面這張圖來簡單的描述下實現(xiàn)邏輯：
Tango 低代碼引擎實現(xiàn)分析
首先將源代碼解析為 AST。用戶的拖拉拽等操作則映射為對 AST 的遍歷和修改。最后將新的 AST 重新生成代碼，交給設(shè)計器沙箱去渲染執(zhí)行。而對 AST 的解析、遍歷、修改、生成，則可以借助大量的社區(qū)工具，這里我們選擇的是 babel！
AST 的全稱是抽象語法樹，是一種分層的程序表達(dá)，根據(jù)編程語言的語法呈現(xiàn)源代碼的結(jié)構(gòu)。
大量的工具基于 AST 實現(xiàn)
其實，數(shù)量眾多的前端工具庫都是基于 AST 操縱實現(xiàn)的。我們可以發(fā)現(xiàn)，在任意的前端項目中的 package.json 里的 里的很多工具包是基于 AST 解析操縱實現(xiàn)的，例如 JS 的轉(zhuǎn)譯，代碼壓縮，ESLint 等等，我們可以閱讀這些工具的源碼來進(jìn)一步的學(xué)習(xí)。
將源碼轉(zhuǎn)為 AST 描述的基本過程
如圖所示，將源代碼轉(zhuǎn)為 AST 描述的基本過程包括詞法分析和句法分析兩個階段:
最后，我們可以獲得源代碼的結(jié)構(gòu)化描述樹。有很多工具可以幫我們來實現(xiàn)這個過程，例如 babel -- 它可以幫助我們輕松的實現(xiàn)代碼到 ast，ast 遍歷修改，ast 到代碼的過程。
基于 AST 實現(xiàn)搭建的基本過程
我們來看一下使用 ast 實現(xiàn)搭建邏輯的基本過程。
看一個具體的例子：通過修改 AST，在 Page 中插入一個 Section 節(jié)點。
基于 AST 實現(xiàn)搭建邏輯
中間這段代碼，展示了核心的邏輯，通過遍歷整個 AST 中的所有 節(jié)點，找到第一個 Page 元素，然后在 Page 元素的 里插入新的 Section 節(jié)點。這只是一段演示代碼，具體的過程比這個要復(fù)雜的多，因為有很多的邊際邏輯要處理。最后，我們可以將 ast 重新生成為代碼，得到我們想要的結(jié)果。
Tango 的數(shù)據(jù)變更流程設(shè)計
了解了基本的實現(xiàn)原理后，我們來看一下低代碼引擎的數(shù)據(jù)變更流程設(shè)計。
數(shù)據(jù)變更流程設(shè)計
首先是引擎初始化。源碼文件會被引擎內(nèi)核解析進(jìn)行狀態(tài)初始化。接下來，對于用戶的操作，會觸發(fā)瀏覽器事件，引擎接收到相應(yīng)的事件，觸發(fā)內(nèi)核中的狀態(tài)變更，更新 AST。
然后，內(nèi)核會基于新的 AST 的同步生成代碼，由引擎將代碼同步給渲染沙箱。渲染沙箱感知到代碼變化后，會觸發(fā)頁面重新渲染，也就是沙箱的 HMR 過程。
基于源碼的在線渲染沙箱設(shè)計
接下來，我們需要考慮的是如何在瀏覽器中執(zhí)行 源碼工程？有很多方案可以選擇，我們選擇的方案是 ，它是由 開源的可以在瀏覽器中實時運行 項目的的工具庫。在具體實現(xiàn)上，我們對 進(jìn)行了一系列的改造，以滿足低代碼生產(chǎn)環(huán)境的需要。
基于 的在線渲染沙箱方案如下圖圖所示。
Tango 沙箱設(shè)計
在實現(xiàn)上，主要包括 3 個部分，分別是：
從沙箱執(zhí)行流程來看，首先 Sandbox 組件將項目的源代碼和 compile 指令使用 傳遞給在線 Bundler，在線 Bundler 在接收到 compile 指令后，bundler 會從 打包服務(wù)加載項目的 npm 依賴，然后編譯和執(zhí)行代碼，最后發(fā)送 success 消息給低代碼沙箱。
Tango 低代碼引擎的構(gòu)成
結(jié)合上面的介紹，在構(gòu)成上，Tango 低代碼引擎主要包括 3 個核心組成部分，分別是：
引擎構(gòu)成
借助于 Tango 低代碼引擎，我們可以為開發(fā)者提供全新的在線開發(fā)體驗，支持源碼級的自定義能力。對可視化開發(fā)而言，可視化配置會觸發(fā) AST 的修改，進(jìn)而會重新生成對應(yīng)的源碼。而對源碼開發(fā)而言，修改源碼后會同步更新 AST。
開源版本發(fā)行計劃
目前我們已經(jīng)完成了 Tango 核心實現(xiàn)的基本代碼庫的開源，包括核心引擎內(nèi)核、沙箱、設(shè)置器、應(yīng)用框架、物料協(xié)議等等。預(yù)計在 10 月底，我們將會發(fā)布 Tango 的社區(qū) RC 版本，該版本將會獲得更加穩(wěn)定的 API 和更加完善的文檔。
正式版本 我們將在 2023 年 Q4 結(jié)束前 發(fā)布，屆時我們會進(jìn)一步完善我們的開源社區(qū)運營機制。
在云音樂，我們還在構(gòu)建更加完善的面向生產(chǎn)場景的低代碼研發(fā)體系，包括 RN 跨端應(yīng)用的低代碼研發(fā)，后端邏輯和服務(wù)的低代碼編排能力，以及基于低代碼的前后端研發(fā)工具鏈等等。隨著相關(guān)能力的穩(wěn)定和時間的成熟，后續(xù)我們將會持續(xù)向社區(qū)開源更多的內(nèi)部實踐。
關(guān)于本文
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
