中後臺領域低代碼搭建設計與實踐

前言

=====

2021 年 5 月 22 日,哈囉技術沙龍 - 大前端的探索與實踐,在杭州成功舉辦。
以下是由 @杜詩晨(廟爺)分享的主題

什麼是低代碼搭建

通過提供一種可視化的應用開發環境,降低或去除對原生代碼編寫的需求量快速構建應用程序。

傳統開發交付一個產品的流程,首先產品輸出 prd,然後設計 ui 設計進行設計,設計完成給到前端,前端再去開發。如果是個新項目可能還要這種配置各種複雜環境。同時後端也在開發,然後聯調、測試。其實現在大部分的公司都是這種開發流程。那這種缺點就很明顯,涉及到的人非常多,開發週期也變得非常長。

低代碼搭建是一個什麼樣的流程?如果是一個成熟的配置搭建平臺,只需要提供一個配置平臺,開發人員不論是剛畢業的大學生或者是前端小白,甚至可能是一個後端開發,都可以通過這個配置平臺搭建,快速生成網頁。

關於低代碼的市場規模和衍生的歷史大家可以從下圖中瞭解一下,這裏提供兩份報告作爲延伸學習:海比研究報告 | 艾瑞諮詢

概念衍生歷史

低代碼這個概念其實很早就有了,80 年代的時候提出了第四代編程語言,這個第四代是什麼意思呢,第一代是機器語言,第二代彙編語言,第三代高級語言。前三代都是操作語言,需要編程指出怎麼做,一步一步的寫運行步驟,這樣是有學習成本的,並且項目開發週期長,出於商業需要第四代語言被軟件廠商提出,在一定程度上只需要說明做什麼,有什麼目的,不需要寫出怎麼做的過程。

2000 年 vpl 被提出,可視化編程語言,意思就是用戶用過圖形化操作程序元素而不是通過文本制定來創建程序,基於流的概念比如虛幻引擎,還有一些運用在 3D 編程,音樂合成,信號處理,物聯網嵌入式等等領域。

2014 年知名諮詢公司提出了低代碼 / 零代碼的概念,在這之前國外有很多低代碼產品出現並且商業化

2016 年,國內相繼發佈這些低代碼的平臺。國內知名的像阿里百度騰訊,他們都有這種搭建平臺。

在今年(2021),整個中國市場已經形成了完整的低代碼無代碼的生態體系。就比如說像現在這種 aPass 平臺或者是 Sass 平臺之類的,平臺會包含的低代碼去快速搭建這種應用。

市場規模

投資界似乎也發現了這種趨勢,全球規模在去年的時候已經達到了八十四億美元。預計今年超過百億。23 年超過 200 億。

比如說二月份的時候,就有一家創業公司,他們融了大概上億美元,估值也有幾十億。所以說這一塊從全球的低代碼的市場規模來說,低代碼還是非常有潛力的。

搭建分類

現在市場上基本上分爲兩類搭建類型,一類是營銷類搭建 no code,一類是通用類搭建,就是我們所說的 low code 和 pro code。營銷類 no node 無需編碼,直接生成營銷活動,前端資源緊缺的時候,後端開發人員也可通過 low code 可搭建中臺領域的頁面,前端這邊爲了避免各種工程環境,減低門檻也可通過 pro code 的形式來去搭建。

面向人羣

那麼這麼分類我認爲是面向的人羣不同,一個特別通用的搭建平臺,可能複雜度就上升了很高,所以說我們要做這個低代碼搭建平臺的時候,一定要想好我們面向的人羣是什麼?
營銷類 no node 無需編碼,直接生成營銷活動,前端資源緊缺的時候,後端開發人員也可通過 low code 可搭建中臺領域的頁面,前端這邊爲了避免各種工程環境,減低門檻也可通過 pro code 的形式來去搭建

中後臺領域痛點

首先交互不統一,比如說有一些很相似的頁面,但是由不同的產品或者設計師出的圖。
那實際上他們想要達到的效果是很相似的。但是交互不同,不同的前端開發出來的效果也不一樣。不同職級的開發可維護性就會差一點,代碼可能會複雜一些,會出現不同的編碼風格。中臺還有一個痛點的就是中臺的系統非常多,業務重,人員有缺口。我之前負責的那個域,前後端比例當時是有 1:7 的樣子,借人也好,招人也好,都是很難去補上這個缺口。

設定目標

所以我們設定了三個目標,一個是提效降本。我們怎麼樣去把這一塊的研發效能提上來。
第二個目標是部分生產力可轉移後端,讓後端也有能力輸出前端頁面
第三點就是抽象中後臺的系統基礎組件。前端在組件化的過程中逐漸沉澱,複用這些能力,賦能到搭建平臺中。

如何做?波塞冬建站平臺

有了這些目標,促使我們做了波塞冬建站平臺,通過可視化操作 + 部分編碼 (或者不編碼) 生成中後臺系統。讓前端業務開發變成組件開發,逐漸沉澱可複用組件,讓簡單業務少編碼甚至不編碼。爲前端增效,爲後端賦能。

使用數據

這個平臺上線之後,線上的有 117 個頁面在運行,共發佈了 870 次,其中已經設計了 6 個團隊,提升的人效也很顯著,假設我們平均開發一個增量頁面需要 3 人日,用波塞冬只需要一人日,老頁面迭代修改配置也只需要 0.5d

