“快速、简单、健壮”的前端应用框架,开源了

3,378 阅读17分钟

Web 开发中几乎所有平台都需要一个后台管理, 通常包括权限、增删改查、报表、图表等业务逻辑相对简单的内容,但是大量的增删改查、接口调试也非常耗费时间。在大中台概念下,对管理台前端有了更高的要求,要求保持统一的 UI 风格和一致的交互体验。

微众银行基础科技产品部前端开发团队从 2015 年开始对 Vue 技术进行探索,2016 年完成技术栈从 Angular 升级为基于 Vue 的全新架构,在开发管理台的前端应用中积累了宝贵的经验。

基于此,微众银行孵化出了 Fes.js 适用于后台管理系统的前端解决方案,在内部实践了 3 年,于今年 8 月对外开源。对比同类项目 ,Fes.js 拥有完善的工程化能力,提供初始项目、开发调试、编译打包,格式检查的命令行工具。设计上化繁为简,使用约定的方式生成路由、全局组件,布局、菜单、权限管理、数据字典配置化,提供状态管理、数据字典管理、接口管理等模块,让后台管理应用开发只需要聚焦到页面,用组件去搭建页面。

不服来验:

github.com/WeBankFinTe…

gitee.com/WeBank/fes.…

Fes.js 框架

Fes.js 是“快速、简单、健壮”的前端应用解决方案,包含 Fes-Cli、Fes-Core、Fes-UI 三部分。能够管理从开发到部署的全链路完成流程,提供模板项目、cli 命令行工具、丰富的 PC 端组件和一系列 API,提效中后台开发能力,让开发更专注的聚焦于业务逻辑。

目前的功能有

1、命令行工具 Fes-CLI ,一行命令创建工程、开启开发调试、打包发布;

2、运行时框架 Fes-Core,固定页面布局,提供权限管理、储存管理、路由管 理、接口管理、状态管理、数据字典管理、环境管理等 API,以插件的方式提供扩展接口;

3、组件库 Fes-UI ,包含 30+ 的 PC 端组件库,可以快速搭建出增删改查等页面。

使用场景

1、管理系统前端的高效开发

快速搭建项目环境,封装后台管理应用的常用模块;固定应用布局,让开发者只需要关心用组件搭建页面;

2、满足高质量和高稳定性运行

Fes.js 稳定的底层架构结合上层质量保障体系,配合整套经过线上验证的技术栈,可以保障应用上线稳定运行;

3、支持国际化版本

Fes-Core和Fes-UI支持了国际化能力,可以轻松实现管理台应用的国际化支持。

演化过程

在使用 Vue 开发管理台过程中,实现业务需求积累了一些相对通用的组件,经过重构让组件更通用后 ui-webank 组件库诞生。

使用组件库开发管理台应用,效率得到了提升,但是其中依然有很多内容,例如布局、菜单、权限、接口请求能力是类似的,为何不把管理台应用中其他通用的能力抽象出来,实现一个框架封装这些能力呢?于是,Fes.js诞生了。

Fes.js 核心设计原则是“让开发者少写”,愿景是 “Fast 、Easy、Strong”。
从功能上 Fes.js 分为 Fes-CLI、Fes-Core 和 Fes-UI 三部分,在开源前经历过一次大的架构变更 v1.0 版本 Fes-ClI 和 Fes-Core 同属于一个包,这样带来一些问题:

  • Fes-CLI 和 Fes-Core 在同一个 npm 包,每次 Fes-Core 更新顺带更新 Fes-CLI 的版本,也就是用户需要重新全局安装一次fes命令;

  • Fes-Core 强依赖 Fes-UI,在代码中使用了 Fes-UI 的 Message 组件,Fes-Core 的 package.json 写死 Fes-UI的版本。导致每次升级 Fes-UI 版本需要同时升级 Fes-Core 版本,用户需要重新安装 fes 命令。

在 v2.0 版本中完全解耦三个模块,由项目决定 Fes-Core 和 Fes-UI 的版本。

加入 Fes.js 社区

我们已迈出了第一步,虽然目前不能更全面的实现某些功能,随着时间的推移,这部分功能一定会越发完善,希望这些可以帮助开发者们更好的进行开发。

在此诚邀关注前端开发的你,参与到 Fes.js 项目中来,我们欢迎任何形式的贡献,有任何建议或意见可在 GitHub/ gitee /微信群中提 issue,期待你的到来。

传送门