新一代前端框架的探索与思考

前端框架趋势

最近几年，前端框架层出不穷，大前端时代已经到来。综合来看，前端具有如下几个趋势：

趋于稳定
Web框架已经趋于三足鼎立的局面。
分别为：Facebook的React，Google的Angular，以及尤雨溪的Vue。三大框架虽相互借鉴，但各有侧重，且都在稳定发展中。

趋于工程化
现在的前端页面已经不再是拼几个页面就能完成的，当工程变得越来越复杂时，很多问题就会暴露出来。

例如：
如何进行高效的团队协作？
如何保证项目的可维护性？
如何提高项目的代码质量？
如何降低项目的生产风险？

这就要求前端要工程化。前端工程化是指，使用软件工程的技术和方法，将前端的开发流程、技术、工具、经验等规范化和标准化，其主要目的，是为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。

前端工程化具体包含：
标准化。定义编码、目录结构、接口以及源码管理等规范。
组件化。组件分为HTML，JS和CSS。
模块化。功能封装。
自动化。持续集成和持续部署。

前端框架的痛点分析

前端框架虽已大大减少了开发者的工作，但是它还有一个最主要的痛点：非企业开箱即用。

具体表现为：

1. 模板多，工程多。随着企业规模越来越大，产品不断增加。不同的产品需要不同的模板，因此，需要有一个统一管理模板的方法。
2. 开发效率低。虽然前端已经使用了模块化和组件化，但是组件太多，公共方法也越来越多，影响了开发效率。
3. 沟通成本高。开发文档不详。

新一代前端框架

新一代前端框架的目标比较简单，就是提供基础能力的同时，还可以让上层的开发人员更关注业务逻辑。所以，在各个应用下，直接使用的就是新一代前端框架。 新一代前端框架底层会封装了当前流程的框架。如果业务复杂、开发部门多、并且技术不统一，在最底层，还会有一层微前端底座。微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将Web应用由单一的单体应用，转变为多个小型前端应用聚合为一的应用。
由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。

如下图所示：
常用的实现方式为：
路由分发。HTTP服务器路由重定向。
Single-SPA
iFrame
Web Components

元年新框架探索

元年充分考虑了在实际工作中遇到的问题，通过以下方法为产品赋能：

脚手架解决模板多、工程多的问题

元年脚手架功能：
根据框架模板快速创建工程
模板更新检测
发布到元年内部仓储

通过开发插件解决效率低的问题

针对开发效率低的问题，元年开发了自己的VSCode插件。元年将所有的组件和公共方法内置到插件中，实现了在编写代码时可实时提示可选组件、属性、方法名称、参数列表以及自动import等常用方法。大大提高了开发人员的工作效率。开发人员不需要记住API名称，完全通过插件提示就实现让开发人员更关注业务逻辑。

Cookbook详细文档解决沟通成本高的问题

针对沟通成本高的问题，元年组件将文档元对象化。每一个组件都详细介绍了开发所需的信息，并在demo中，实现了所见即所得的预览效果。开发人员修改源代码，自动会在运行效果内展示真实的效果，大大减少了组件开发和业务开发之间的沟通成本。

微前端解决性能问题

对于性能优化，元年使用了改进版的微前端。主框架控制台使用了SingleSPA的模式。主框架通过API读取各子系统信息，各子系统的公共资源分为两种：一是公共的第三方库，由外部公共仓库提供；二是组件库，由元年私有仓库提供。并且在控制台上，使用预加载机制加载公共资源，每个子应用在打开的时候，不需要再次请求资源。

二开机制解决项目需求

元年将二开分为线上（推荐）和本地2种方式。
线上二开优势：
代码单独存储在DB。
部署发布快。
不需要为项目提供源码。

线上二开两种形式：自定义组件和插件。自定义组件在浏览器端运行，保证了执行效率，并可以新增自定义组件，二开人员可以维护HTML，JS和CSS（如下图）、访问和修改前端页面样式。插件在后端运行，保证了代码的安全性。

本地二开新功能：新增组件级二开解决方案

对于本地二开，不建议直接修改源码，一般都会在源码包里预留一个文件夹，专门用来做二开。一般的二开都是在页面级，通过修改路由的方式实现新增、修改和删除页面。但是，页面其实是由一个个组件构成，现在模块化程度也来越高，很多页面都有公共的组件，用常规的方式无法实现组件级别的二开。
元年通过开发二开插件，实现了组件级二开。比如，一个源文件路径问@/page/XPageHeader.vue，如果在@/custom下放置一个相同路径的文件page/XPageHeader.vue，那么在webpack打包编译的时候，就会自动生成二开Mapping表，这个是为了给二开人员快速预览哪些组件已经被二开。同时，源码包中的源文件会被替换为二开目录下相应的文件，实现了组件级的二开。

组件库统一样式、色系和标准

虽然流行的开源组件库，例如Element UI和Ant Design，能够满足大多数企业的需求，但是仍有以下问题：
1.不能覆盖所有通用场景。
2.样式单调。
3.当遇到bug，提交时需开源库审批。
因此，元年发布了元年组件库标准，统一控制样式，保证所有项目都使用统一的风格。

可视化、低代码设计器

为了降低开发难度，元年开发了新一代页面设计器。针对不同的角色和使用场景，分为Dashboard报表设计器、通用设计器、对象设计器、卡片设计器以及首页设计器，均为使用可视化方式拖拽生成页面，大大降低了开发页面的难度。

元年整体框架图

元年在开源框架的基础上，实现了常用功能的封装，发布统一的标准组件库，并开发了不同类型的设计器。实现了企业开箱即用的目标（如下图）。

以上解决方案是当前元年在企业框架上的探索，未来会有更多思考与创新。