UI2CODE再進化！結合Redux的框架升級！

背景

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

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

進化後的UI2CODE

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

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

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

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

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

4. 提供通用的元件庫，可重複利用

核心設計思路

我們在設計上主要參考於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(非必選)等子樣板。

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

1. PageTemplate，通用頁面容器，並支援NestedScrollView的Silver Header滾動(若需要)

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

3. 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代表基本的檢視展示，業務UI，其中包含了View widget以及DataModel資料。框架內會將兩者Data binding起來，由資料來驅動最終展示的呈現。達到如MVP中View和ViewModel的隔離效果。

Abstract class BaseCard <T extends DataModel> 

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

• 透過BaseCard\

• Card可以發出事件，不直接操控資料，而讓接收者響應

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

Abstract class CardReaction <S, D extends DataModel>

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

• RegisterReactions()註冊感興趣的事件handler

• 可於handler上加上aysnc，指定為非同步處理

• Reaction內依據事件修改DataModel，只要關注事件改變後的資料，本身不持有資料，檢視將會自動重新整理

舉例來說：

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

//接收rAssignPrice的事件, 並對資料做處理
@override
Map

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

Redux是一套的資料管理的框架。所有的資料的儲存於Store的State內。當事件發生時，會發生不同的Action，根據事件響應不同的Reducer去改變State。若經過響應後State有所變化，則繫結的檢視會視需要做對應的重新整理。

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

訊息機制

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

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

1. 自身：Card發出的訊息將由自身定義的Reaction處理

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

總結進化的UI2CODE

• 框架簡單，只需瞭解框架基本的元素，不需要會Redux就可以達到資料管理的效果。目前閒魚內部的新應用落地，所有的頁面均透過框架的機制來達到訊息傳遞。而其中1/3頁面UI為透過自動化生成，減少了約一半的整體開發時間。

• 因為元件的分層解耦，維護時可以清晰看到頁面的組成及覆用程式碼。並且在修改元件時，不影響到其他元件的作用。

• 事件可以在頁面框架下自由的傳遞，達到高聚合的效果，並且響應支援同步和非同步的流程。開發者只需要關心資料處理，檢視的重新整理將會由框架處理。

未來展望

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

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