微众开源 Vue 前端工具 Fes：给轮子上油而不是造轮子

近日，微众银行技术团队宣布开源一个基于 Vue 的前端开发工具 Fes.js，该项目用于管理从开发到部署的全链路完成流程，提供模板项目、cli 命令行工具、丰富的 PC 端组件和一系列 API，提效中后台开发能力，让开发更聚焦于业务逻辑。 

作为国内最火的前端框架之一，Vue 在国内的前端开发领域有着极高的人气，基于 Vue 打造的前端工具也是层出不穷。如今 Vue 3.0 发布在即，为何 Fes.js 团队会在这时开源一个基于 Vue 2.0 版本的工具？Fes 是又一个重复造的轮子吗？带着这些疑问，开源中国邀请到了 Fes.js 项目负责人、微众银行高级前端工程师万纯，为大家分享 Fes 项目的创建始末，以及对前端开发者关注的一些问题进行了深入探讨。

给现有的轮子上油

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

万纯介绍，Fes 诞生于从 2017 年初，当时还没有比较火热的基于 Vue 技术栈的提效中台前端应用的开源项目，不然 Fes 可能就不会出现了。“其实 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 项目负责人，微众银行基础科技部高级前端工程师。

我们会持续优化和迭代 Fes，真正让它像名字一样能够更 fast、easy、strong。近期我们前端团队还将开源“小程序开发框架”，其他开源项目就很多了涉及多个领域，大家可以访问微众银行在 gitee 上的开源社区https://gitee.com/WeBank 进行了解交流 。—— 万纯