Web开发中几乎所有平台都需要一个后台管理,通常包括权限、增删改查、报表、图表等业务逻辑相对简单的内容,但是大量的增删改查、接口调试也非常耗费时间。在大中台概念下,对管理台前端有了更高的要求,要求保持统一的UI风格和一致的交互体验。
微众银行基础科技产品部前端开发团队从年开始对Vue技术进行探索,年完成技术栈从Angular升级为基于Vue的全新架构,在开发管理台的前端应用中积累了宝贵的经验。
基于此,微众银行孵化出了Fes.js适用于后台管理系统的前端解决方案,在内部实践了3年,于今年8月对外开源。对比同类项目,Fes.js拥有完善的工程化能力,提供初始项目、开发调试、编译打包,格式检查的命令行工具。设计上化繁为简,使用约定的方式生成路由、全局组件,布局、菜单、权限管理、数据字典配置化,提供状态管理、数据字典管理、接口管理等模块,让后台管理应用开发只需要聚焦到页面,用组件去搭建页面。
项目 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社区我们已迈出了第一步,虽然目前不能更全面的实现某些功能,随着时间的推移,这部分功能一定会越发完善,希望这些可以帮助开发者们更好的进行开发。
在此诚邀