UI2CODE进化：Redux集成框架排行榜

# 背景 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，分别负责视图展示和事件处理。这样可以把业务场景清晰分割成小模块，互不影响。 - `implements Lifecycle`：框架统一分发管理页面生命周期 - 通过设定 Template 指定页面要呈现的模板，或修改背景等属性 - 通过设定 Config 指定页面包含的 Cards 和 Reactions - 通过设定 PageState 添加额外数据 ### Page Template Template 是页面的抽象化表达，整体上提供多种可选模板，并支持设置 AppBar（非必选）、Header（非必选）、Body、Stack（非必选）等子模板。 模板可以理解为页面的容器，目前支持以下模板，并可扩展： - **PageTemplate**：通用页面容器，支持 NestedScrollView 的 SliverHeader 滚动（如果需要） - **PageBottomNa vigatorTemplate**：含有底部导航的容器，如首页 - **PageSwitchTabTemplate**：含有分页 Tab 功能的容器 各个子模板也有对应的 Template 可选择，比如 Body 内部的模板决定 Cards 的排列方式，例如 BodyListViewTemplate 就是列表展示。 使用 Template 最大的好处是减少开发工作量，直接用封装好的接口即可。而且页面内的所有模板共用消息机制，可以互相传递消息，比如 Body 内部的卡片可以轻松发消息给 AppBar。这是框架的一个有力特性。 ### Page Config Config 决定页面的组装，包含哪些元件以及事件处理反射的类绑定。 - 通过设定 `cards` 注册页面加载的卡片 - 通过设定 `actions` 注册页面响应的类，支持卡片事件和页面事件 - 支持额外设置 AppBar、Header、Stack 等组件（非必须） 如何绑定？举例来说： ```dart void actionConfig(List> actions) { // 卡片Card8575, 响应事件的类为Card8575Reaction actions.add([() => Card8575, () => new Card8575Reaction()]); } ``` ## Card Card 是基本的视图展示单元，代表业务 UI。它包含 View widget 和 DataModel 数据，框架会将两者进行数据绑定，由数据驱动最终展示。这达到了类似 MVP 中 View 和 ViewModel 的隔离效果。 - 通过 `BaseCard` 标准化，指定数据 DataModel - 绑定 Card 可以发出事件，不直接操控数据，而是让接收者响应 ## Reaction Reaction 代表事件发生后的响应，可以选择是否处理。若处理，可以同步或异步修改对应的 DataModel。 - `RegisterReactions()` 注册感兴趣的事件 - handler 上可加 `async` 指定为异步处理 - Reaction 内部依据事件修改 DataModel，只关心事件改变后的数据，不持有数据本身，视图会自动刷新 举例来说： ```dart // 发送rAssignPrice事件 doAction(Card6736Event.rAssignPrice); // 接收rAssignPrice事件，并对数据做处理 @override Map registerReactions() { return { Card6736Event.rAssignPrice: (PageItemBean state, CardAction action, Card6736DataModel data) { // 修改数据字段 data.userName = "123"; }, }; } ``` ## 结合 Redux 在页面框架的背后，采用了 Redux 进行封装。Redux 是一套数据管理框架，所有数据存储在 Store 的 State 中。事件发生时会产生不同的 Action，根据事件响应不同的 Reducer 去改变 State。State 变化后，绑定的视图会按需刷新。 （详细 Redux 可参考官方文档。） 应用了 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，插件可自动分析视觉稿并产生 Page、Config、Card 等。开发者可以在自动化的基础上进行修改，大大减少从零开始的开发时间。期望开发者只需专注于修改业务展示和业务逻辑，无需对页面设置做过多处理。 通过与业务合作，获得了很多实际反馈和对不同业务场景的适应经验。在这些经验上不断优化框架，让它更解耦、支持更多能力。未来希望不光是在闲鱼内部使用，也能扩展到更多应用。

来源：互联网