UI2CODE再进化结合Redux的框架升级

23次阅读

共计 3902 个字符，预计需要花费 10 分钟才能阅读完成。

摘要： 自从有了 ui2code，妈妈再也不用担心我加班

背景

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> 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：可以参考 https://github.com/reduxjs/redux

我们应用了 Redux 中等 State、Action、Reducer、Store、Middleware 的概念，将页面赋予生命状态，而页面内的组件间可支持消息机制。Redux 对刚入门的同学还是有一定的门槛所在，但在本框架的封装下，基本上感觉不到 Redux 的存在。

消息机制

在 UI2CODE 消息框架下，页面内的各个组件以及容器都可以弹性的进行消息传递。可以由 Page、Card、Reaction 等处任意的发送消息，达到 (自身、兄弟间、子对父、父对子) 的通知。

各种消息传递的路径说明如下：

  1. 自身：Card 发出的消息将由自身定义的 Reaction 处理

  1. 兄弟间：Reaction 内可选择转发，可以指定转发的对象为另外一张 Card

  1. 父对子：可于 Page 内指定发送的 Card

  1. 子对父: 若发出的消息在 Card 内无人处理，则会冒泡到 Page 层级处理

总结进化的 UI2CODE

  • 框架简单，只需了解框架基本的元素，不需要会 Redux 就可以达到数据管理的效果。目前闲鱼内部的新应用落地，所有的页面均透过框架的机制来达到消息传递。而其中 1 / 3 页面 UI 为透过自动化生成，减少了约一半的整体开发时间。
  • 因为组件的分层解耦，维护时可以清晰看到页面的组成及覆用代码。并且在修改组件时，不影响到其他组件的作用。
  • 事件可以在页面框架下自由的传递，达到高聚合的效果，并且响应支持同步和异步的流程。开发者只需要关心数据处理，视图的刷新将会由框架处理。

未来展望

透过整合 UI2CODE Plugin，使用插件可透过 AI 自动分析产生 Page、Config、Card 等。开发者可以在自动化的基础上再进行修改，大大减少从无到有的开发时间。我们期望开发者只需要专注的修改业务展示以及业务逻辑，不需要对页面设置做过多的处理。

透过与业务上的合作，我们获得了很多实际上的想法，以及对于不同业务场景的适应。在这些经验上不断地优化框架，让框架更解耦，支持能力更多。未来我们希望是不只闲鱼内部的应用，也扩展给更多的应用！

本文作者：闲鱼技术 – 余晏

阅读原文

本文为云栖社区原创内容，未经允许不得转载。

正文完
redux 容器 机器学习 架构 框架
发表至：无分类
2019-06-06
 0