Flexue NPM | npm.io

FlexUE Framework 凤栖框架

1. FlexUE 介绍

FlexUE Framework 凤栖前端开发框架（简称 FlexUE）是一个基于元数据的 Web 和移动端界面开发框架，提供了一种全面元数据化的声明式、模式化的UI开发模式，通过清晰地界定和分别处理“用户交互界面（UE）”开发中的“交互”与“样式呈现”这两类主要的任务，极大程度地实现 UE 开发的标准化、模式化和组件化，从而实现低代码化的高效率低成本开发模式。

FlexUE 框架基于高维抽象提供了标准化、模式化的“交互”实现来处理“少变”的部分任务，使开发者可以重点关注在“样式呈现”这部分“多变”的任务。特别是在复杂业务的情况下，可显著地提升的 UI 界面的开发效率，提升对业务需求的响应速度。

FlexUE 框架不绑架开发者的技术选择，FlexUE 架构在当前主流的 Web 前端技术如 HTM5 、NodeJS、 Vue 等技术之上，有良好的架构开放性。

FlexUE 的核心思想认为，用户界面（UI）实现过程可以划分为对两个部分的实现：“交互逻辑”和“呈现样式”。其中，“交互逻辑”的部分是共性化的，是可以模式化和标准化的，而“呈现样式”部分是个性化的，在面对不同的目标、场景或时间时需要多样化的呈现。FlexUE 认为把用户界面设计中的 “共性部分”与“个性部分”进行分离和独立处理，能够进一步极大地提升 UI 实现的工程化和可复用能力。

FlexUE 的核心设计包括以下几点：

模式化抽象定义“交互逻辑”，建立一套表示 UI 交互逻辑的模式化语言。
建立从“交互模式”到“呈现样式”的映射机制，即建立通用化、标准化地将抽象的“交互模式”转为具体化的“呈现样式”的实现框架。
建立一套 FlexUE 的实现模板与组件库，建立模式化的 UI 快速开发能力。

在 FlexUE 中，采用“元数据（Metadata）”的方式来描述UI的“交互模式”。 FlexUE 对“元数据（Metadata）”的定义是：描述用户界面（UI）的交互逻辑的数据。 元数据描述了 UI 中与具体呈现样式无关的部分”，用于表示那些不会跟随样式变化的交互逻辑。因而，元数据也是无状态，可以非常方便地在后端、前端之间共享，在不同的应用之间共享。因此，这也是建立可大规模共享复用的开发生态的基础。

以下面的两个登录组件为例，解释一下什么是“与呈现样式无关的 UI 交互逻辑——模式化交互”：

npm.io

如上图是两个来自不同应用的登录界面（组件），一方面，我们可以把它们的“交互行为”定义为一致的叙述——可提供两种登录凭据的输入方式：（1）以字段输入方式提供“用户名”和“密码”。（2）以“扫码”方式提供登录凭据。另一方面，我们可以把它们的“呈现样式”进行差异化的叙述——（1）以书角翻页动态特效的异型按钮方式切换至“扫码”输入。（2）以标准按钮点击方式切换至“扫码”输入。

当我们对登录操作采用一致的“交互行为”定义时，其对应的后端登录服务的实现在功能上也是完全一致的。后端服务只依赖于定义的“交互行为”，而不依赖于“呈现样式”。基于此观察，我们能够以“交互行为”定义为中心实现前后端功能一体的组件化复用，而“呈现样式”作为独立的任务被分离在更小的开发协作单元范围内。

“交互逻辑”和“呈现样式”的分离，一方面是通过抽象出一组通用的“交互逻辑”的形式化定义，并以结构化的“元数据”对“交互逻辑”进行描述，另一方面是基于现代 Web 前端技术对“呈现样式”进行设计实现，利用Web模板、层叠样式表等技术，实现用户界面设计实现的层次化 —— 具有默认的约定俗成的模式化呈现，同时可以局部调整具体样式，也可以深度地实现新的呈现样式。通过这样的分离，开发者基于 FlexUE 默认的组件模板下只需要定义好“元数据”——UI交互逻辑，便可以快速灵活地完成UI的开发；同时，这种分离也有利于前端界面开发与后端系统开发的衔接和集成，实现全栈的深度工程化和组件化。