概述
目标
FlexUE Framework 凤栖前端开发框架(简称 FlexUE)的目标是实现一种面向应用功能描述的模式化开发方式,使应用开发者可以通过一种统一的模式化的标签声明语言定义应用的 UI ,并无缝透明地与应用后端服务集成在一起运行;并且,相同的模式化标签可以有不同的组件实现,并且可以相互替换,实现个性化扩展。
对于开发者而言,可以用一种标签式声明的方式定义应用界面功能布局、菜单、操作按钮、数据、服务、事件等,多数情况下,只需专注于对应用功能的开发上,不需要关注界面渲染、样式的细节,也不需要关注前后端技术体系差异性,以及由此引起的各种复杂的处理任务,比如传输转换、接口适配、同步异步协调等等。
但 FlexUE 并非完全不可定义细节的“黑盒子”。 FlexUE 在架构设计上遵循了面向对象开发最佳实践的架构和设计模式,形成一套从抽象到具体的可扩展组件体系。在关注速度和规模交付的开发场景中,可以基于现成组件的组合快速实现功能;在关注个性化和细节的开发场景中,可以继承和组合现成组件来快速创造新的组件,实现局部甚至整体UI呈现的个性化定制。
设计理念
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 中与具体呈现样式无关的部分”,用于表示那些不会跟随样式变化的交互逻辑。因而,元数据也是无状态,可以非常方便地在后端、前端之间共享,在不同的应用之间共享。因此,这也是建立可大规模共享复用的开发生态的基础。