引言

盡管現(xiàn)在越來越多的人開始對低代碼開發(fā)感興趣，但已有低代碼方案的一些局限性仍然讓大家有所保留。其中最常見的擔憂莫過于低代碼缺乏靈活性以及容易被廠商鎖定。

顯然這樣的擔憂是合理的，因為大家都不希望在實現(xiàn)特定功能的時候才發(fā)現(xiàn)低代碼平臺無法支持，也不希望從某個廠商的低代碼平臺遷出時發(fā)現(xiàn)應(yīng)用需要徹底的重寫。

一些已有產(chǎn)品機智地將低代碼的使用場景限定在了特定領(lǐng)域中，例如內(nèi)部工具或者是官網(wǎng)，因為在這些場景中用戶更關(guān)心開發(fā)效率而不是靈活性與定制能力。但當我們希望使用低代碼在更多場景中提升效率時，這類產(chǎn)品就不能滿足需求了。

因此，我們開始開發(fā) Sunmao 這個項目，在開源開發(fā)的基礎(chǔ)之上，我們專注于這個低代碼 UI 框架的拓展性。

設(shè)計原則

Sunmao 的命名來源于中文榫卯，它是一種從古至今一直被使用的木結(jié)構(gòu)技術(shù)，以精巧、穩(wěn)固著稱。我們非常喜歡這個名字，因為榫卯結(jié)構(gòu)與我們將各類構(gòu)建單元組合成一個穩(wěn)固的應(yīng)用的方式十分相似。

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

1. 明確不同角色的職責

在開發(fā) Sunmao 的過程中，我們首先將使用者劃分為了組件開發(fā)者與應(yīng)用構(gòu)建者兩個角色，角色的劃分是我們后續(xù)設(shè)計中最重要的概念。

組件開發(fā)者應(yīng)該更加關(guān)注代碼質(zhì)量、性能以及用戶體驗等部分，并以此為標準創(chuàng)造出可復(fù)用的組件。當組件開發(fā)者以他們趁手的方式開發(fā)了一個新的組件，他們就可以將該組件封裝為一個 Sunmao 組件并注冊到組件庫中。

應(yīng)用構(gòu)建者則選用已有的組件，并實現(xiàn)應(yīng)用相關(guān)的業(yè)務(wù)邏輯。結(jié)合組件與 Sunmao 的平臺特性，應(yīng)用構(gòu)建者可以更高效地完成這一工作。

之所以將角色進行劃分，是因為每時每刻都有應(yīng)用被開發(fā)，但組件迭代的頻率則低得多。所以在 Sunmao 的幫助下，用戶可以將組件開發(fā)的任務(wù)交給少量高級前端工程師完成，而將應(yīng)用搭建的工作交由初級前端工程師、后端工程師、甚至是無代碼開發(fā)經(jīng)驗的人完成。

2. 發(fā)揮代碼的威力，而不是限制

如之前所說，Sunmao 并不將用戶局限于只能使用按鈕、輸入框等基礎(chǔ)組件開發(fā)應(yīng)用，而是可以由組件開發(fā)者注冊各類復(fù)雜、適用于特定領(lǐng)域的組件，以此覆蓋應(yīng)用需求以及延續(xù)已有的視覺設(shè)計體系。

在開發(fā) Sunmao 的過程中，我們也投入了大量的精力來保證我們的實現(xiàn)不會給用戶的應(yīng)用帶來限制。

舉個例子來說，許多低代碼工具的可視化編輯器都提供了懸浮在組件上時進行高亮的效果。相當一部分編輯器在實現(xiàn)這個功能時都是通過在每個組件之外包裹一個 <div> 元素，并對該元素進行事件的監(jiān)聽與高亮樣式的修改。但這樣的實現(xiàn)方式有諸多弊端，例如增加了 DOM 節(jié)點數(shù)量、使組件無法被配置 inline 樣式以及增加了隱式的嵌套關(guān)系，這些對于 Sunmao 來說都是不可接受的。

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

3. 各個層面的可擴展性

Sunmao 包含三個層級，分別是核心規(guī)范、運行時以及編輯器。

組件與應(yīng)用的 schema 都在核心規(guī)范中進行定義。除去常規(guī)的字段之外，用戶還可以通過添加注解（annotations）的方式注入額外信息，并在運行時或編輯器中使用。

我們多次提到的組件本身也是可擴展的，組件開發(fā)者為組件可以定義各類參數(shù)以及與其他組件交互的行為。在下文中我們還會介紹另一種在組件間共享擴展能力的方式：trait。

在可視化的編輯器中，用戶也可以配置每個組件參數(shù)在編輯器中的展示方式與輸入方式。

4. 專注而不是發(fā)散

我們沒有選擇開發(fā)一個全棧的低代碼解決方案，而是聚焦于 UI 部分，并且目前僅限 Web UI。

因為我們認為現(xiàn)如今的后端技術(shù)日新月異，一個 UI 低代碼方案可以更靈活的與各類后端服務(wù)對接，這樣才能夠為使用者帶來最大的靈活性。

