引言

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

顯然這樣的擔(dān)憂是合理的，因?yàn)榇蠹叶疾幌Ｍ趯?shí)現(xiàn)特定功能的時(shí)候才發(fā)現(xiàn)低代碼平臺(tái)無(wú)法支持，也不希望從某個(gè)廠商的低代碼平臺(tái)遷出時(shí)發(fā)現(xiàn)應(yīng)用需要徹底的重寫。

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

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

設(shè)計(jì)原則

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

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

1. 明確不同角色的職責(zé)

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

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

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

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

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

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

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

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

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

3. 各個(gè)層面的可擴(kuò)展性

Sunmao 包含三個(gè)層級(jí)，分別是核心規(guī)范、運(yùn)行時(shí)以及編輯器。

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

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

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

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

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

因?yàn)槲覀冋J(rèn)為現(xiàn)如今的后端技術(shù)日新月異，一個(gè) UI 低代碼方案可以更靈活的與各類后端服務(wù)對(duì)接，這樣才能夠?yàn)槭褂谜邘?lái)最大的靈活性。

Sunmao 的工作原理

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

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

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

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

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

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

組件間交互

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

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

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

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

布局與樣式

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

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

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

將一個(gè)組件放入另一個(gè)組件的插槽中：

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

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

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

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

類型安全

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

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

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

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

許多組件都需要獲取數(shù)據(jù)、事件節(jié)流等通用能力，我們?cè)谏衔闹卸啻翁岬降?trait 就是為這一需求而設(shè)計(jì)的。

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

可擴(kuò)展的可視化編輯器

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

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

保持開(kāi)放

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

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

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