背景

UI2CODE的目標是通過分析視覺稿得到對應的代碼，讓AI提高開發效率。然而過去靜態化頁面的產出，不能得到業務場景的需求。針對于此，我們以UI2CODE自動化開發為基底，結合Redux的消息機制，將自動化生成的維度提升到頁面的處理。

透過框架，可自動化生成頁面代碼，并且具有數據驅動展示、消息派送等動態性能力。期望在復雜的業務場景下，簡化開發的工作。并且在使用一致化的架構下，避免未來業務代碼耦合嚴重，使代碼分工明確，容易修改維護。

進化后的UI2CODE？

開發者可以透過Intellij Plugin分析視覺稿后會生成對應的視圖代碼，以及和此頁面框架結合的能力。

在整體開發的定位上我們的野心是，提供一套可擴充的頁面消息框架，并且自動生成大部分的UI代碼。目標帶來以下的好處：

快速建構新應用，框架將完成大部分的事，業務開發同學只要專注于業務代碼

讓開發人員的進入門檻降低，在我們落地的經驗中，后端同學只要有基本的概念，無需花費太多經歷，可直接上手幫忙寫代碼

讓頁面的架構統一化，讓頁面的開發有統一的規則，也方便后續的維護

提供通用的組件庫，可重復利用

核心設計思路

我們在設計上主要參考于MVP、CLEAN、VIPER以及FISH_REDUX等框架。目的在實踐高聚合低耦合的前提下，分拆為視圖組裝層、視圖展示層、數據層、事件交互層。層層分離職責，不互相干擾，又可互相通訊。

分層拆開的好處為容易維護，并且可以單元測試"業務展示"以及"業務邏輯"，框架上清晰，容易有一個統一的遵循規則，達到簡單編寫重復可利用。

UI2CODE頁面框架的設計概念為，主要分為Page、Card、Reaction三大元素。在上層的Page負責組裝頁面，制定頁面的風格。Card則為可重復利用的視圖展示元素。Reaction則為事件反應的監聽。

在整個頁面框架上，可以透過UI2CODE Plugin分析自動化生成業務UI，產生出Page、Card、Card(DataModel)。僅需修改Card上額外的業務展示，以及撰寫Reaction中的業務邏輯。

具體實現架構

在介紹框架組件前，先理解UI2CODE的基本組成頁面目錄如下：

以Page為單位，頁面本體demo_page為其他頁面路由調用的起點，透過設置Config.dart決定內部含的卡片列表以及事件處理列表，組合出Card以及Reaction的關聯。

其詳細的架構關系如下：

Page

Page為框架基礎的單位，為單一頁面，負責決定視圖的組裝以及頁面的樣式(Template)。

在Page之內可包含若干的Card以及Reaction，分別為視圖的展示以及視圖的事件處理。可以很清晰地將業務場景做分割成小模塊，不互相影響。

Abstract class PageStatelessWidget extends StatelessWidget

implements Lifecycle

• 可由UI2CODE Plugin自動化產生

• 框架統一分發管理頁面生命周期Lifecycle
• 透過設定Template指定頁面要呈現的樣版，或者修改如背景等屬性
• 透過設定Config指定這個頁面含有的Cards和Reactions
• 透過設定PageState可添加額外的數據

Page Template

Template樣板為頁面的抽象化，在整體頁面上分為多個樣板可選擇。并且支持設置AppBar(非必選)、Header(非必選)、Body、Stack(非必選)等子樣板。

樣板可比喻為頁面的容器，目前支持以下樣板，并且可擴充：

PageTemplate，通用頁面容器，并支持NestedScrollView的Silver Header滾動(若需要)

PageBottomNavigatorTemplate，含有底部導航的容器，如首頁

PageSwitchTabTemplate，含有分頁Tab功能的容器

各個子樣板也有相對應的Template可選擇，如在Body內的樣板功能為決定內部Cards排列的方式。舉例來說，BodyListViewTemplate則是列表展示。

使用Template最大的好處為減少開發工作，可直接使用封裝后的接口。并且頁面內的所有樣板將共用消息機制，可以互相傳遞消息，如Body內部的卡片很容易發送消息給AppBar等。這是框架上的有力之處。

Page Config

Config決定頁面的組裝，包含了元件有哪些，以及事件處理反射的類綁定。

Extends PageConfig

• 可由UI2CODE Plugin自動化產生