Sunmao 的工作原理

Web UI 開發(fā)已經(jīng)相當成熟，所以 Sunmao 只是在此基礎(chǔ)之上增加少量低代碼場景中必備的能力，即：

• 響應(yīng)式
• 事件與方法
• 插槽與樣式插槽
• 類型
• trait
• 可視化編輯器

響應(yīng)最新的狀態(tài)

響應(yīng)式指的是當應(yīng)用狀態(tài)發(fā)生變化時，所有依賴該狀態(tài)的 UI 都自動重寫渲染。Sunmao 實現(xiàn)了一個高性能的響應(yīng)式狀態(tài)中心，所有組件都可以將自己的狀態(tài)同步至其中以及從中訪問其他組件的狀態(tài)。

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

按鈕就能夠響應(yīng)輸入框的變化實時渲染！

組件間交互

現(xiàn)代 UI 框架往往強調(diào)狀態(tài)驅(qū)動與聲明式的概念，但在低代碼場景中過份追求這兩點可能適得其反。

例如當你希望實現(xiàn)點擊一個主題按鈕并切換至暗色主題的功能，最符合直覺的方式就是按鈕提供一個 onClick 事件并觸發(fā)主題組件的 changeTheme 方法。

在 Sunmao 中，你可以在組件的規(guī)范中聲明它會對外發(fā)送的事件以及可以供外部調(diào)用的一組命令式方法。在此基礎(chǔ)上，任意組件都可以通過事件與方法和其他組件進行交互。

以下是一個監(jiān)聽事件并執(zhí)行方法的示例：

布局與樣式

當我們開發(fā)應(yīng)用時，最終通常都會將組件組合成一個嵌套結(jié)構(gòu)，例如瀏覽器中的 DOM 樹。

在 Sunmao 的應(yīng)用 schema 中，我們采用的是一個扁平的數(shù)組結(jié)構(gòu)記錄所有的組件信息，這樣使得修改與存儲的時候可以更加高效。也因此，我們引入了插槽的概念來表示嵌套結(jié)構(gòu)。

通過以下方式可以實現(xiàn)并聲明一個組件有哪些插槽：

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

另一個有極大想象空間的功能是自定義組件的樣式。如果組件開發(fā)者能夠?qū)⒍x組件樣式的能力對外暴露，組件的可復(fù)用性就將大大提升。

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

通過以下方式可以實現(xiàn)并聲明一個組件有哪些樣式插槽：

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

類型安全

在低代碼場景中，類型安全可以極大地提升開發(fā)體驗與應(yīng)用搭建速度。所以在 Sunmao 中我們重度使用 typescript 與 JSON schema 來實現(xiàn)極佳的類型系統(tǒng)。

如果組件開發(fā)者使用 typescript 進行開發(fā)，Sunmao 能夠從組件的 JSON schema 定義中推斷 typescript 的類型，從而幫助組件開發(fā)者編寫類型安全的代碼。

我們的類型系統(tǒng)也會在搭建應(yīng)用的過程中提供自動補全與校驗等功能。

在組件間復(fù)用代碼

許多組件都需要獲取數(shù)據(jù)、事件節(jié)流等通用能力，我們在上文中多次提到的 trait 就是為這一需求而設(shè)計的。

試想一下，如果每個組件都自行實現(xiàn) dataUrl（獲取數(shù)據(jù)的 URL）、hidden（是否可見）、handlers（事件回調(diào)） 等屬性，顯然是十分冗余的。對于這類需求，trait 系統(tǒng)提供了很好的抽象，幫助開發(fā)者將通用的能力以 trait 形式實現(xiàn)并復(fù)用于多個組件，從而保證組件實現(xiàn)的簡潔。

可擴展的可視化編輯器

Sunmao 的可視化編輯器讀取所有組件的規(guī)范并基于其定義的 JSON schema 自動生成表單。

如果一部分表單需要定制，組件開發(fā)者可以實現(xiàn)自定義的編輯器 widget。關(guān)于擴展可視化編輯器的設(shè)計可以進一步閱讀這一設(shè)計文檔。

保持開放

從第一天起，Sunmao 就以開源的方式進行開發(fā)。但當我們說到“開放”時，我們并不僅僅局限于以 Apache-2.0 協(xié)議開放所有的源代碼。

盡管 Sunmao 是從 SmartX 內(nèi)部發(fā)起的項目，我們在開發(fā)過程中還是選擇將所有的提案、討論與設(shè)計決策放在公開的 Github 倉庫中進行，而不是其他的內(nèi)部頻道。因為我們相信“保持開放”是 Sunmao 發(fā)展的基石，并且我們也視開發(fā)者使用 Sunmao 構(gòu)建自己的低代碼方案為最大的榮耀。

以上就是JS前端可擴展的低代碼UI框架Sunmao使用詳解的詳細內(nèi)容，更多關(guān)于JS前端UI框架Sunmao的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論