開發

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

廣告
廣告

微信掃一掃,分享到朋友圈

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

背景

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

Card代表基本的視圖展示,業務UI,其中包含了View widget以及DataModel數據。框架內會將兩者Data binding起來,由數據來驅動最終展示的呈現。達到如MVP中View和ViewModel的隔離效果。

Abstract class BaseCard <T extends DataModel> 

  • 可由UI2CODE Plugin分析視覺稿產生
  • 透過BaseCard\
  • 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

結合redux

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

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

詳細Redux:可以參考 https://github.com/reduxjs/redux

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

消息機制

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

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

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

2. 兄弟間:Reaction內可選擇轉發,可以指定轉發的對象為另外一張Card

3. 父對子:可于Page內指定發送的Card

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

總結進化的UI2CODE

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

未來展望

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

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

我還沒有學會寫個人說明!

我的代碼和注釋都寫的像坨屎,那又怎么樣?

上一篇

華為發布智能數據解決方案FusionData

下一篇

你也可能喜歡

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

長按儲存圖像,分享給朋友

ITPUB 每周精要將以郵件的形式發放至您的郵箱


微信掃一掃

微信掃一掃
双色球常规走势图 危化品运输公司赚钱吗 漫画家能赚钱吗 窦立国用心去赚钱视频 无投资怎么用手机赚钱 开劳务公司非常赚钱了 纸箱打包赚钱吗 有什么可以赚钱的APP或游戏 看视频赚钱都有哪些 点化石赚钱吗 有没有帮人解题赚钱的软件下载 我想干个小餐桌赚钱吗 航站楼商铺赚钱