作为国内最火的前端框架之一，Vue 在国内的前端开发领域有着极高的人气，基于 Vue 打造的前端工具也是层出不穷。如今 Vue 3.0 发布在即，为何 Fes.js 团队会在这时开源一个基于 Vue 2.0 版本的工具？

社区经常有前端朋友吐槽说，“学习的速度已经跟不上前端造轮子的速度了。”那么当初微众的团队为什么没有使用一些现成的前端工具，而是选择自己打造了 Fes.js 呢？ 

Fes 诞生于从 2017 年初，当时还没有比较火热的基于 Vue 技术栈的提效中台前端应用的开源项目，不然 Fes 可能就不会出现了。。Fes.js 的运行时框架基于 Vue.js，编译使用了 gulp 和 webpack。” 

 Fes.js 相比其他基于 Vue 的前端工具的差异时，从纯技术角度讲，Fes.js 与其他 Vue 的前端工具相比并没有特别的优势，但是微众的技术团队特别注意不断进行封装和可配置化。

“因为我们内部中台前端应用的业务需求繁重，但是团队成员的技术和经验也有差异，如果仅仅是搭建项目架子，大家各自去填充代码，最终会出现五花八门的实现方法，维护起来非常困难，代码质量不能保证，另外整个开发效率也得不到提升。”万纯表示，根据微众技术团队在实际的业务开发过程中遇到的这些问题，团队在开发 Fes.js 时使用了约定和配置化的思路，把除页面之外的逻辑封装起来，让使用者写的更少，这样一来相对就不容易犯错。“Fes.js 通过框架保证代码质量，提供 UI 资源和 API 能力提效页面开发，来达到‘Fast  Easy  Strong’。”

在 Vue 的基础上做了哪些变化 ？

前面提到，Fes.js 基于 Vue 2 开发，其中 fes-core 是框架核心。万纯向我们介绍了 Fes 在 Vue 的基础上具体做了哪些增强。 

首先 Vue 本身是一套用于构建用户界面的渐进式框架，可以构建出任何类型的 Web 应用。为了让使用者上手简单，Fes 项目组曾考虑设计一套 DSL，编译成 Vue 的 Render 函数。但考虑到这种设计时间成本很大，有重复造轮子之嫌，而且 Vue 的开发模式也比较简单，所以改为增强 Vue 的设计思路。

万纯介绍，Fes.js 着重于快速构建中台前端应用，其中 Fes-Core 是对中台前端应用常见的功能模块的抽象。“这里说的‘对 Vue 的 API 做了一些增强’是指增加了某些 Vue 框架之外的配置和在 Vue 的实例上注入一些额外的 API。” 

Fes 在 Vue 框架之外的配置有：

• FesSyncData 在实例的 created 阶段请求配置中的 URL，将响应结果自动挂载在 Vue 实例上成为当前实例的内部状态

• FesDataCache 缓存页面内容，当返回页面时展示之前的状态

• FesHeader  控制当前页面是否显示公共的头部

• FesLeft 控制当前页面是否显示公共的左侧菜单

注入的 API 有：

• FesFesx：全局状态容器，管理独立于组件内部状态的全局状态，在组件中通过 this.FesFesx 使用，在模板中直接使用 {{FesFesx[prop]}}

• FesMap：数据字典容器，在组件中通过 this.FesMap 使用，在模板中直接使用{{ FesMap[prop]}}

• FesEnv：当前环境变量配置

• FesApi ：接口请求管理器，支持自动处理异常，防重复请求，可配置响应结构让开发者在页面代码中直接拿到当前响应的业务内容，而不是包含其他类似 code、message 等通用响应内容

• FesStorage：对原生 cookie、storage API 的封装，提供一致的 API

• FesApp：应用实例，可以设置权限、设置语言、设置用户名等。 

除此之外，Fes-Core 还提供了一些过滤器，比如日期转换、金额处理、银行卡掩码、数据字典转换等。 

谈到即将发布的 Vue 3，万纯透露目前项目组也已在规划基于 Vue 3 的 Fes.js 版本：“Vue 3 的 composition api 是我们期盼了很久的特性。相比基于 mixins 实现代码复用，composition api 有更直观的依赖关系，可以将内部一些模块拆分更合理，通过一些逻辑的组合和工具函数沉淀，把更多管理台通用的能力封装在框架和组件内部，让用户专注于业务逻辑，提升开发效率。升级 Vue 3 还能带来的其他好处，例如性能提升、支持 Fragment 等。” 

虽然 Vue 3 采用了 TypeScript，但万纯表示 Fes.js 暂时没有用 TypeScript 重构的计划：“因为 TS 有一定的学习成本，对于中小型项目带来的收益也比较有限，不适合我们这种小的团队。”

Fes 社区的规划

那么目前 Fes.js 项目的开源社区建设情况如何？未来是否会保持长期更新呢？

万纯介绍，Fes.js 项目开源一周的时间，已经吸引了超过 150 位开发者加入社区，很多活跃的开发者会留言咨询安装细节，发现并提出项目的问题。“我们也收到了一些建设性的意见，在某些事项上与开发者的想法不谋而合。”万纯表示，“我们特别希望大家通过提交 issue 或 pr 的方式在社区里与大家互动，让项目的所有信息更加透明化。同时，我们也诚挚的邀请大家参与到项目的共建之中，共同完善 Fes 框架，碰撞想法， 实现更多有意义有趣功能，一起做有价值的事情。”

目前 Fes.js 的插件机制仍在完善中，添加新功能模块会侵入其他功能模块的代码，所以需要对整体代码有一定掌控才能顺利添加，对外部贡献者有一定的使用挑战。为了解决此问题，项目组下一步计划将重构代码，首先确认中台前端应用的基本逻辑，提炼出框架核心部分，完善 Fes.js 的插件机制，以插件机制实现其他非核心功能模块。这样，社区开发者也可以使用插件机制为 Fes.js 贡献新功能模块，就算出问题也不影响主流程。同时，万纯也透露了 Fes 未来的总体迭代计划： 

近期：

1、 添加 affix 图钉组件

2、 添加简单的表单、列表、图表项目模板

3、 修复 zoom 组件的 bug

长远：

1、 包含 Dashboard、表单页、列表页、详情页的页面模板

2、 重构 Fes-Core，完善插件机制

3、 重构 Fes-UI，完善代码的一致性，优化组件体验

4、 升级为 Vue 3.0

Fes.js for Vue3，简洁却不简单

希望新升级的版本，可以让前端小伙伴们使用起来更加开心，也欢迎更多的人在巨人的肩膀上走出更多自己的路。