平臺流程

給大家講解下平臺原理,比如說一個創建者,他首先要去波塞冬平臺創建頁面,生成一份 schema ,這份 schema 被波塞冬後端保存在 SQL 中,我們的用戶,也就是頁面訪問者,通過業務平臺網站獲取頁面,這裏邊相當於業務平臺網站有個 sdk,他直接取拉波塞冬保存的 schema,sdk 通過 schema 渲染組件 和 業務數據的接口,這樣一個頁面就展示出來了
那我們這邊也有很多組件貢獻者,如果創建者不滿足需求的,貢獻者這邊去維護組件這樣就能貢獻生態

平臺架構

整個平臺的架構是這樣的:
底層我們是拿 vue 搭建,不過這塊技術選型哪個框架都可以,只要定義好 schema,react + antd 也能搞
組件這一塊就是根據固定的 schema 進行封裝,未來可能還有一些業務組件接入
渲染這一層主要是提供給開發者用來豐富組件庫或一些其他業務場景
平臺能力也就是我們要提供的這個界面,主要是一些用戶可以操作的功能,這些功能想一下入手還有一點小成本,我們提供了文檔,視頻等,可以做到邊接入邊開發,還提供了一些實例供配置方借鑑

接入方式

我們的解析方式有三種,一種是 sdk 直接引入,這樣方便升級,也方便二次開發,sdk 的引入方式非常靈活。
還有一種是 ifame 引入,這樣只需引入一個標籤即可,剩下的都在波塞冬裏配置。
一鍵建站的方式,相當於站點維度,沒有項目的概念,域名菜單權限頁面,都是在波塞冬裏完成的,不需要本地環境,這種比較適合後端開發人員

渲染引擎

展示一下 sdk 的引用,我們可能會在不同開發環境中引入,這裏提供環境變量的配置

一鍵建站

剛纔有介紹我們有三種引入方式,給大家看下第三種一鍵建站是怎麼做的,我們加強了應用管理,一個應用就是一個站點,菜單,域名都是在平臺裏申請,這樣用戶通過頁面訪問就是配置的界面,完全不需要再去申請工程,這裏我們用了代理的方式進行一個轉發,轉發的目標是一個基座,類似微前端的那個基座,只不過這個基座我們通過當前域名拉取配置,最終提供給用戶。

頁面佈局

帶大家看一下創建頁面的佈局,最左側是組件區,目前是基礎組件,這裏未來可能會做組件分類,把業務組件和自定義組件也接進來,中間是佈局設計區,比如說列表頁有固定三個區域,篩選項,中部功能區,列表,表單頁不做限制,右側爲配置區,可以配置綁定字段和文案還有一些額外屬性,組件的交互,像 select 這種 option 是接口調用的數據,還可以配置遠程接口

模型設計(JSON SCHEMA)

我們創建頁面後,會生成一份 schema ,什麼是 json schema ,簡單介紹一下,json shema 是 json 的一種約束,用來定義 json 的數據結構和驗證格式,我們在這裏用來保證數據的一致性

每個頁面有一個主體,用來描述版本和一些原信息,body 就是他的內容

JSON SCHEMA

我們目前頁面分爲兩種,一種就是列表頁面,一種是 form 頁,但是他們的描述協議都是一樣的,那基本的組件描述我們定義好了,這樣其實簡單的需求就能實現了,但是前端避免不了交互這一層,比如說一個選擇框,當我選擇了 A,B 會觸發一個事件,並且 B 還要拿到 A 所攜帶的入參信息

操作事件

我們這邊做了一個操作事件功能,我們只需要把組件的 ref 設置好,操作事件這一塊就可以定義他的出參入參,方便交互

數據中心

接口配置這裏,比如說一個 select 從遠程接口獲取到一個枚舉,就可以存下來,給其他組件消費

自定義插槽

比如說平臺目前有不支持的組件或交互,還沒有維護在平臺裏的,這裏可以利用 vue 的 slot 進行二次開發,只需要拖入一個 slot

自定義插槽 - 編碼

slot 裏的組件可以獲取到配置裏的 ref 和想要拿到的 scope,做任何你想做的事兒

穩定性

我們做低代碼平臺,歸根到底是一個渲染引擎渲染一組 schema ,那麼穩定性也得考慮,我們每次修改線上配置,可能心情如圖,那我發佈時怎麼保證準確性,傳統開發我們會有一個 review 的過程,我們就把這個過程也搬上來了

SCHEMA DIFF & 版本對比

schema diff 每次發佈時,需要選擇版本來確認我改了什麼,大大降低了風險。
發佈時也要進行二次確認

未來規劃

AUTO-CODE

我們目前的能力,在版本對比這一塊希望能做到 merge,並且提供可視化,也就是說你不一定非要看 schema 這種東西,組件這裏繼續豐富,能承載更多的需求,low-code 目標就做到 no-code 讓非開發人員直接生成頁面,不需要寫一點代碼,最終這個生產力就可以轉移,終極目標就是做成 auto-code ,利用機器學習識別設計圖,直接生成網站,抹去大部分配置,auto-code 目前業界有很多公司已經實現,我們也在慢慢摸索。

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/5HqEaCrfr30dVIg4HiarkQ