• 透過設定cards注冊這個頁面所載入的卡片
• 透過設定actions注冊這個頁面所響應的類，支持卡片事件以及頁面事件
• 支持額外設置AppBar、Header、Stack等組件(非必須)

如何綁定，舉例來說：

void actionConfig(List< List < Function>> actions) { //卡片Card8575, 響應事件的類為Card8575Reaction actions.add(< Function>[() => Card8575, () => new Card8575Reaction()]);

}

Card

Card代表基本的視圖展示，業務UI，其中包含了View widget以及DataModel數據?？蚣軆葧烧逥ata binding起來，由數據來驅動最終展示的呈現。達到如MVP中View和ViewModel的隔離效果。

Abstract class BaseCard<T extends DataModel> extends StatefulWidget

• 可由UI2CODE Plugin分析視覺稿產生

• 透過BaseCard<T extends DataModel>的標準化，指定數據DataModel綁定
• Card可以發出事件，不直接操控數據，而讓接收者響應

Reaction

Reaction代表著事件發生的響應，可以選擇是否處理事件。若選擇處理，可同步或異步修改對應的數據DataModel。

Abstract class CardReaction<S, D extends DataModel>

• init()為初始化事件，自動發出，可進行一些初始動作

• RegisterReactions()注冊感興趣的事件handler
• 可于handler上加上aysnc，指定為異步處理
• Reaction內依據事件修改DataModel，只要關注事件改變后的數據，本身不持有數據，視圖將會自動刷新

舉例來說：

?

//如發送rAssignPrice的事件 doAction(Card6736Event.rAssignPrice);

//接收rAssignPrice的事件, 并對數據做處理
@override
Map

?

Card6736Event.rAssignPrice: (PageItemBean state, CardAction action, Card6736DataModel data) {//修改數據欄位data.userName = "123";},

};
}

結合Redux

在頁面框架的背后，我們采用了Redux來進行封裝。

Redux是一套的數據管理的框架。所有的數據的儲存于Store的State內。當事件發生時，會發生不同的Action，根據事件響應不同的Reducer去改變State。若經過響應后State有所變化，則綁定的視圖會視需要做對應的刷新。

我們應用了Redux中等State、Action、Reducer、Store、Middleware的概念，將頁面賦予生命狀態，而頁面內的組件間可支持消息機制。Redux對剛入門的同學還是有一定的門檻所在，但在本框架的封裝下，基本上感覺不到Redux的存在。

消息機制

在UI2CODE消息框架下，頁面內的各個組件以及容器都可以彈性的進行消息傳遞。可以由Page、Card、Reaction等處任意的發送消息，達到(自身、兄弟間、子對父、父對子)的通知。

各種消息傳遞的路徑說明如下：

自身：Card發出的消息將由自身定義的Reaction處理

兄弟間：Reaction內可選擇轉發，可以指定轉發的對象為另外一張Card

父對子：可于Page內指定發送的Card

子對父: 若發出的消息在Card內無人處理，則會冒泡到Page層級處理

總結進化的UI2CODE

• 框架簡單，只需了解框架基本的元素，不需要會Redux就可以達到數據管理的效果。目前閑魚內部的新應用落地，所有的頁面均透過框架的機制來達到消息傳遞。而其中1/3頁面UI為透過自動化生成，減少了約一半的整體開發時間。
• 因為組件的分層解耦，維護時可以清晰看到頁面的組成及覆用代碼。并且在修改組件時，不影響到其他組件的作用。
• 事件可以在頁面框架下自由的傳遞，達到高聚合的效果，并且響應支持同步和異步的流程。開發者只需要關心數據處理，視圖的刷新將會由框架處理。

未來展望

透過整合UI2CODE Plugin，使用插件可透過AI自動分析產生Page、Config、Card等。開發者可以在自動化的基礎上再進行修改，大大減少從無到有的開發時間。我們期望開發者只需要專注的修改業務展示以及業務邏輯，不需要對頁面設置做過多的處理。

透過與業務上的合作，我們獲得了很多實際上的想法，以及對于不同業務場景的適應。在這些經驗上不斷地優化框架，讓框架更解耦，支持能力更多。未來我們希望是不只閑魚內部的應用，也擴展給更多的應用！

原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。

總結

以上是生活随笔為你收集整理的UI2CODE再进化！结合Redux的框架升级！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。