400-680-2995 投诉建议 | 中文 / EN

前端框架,开箱即用?

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

趋于稳定

Web框架已经趋于三足鼎立的局面。


分别为:Facebook的React,Google的Angular,以及尤雨溪的Vue。三大框架虽相互借鉴,但各有侧重,且都在稳定发展中。

趋于工程化

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

如何进行高效的团队协作?

如何保证项目的可维护性?

如何提高项目的代码质量?

如何降低项目的生产风险?

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

▪ 标准化。定义编码、目录结构、接口以及源码管理等规范。

组件化。组件分为HTML,JS和CSS。

模块化。功能封装。

自动化。持续集成和持续部署。

前端框架的痛点分析:

前端框架虽已大大减少了开发者的工作,但是它还有一个最主要的痛点:非企业开箱即用。具体表现为:

1.模板多,工程多。随着企业规模越来越大,产品不断增加。不同的产品需要不同的模板,因此,需要有一个统一管理模板的方法。

2.开发效率低。虽然前端已经使用了模块化和组件化,但是组件太多,公共方法也越来越多,影响了开发效率。

3.沟通成本高。开发文档不详。

新一代前端框架

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

由此带来的变化是,这些前端应用可以独立运行、独立开发、独立部署。如下图所示:


常用的实现方式为:

路由分发。HTTP服务器路由重定向。

Single-SPA

iFrame

Web Components

元年新框架探索

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

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

元年脚手架功能:

根据框架模板快速创建工程

模板更新检测

发布到元年内部仓储

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

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


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

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

4、微前端解决性能问题

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


5、二开机制解决项目需求

元年将二开分为线上(推荐)和本地2种方式。

线上二开优势:

代码单独存储在DB。

部署发布快。

不需要为项目提供源码。

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

6、本地二开新功能:新增组件级二开解决方案

对于本地二开,不建议直接修改源码,一般都会在源码包里预留一个文件夹,专门用来做二开。一般的二开都是在页面级,通过修改路由的方式实现新增、修改和删除页面。但是,页面其实是由一个个组件构成,现在模块化程度也来越高,很多页面都有公共的组件,用常规的方式无法实现组件级别的二开。

元年通过开发二开插件,实现了组件级二开。比如,一个源文件路径问@/page/XPageHeader.vue,如果在@/custom下放置一个相同路径的文件page/XPageHeader.vue,那么在webpack打包编译的时候,就会自动生成二开Mapping表,这个是为了给二开人员快速预览哪些组件已经被二开。同时,源码包中的源文件会被替换为二开目录下相应的文件,实现了组件级的二开。

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

虽然流行的开源组件库,例如Element UI和Ant Design,能够满足大多数企业的需求,但是仍有以下问题:

1. 不能覆盖所有通用场景。

2. 样式单调。

3. 当遇到bug,提交时需开源库审批。

因此,元年发布了元年组件库标准,统一控制样式,保证所有项目都使用统一的风格。


8、可视化、低代码设计器

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

9、元年整体框架图

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


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

在这里您可以索取: 白皮书解决方案研究报告

>>

解决方案

白皮书

研究报告