flexue

1.52.30 • Public • Published

FlexUE Framework 凤栖框架

1. FlexUE 介绍

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

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

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

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

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

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

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

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

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

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

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

2. 快速开始

进入《快速开始》

3. 开发者文档

进入《开发者文档》

Package Sidebar

Install

npm i flexue

Weekly Downloads

39

Version

1.52.30

License

none

Unpacked Size

26.4 MB

Total Files

9

Last publish

Collaborators

  • huanghaiquan