色999日韩自偷自拍美女,国产激情久久,av在线电影观看

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

Tango 低代碼引擎使用演示

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

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

Github 倉庫：https://github.com/NetEase/tango
發行歷史：https://github.com/NetEase/tango/releases
文檔站點：https://netease.github.io/tango/

01 低代碼可視化搭建之殤

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

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

02 傳統低代碼方案的問題

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

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

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

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

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

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

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

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

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

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

04 Tango 低代碼引擎實現原理

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

Tango 低代碼引擎實現分析

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

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

?大量的工具基于 AST 實現

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

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

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

詞法分析：借助詞法分析器將代碼字符串分割為標記列表。
句法分析：借助句法分析器將標記數據轉為 AST 描述。

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

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

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

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

基于 AST 實現搭建邏輯

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

06 Tango 的數據變更流程設計

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

數據變更流程設計

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

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

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

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

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

Tango 沙箱設計

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

低代碼沙箱：它是一個開箱即用的前端組件，只需要傳入源代碼和構建配置信息即可完成前端項目的構建和執行。
在線 Bundler：是低代碼沙箱的核心，用來在瀏覽器上構建和執行源代碼，本質上是一個在瀏覽器端運行的簡化版 webpack。
打包服務：是一個 node 服務，用來對 npm 包執行預構建和資源合并。

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