fes.js 设计

[winixt]

fes.js 开源了

Fes 是什么

Fes 是基于 Vue2.x 的中后台前端框架，目的在于提效中后台开发，降低开发门槛。提供一系列基础能力，让开发只关注业务逻辑。

Fes 诞生的原因

在一个互联网企业内部会有很多管理台需求，满足技术和非技术人员对数据的增、删、改、查的操作。基于一个现在流行的前端框架开发一个管理台需要如下步骤：

这些管理台功能类似，会有很多共性。例如上图开发环境的搭建、环境配置、写需求页面前的准备等等，每个管理台都来一遍会产生大量重复而繁琐的工作，一些后端开发人员对前端流程没那么熟悉的更是挠头。 Fes应运而生，抽象通用能力，管理开发到部署整个流程，降低开发的门槛，减少开发的工作量。用了 Fes 的开发流程变成：

Fes 的设计

Fes提供的是一整套解决方案。包含fes-cli、fes-core、fes-ui三部分。

fes-cli

fes-cli 是一个命令行工具，用于创建工程、构建开发环境以及打包发布。还会根据应用下的 page目录自动生成 router 的配置，提供给 fes-core 创建 vue-router 实例，用户就不再需要手动编写繁琐的 router 配置。router 生成规则如下:

fes-core

fes-core 是框架的核心，内置了很多通用的能力，包括项目布局、权限管理、全局状态管理、api 情况封装等等，这里举两个简单的例子🌰：

**项目布局：**fes-core 提供了水平布局、垂直布局两种布局模式，通过简单的配置就可以构建起 web 的框架。

**权限管理：**在 Fes 的概念里，每个页面、每个路由、甚至每个 button 都视为一种资源。通过简单的资源配置，就可以声明每一种资源是否展示、是否可访问。

fes-ui

fes-ui 是一套基于 Ant.design 设计理念的PC端组件库。提供了丰富的基础组件，开发一个页面，只需将组件组装一下就好。

fes-plugin

fes-plugin 提供了两个能力，行内 SSO 登录和 wa 上报，通过简单的两个配置就可以开启这两个能力。

基于上述一套组合拳，开发一个管理台只需要写点配置，然后就可以直接开始写需求页面了。开发效率立马拉上了一个层级。

随着项目迭代而出现的一些问题

如上所述，Fes 是基于 Vue2.x 进一步封装而开发出来的框架，因为 Vue2.x 通过选项组织方式，随着需求的迭代，功能的增加，复杂的页面变得越来越难以阅读和理解。并且缺少一种简洁且低成本的机制来提取和重用多个组件之间的逻辑。近期Vue发布了第三个大版本，通过 composition API 解决了上述问题：

另外 Fes 本身也有存在一些设计上的不足。我们把太多的能力强耦合进 fes-core 里面，例如项目布局、全局状态管理、权限管理等。因为是和 fes-core 强耦合的，有时候想换个布局方式变得不可能。有些项目不需要全局状态管理也被强打包进去。或者想扩展一些能力，例如增加换肤，也只能去改 fes-core，扩展能力不足。fes-plugin 的设计也有类似的问题，因为前期考虑的一些不足，和 fes-core 也有强依赖管理，新增、移除plugin都很麻烦。

借机Vue3.0的升级，Fes 也准备进行一次大的重构，提升 Fes 的扩展能力。

Fes 的未来

如上所述，目前 Fes 的主要问题在于扩展性弱。重新设计之后我们希望 fes-core 更轻量，大部分能力通过 plugin 去扩展，然后把 storage、DOM 操作函数等功能函数独立出来作为一个 utils 库，让“上帝的归上帝，凯撒的归凯撒”。

那么 fes-core 应该承载的职责是什么呢？

我们认为有三个就够了，一个应用的初始化，一个路由管理，一个 plugin 管理。项目布局、权限管理、国际化等等全部通过插件去实现。这样做的好处在于，如果用户想换一种布局方式，换一个插件就好了。如果用户想实现换肤的能力，写一个插件就好了，不需要改动 fes-core，这样也使得 Fes 更健壮，能力更强大。

重新设计后的架构图：

最后的最后，来个 github 地址镇楼。
https://github.com/WeBankFinTech/fes.js

希望有更多的同学加入一起完善。star 走起～