JS前端可延伸的低程式碼UI框架Sunmao使用詳解

2022-07-22 10:00:45

引言

儘管現在越來越多的人開始對低程式碼開發感興趣，但已有低程式碼方案的一些侷限性仍然讓大家有所保留。其中最常見的擔憂莫過於低程式碼缺乏靈活性以及容易被廠商鎖定。

顯然這樣的擔憂是合理的，因為大家都不希望在實現特定功能的時候才發現低程式碼平臺無法支援，也不希望從某個廠商的低程式碼平臺遷出時發現應用需要徹底的重寫。

一些已有產品機智地將低程式碼的使用場景限定在了特定領域中，例如內部工具或者是官網，因為在這些場景中使用者更關心開發效率而不是靈活性與客製化能力。但當我們希望使用低程式碼在更多場景中提升效率時，這類產品就不能滿足需求了。

因此，我們開始開發 Sunmao 這個專案，在開源開發的基礎之上，我們專注於這個低程式碼 UI 框架的拓展性。

設計原則

Sunmao 的命名來源於中文榫卯，它是一種從古至今一直被使用的木結構技術，以精巧、穩固著稱。我們非常喜歡這個名字，因為榫卯結構與我們將各類構建單元組合成一個穩固的應用的方式十分相似。

在開發的過程中，我們始終遵循以下設計原則，從而確保我們的抽象方式正確且一致。

1. 明確不同角色的職責

在開發 Sunmao 的過程中，我們首先將使用者劃分為了元件開發者與應用構建者兩個角色，角色的劃分是我們後續設計中最重要的概念。

元件開發者應該更加關注程式碼質量、效能以及使用者體驗等部分，並以此為標準創造出可複用的元件。當元件開發者以他們趁手的方式開發了一個新的元件，他們就可以將該元件封裝為一個 Sunmao 元件並註冊到元件庫中。

應用構建者則選用已有的元件，並實現應用相關的業務邏輯。結合元件與 Sunmao 的平臺特性，應用構建者可以更高效地完成這一工作。

之所以將角色進行劃分，是因為每時每刻都有應用被開發，但元件迭代的頻率則低得多。所以在 Sunmao 的幫助下，使用者可以將元件開發的任務交給少量高階前端工程師完成，而將應用搭建的工作交由初級前端工程師、後端工程師、甚至是無程式碼開發經驗的人完成。

2. 發揮程式碼的威力，而不是限制

如之前所說，Sunmao 並不將使用者侷限於只能使用按鈕、輸入框等基礎元件開發應用，而是可以由元件開發者註冊各類複雜、適用於特定領域的元件，以此覆蓋應用需求以及延續已有的視覺設計體系。

在開發 Sunmao 的過程中，我們也投入了大量的精力來保證我們的實現不會給使用者的應用帶來限制。

舉個例子來說，許多低程式碼工具的視覺化編輯器都提供了懸浮在元件上時進行高亮的效果。相當一部分編輯器在實現這個功能時都是通過在每個元件之外包裹一個 <div> 元素，並對該元素進行事件的監聽與高亮樣式的修改。但這樣的實現方式有諸多弊端，例如增加了 DOM 節點數量、使元件無法被設定 inline 樣式以及增加了隱式的巢狀關係，這些對於 Sunmao 來說都是不可接受的。

儘管我們花費了更多時間才找到一個避免以上所有缺陷的實現方式，但我們相信這樣的付出是值得的。因為只有這樣，我們才能做到發揮程式碼的威力，贏得開發者的認可。

3. 各個層面的可延伸性

Sunmao 包含三個層級，分別是核心規範、執行時以及編輯器。

元件與應用的 schema 都在核心規範中進行定義。除去常規的欄位之外，使用者還可以通過新增註解（annotations）的方式注入額外資訊，並在執行時或編輯器中使用。

我們多次提到的元件本身也是可延伸的，元件開發者為元件可以定義各類引數以及與其他元件互動的行為。在下文中我們還會介紹另一種在元件間共用擴充套件能力的方式：trait。

在視覺化的編輯器中，使用者也可以設定每個元件引數在編輯器中的展示方式與輸入方式。

4. 專注而不是發散

我們沒有選擇開發一個全棧的低程式碼解決方案，而是聚焦於 UI 部分，並且目前僅限 Web UI。

因為我們認為現如今的後端技術日新月異，一個 UI 低程式碼方案可以更靈活的與各類後端服務對接，這樣才能夠為使用者帶來最大的靈活性。

Sunmao 的工作原理

Web UI 開發已經相當成熟，所以 Sunmao 只是在此基礎之上增加少量低程式碼場景中必備的能力，即：

響應式
事件與方法
插槽與樣式插槽
型別
trait
視覺化編輯器

響應最新的狀態

響應式指的是當應用狀態發生變化時，所有依賴該狀態的 UI 都自動重寫渲染。Sunmao 實現了一個高效能的響應式狀態中心，所有元件都可以將自己的狀態同步至其中以及從中存取其他元件的狀態。

例如，當我們想讓 demo 按鈕渲染 demo 輸入框中的值，只需要填寫 {{ input.value.length }}：

按鈕就能夠響應輸入框的變化實時渲染！

元件間互動

現代 UI 框架往往強調狀態驅動與宣告式的概念，但在低程式碼場景中過份追求這兩點可能適得其反。

例如當你希望實現點選一個主題按鈕並切換至暗色主題的功能，最符合直覺的方式就是按鈕提供一個 onClick 事件並觸發主題元件的 changeTheme 方法。

在 Sunmao 中，你可以在元件的規範中宣告它會對外傳送的事件以及可以供外部呼叫的一組命令式方法。在此基礎上，任意元件都可以通過事件與方法和其他元件進行互動。

以下是一個監聽事件並執行方法的範例：

佈局與樣式

當我們開發應用時，最終通常都會將元件組合成一個巢狀結構，例如瀏覽器中的 DOM 樹。

在 Sunmao 的應用 schema 中，我們採用的是一個扁平的陣列結構記錄所有的元件資訊，這樣使得修改與儲存的時候可以更加高效。也因此，我們引入了插槽的概念來表示巢狀結構。

通過以下方式可以實現並宣告一個元件有哪些插槽：

將一個元件放入另一個元件的插槽中：

另一個有極大想象空間的功能是自定義元件的樣式。如果元件開發者能夠將定義元件樣式的能力對外暴露，元件的可複用性就將大大提升。

類似地，我們引入了樣式插槽的概念實現自定義樣式的功能。

通過以下方式可以實現並宣告一個元件有哪些樣式插槽：

在樣式插槽中自定義樣式:

型別安全

在低程式碼場景中，型別安全可以極大地提升開發體驗與應用搭建速度。所以在 Sunmao 中我們重度使用 typescript 與 JSON schema 來實現極佳的型別系統。

如果元件開發者使用 typescript 進行開發，Sunmao 能夠從元件的 JSON schema 定義中推斷 typescript 的型別，從而幫助元件開發者編寫型別安全的程式碼。

我們的型別系統也會在搭建應用的過程中提供自動補全與校驗等功能。

在元件間複用程式碼

許多元件都需要獲取資料、事件節流等通用能力，我們在上文中多次提到的 trait 就是為這一需求而設計的。

試想一下，如果每個元件都自行實現 dataUrl（獲取資料的 URL）、hidden（是否可見）、handlers（事件回撥） 等屬性，顯然是十分冗餘的。對於這類需求，trait 系統提供了很好的抽象，幫助開發者將通用的能力以 trait 形式實現並複用於多個元件，從而保證元件實現的簡潔。