多业务场景下前端工程化的思考

时间:2021-1-8 作者:admin

引导语

“前端工程化”是当今前端领域老生常谈的一个话题。在前端领域越来越繁荣、业务越来越复杂的今天,前端工程化建设是大势所趋,每个前端团队都在打造自己的工程体系。但我们不能盲目追求工程化,为了工程化而工程化,任何体系的建设都是需要投入成本的,我们需要结合自身组织和业务的特点,清楚的认识到当前所处的阶段,通过计算投入产出比,制定适合自己组织和业务的工程化解决方案。智慧企业业务飞速发展,业务线变得越来越多,在这样的多业务场景下,智慧企业的前端团队也开始思考并打造属于自己的前端工程化体系。

什么是前端工程化

所谓工程化即系统化、模块化、规范化的一个过程。

“前端工程化”里面的工程指软件工程,其本质上是软件工程的一种。前端的工程化与传统的软件工程虽然有所不同,但是面临的问题是一样的。传统的软件开发模型分为需求分析->设计->编码->测试->运行->维护等几个阶段,具体到前端工程化,要解决的问题是如何提高编码->测试->维护阶段的生产效率。

![](https://pic2.zhimg.com/80/v2-9b5830313f54719420ce375afd2e14ce_1440w.png)

所以,一切以提升前端开发效率,降低前端开发成本,提高前端应用质量为目标的工作都是“前端工程化”。

前端工程化包含哪些内容

一般来说,前端工程化包含模块化、组件化、规范化、自动化四个方面,下面简单介绍一下。

1、模块化

”简单来说,模块化就是将一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载。”

前端的模块化包含js模块化、css模块化、资源模块化等方面。如今的前端领域对于模块化的探索已经越来越成熟。例如js模块化, 在ES6之前,JavaScript没有模块系统,通常会采用一些模块加载方案如CommonJS、AMD和CMD等。现在ES6已经在语言层面上规定了模块系统,完全可以取代现有的CommonJS、AMD和CMD规范,而且使用起来方便简洁。

![](https://pic1.zhimg.com/80/v2-8ac919a4d894cd560b7a6ff0320eeb06_1440w.png)

2、组件化

组件化≠模块化。模块化是在文件层面上,对代码或资源的拆分;而组件化是在设计层面上,对用户界面的拆分,换句话说,页面上所有的东西都可以是组件,页面是大型业务组件,可以拆分为多个中型业务组件,然后可以再拆分成多个复合组件,复合组件再拆成多个基础组件,直到拆成Dom元素为止。实际开发中,前端工程师只需要用这些组件,跟搭建积木一样完成页面搭建。如今,经过前端工程师的不断探索,组件化思想已经在现在前端开发中广泛使用,如最流行的React、Vue等,都是基于组件化思想的产物。

![](https://pic3.zhimg.com/80/v2-adfdbbffce4b392a9cb72e2994b3c1a1_1440w.png)

3、规范化

一般来说,前端规范化大体上可以分类为编码规范、开发流程规范和文档规范等,每个大类中又有一些子类,如编码规范中包含有目录规范、文件命名规范、js/css代码规范等。

![](https://pic4.zhimg.com/80/v2-87471c613c1d548703ede9a47829f0f7_1440w.png)

4、自动化

自动化是提升前端开发效率的利器,”任何简单机械的重复劳动都应该让机器去完成“。前端工程自动化基本包含以下几方面内容:

  • 图标合并
  • 持续集成
  • 自动化构建
  • 自动化部署
  • 自动化测试

为什么我们需要前端工程化

随着智慧企业业务的不断发展,业务线变的越来越多,我们面临的问题不仅仅是选择一个前端框架和技术,开发业务页面,支持单一业务那么简单,在多业务场景下,我们需要面对一些更为复杂的系统性问题:

• 多业务场景下,各业务线各自配置繁琐的构建打包配置,重复生产,耗时费力,且对于一些最佳实践无法方便的共享;

• 多业务场景下,各业务线在前端技术选型、技术方案上各自发展,技术方案不统一,技术复用率低,造成资源浪费;

• 多业务场景下,团队人员越来越多,如何方便的统一团队成员的编码规范,便于团队协作和代码维护是我们不得不考虑的一个问题;

• 当有新业务需要支持时,如何将现有的最佳实践、开发经验快速的复制出去,帮助更多的业务

面对上面的这些问题,打造适合我们自己的前端工程化体系的想法自然而生。

我们怎么做前端工程化

首先,我们需要分析组织和业务所处的现状。智慧企业在模块化和组件化方面已经做了一些探索和实践,并且取得了不错的效果,但随着业务不断发展,团队人员不断扩充,规范化和自动化方面的需求越来越凸显,基于这样的需求,我们进行了规范化、统一化和自动化建设。

规范化

当团队人员不断扩充时,我们需要制定一些统一的规范来对平时的开发工作做出一定的约束和指导。经过前期对于业务和组织现状的调研和讨论,我们制定了适合我们自己的「智慧企业前端规范」,其中包含了js代码规范、Less代码规范、文件命名规范、组件库管理规范、git分支管理规范等一系列规范。

统一化

当业务越来越多时,各业务在前端技术选型、技术方案上各自发展,五花八门,但其实很多都是不必要的,只会造成一些不必要的麻烦和资源浪费,例如两个业务分别使用 less 和 sass 等。所以我们需要做基础技术栈的收敛和统一。为此,经过调研和与业务开发的讨论,我们统一约定了「智慧企业前端基础技术决策树」,其中包含了前端框架、组件库、样式、网络请求库等前端常用的基础技术,如:

  • 前端框架:react
  • 组件库:ppfish、ppfish-mobile
  • 语言增强:typeScript
  • 样式:less
  • 质量检测:eslint、stylelint
  • 构建工具:webpack
  • 网络请求库:axios
  • ……

通常情况下,业务开发人员做技术选型时,如果没有特别的需要,直接选择决策树中的技术方案即可。如果有特殊的业务需求,需要引入同类决策中其他的技术方案,需要进行技术评审,通过后才可在业务中使用。此外,业务开发除了前端技术栈,还有业务层面的工具统一收敛,如线上静态资源统一发布到 cdn 等。

![](https://pic1.zhimg.com/80/v2-a126c585a42c78d1260b678061bc438e_1440w.png)

当然,在实际推行中,多业务场景下的规范化、统一化是一条艰难的路,有很多天然的条件决定了这条路能否顺利走下去,尤其是各业务发展中期,如何顺利推进各业务进行规范化、统一化成了我们必须要面对的一个问题。

智慧企业前端各业务能够顺利推进规范化、统一化,有一些天然有利的条件:

首先,组织架构层面,我们的组织架构是虚拟大前端组之下,分为各个业务小组,这样的组织架构决定了我们的推行可以自上而下统一进行。

其次,技术架构层面,目前我们的业务大部分都是基于react框架,UI组件库也是统一采用我们自己开发的组件库fish design,所以在技术栈的统一上我们具有天然的优势。

最后,人员意识层面,团队成员对于现有方案的痛点”感同身受“,这一点在前期向全员收集开发痛点时体现的尤为明显,代码打包慢、构建配置繁琐、新项目无法快速支持等都是大家高票吐槽的痛点。

所以,内驱+外力是顺利推行规范化和统一化的利器。

自动化

自动化在智慧企业多业务场景下凸显的痛点是各业务线各自配置繁琐的构建打包配置,重复生产,耗时费力,且对于一些最佳实践无法方便的共享。所以我们开发了一个统一的自动化构建打包工具。这里将只介绍设计思想和大概内容框架,更多细节将不再本文中赘述。

设计原则

为了减少不必要的繁琐配置,开箱即用,同时为了尽可能多的将一些公共规范集成到这个工具当中,我们的构建工具采用「约定大于配置」的设计原则,只提供必须的参数配置,不提供太多灵活的参数配置,例如我们规定,需要构建的前端代码必须放在名为 web 的目录中,编译结果将输出到你的项目根目录下的 dist 目录中,不推荐配置。

设计架构

我们希望业务开发只用这一个工具,就能完成日常大部分工作,也希望通过这个工具,将我们制定的一些规范能够真正落地实现,所以我们提供了一系列CLI命令供各个业务调用。通常,如果业务按照推荐的目录组织自己的代码并且按照约定的方式使用工具,基本可以”无配置“进行业务开发。当然,我们也提供一些必要的配置以满足一些特殊业务的个性化需求。

目前,我们的工具为业务提供了构建打包、发布(包括静态资源上传到cdn)、本地调试、初始化新页面等CLI命令,并将代码自动化检查eslint、stylelint等集成到工具当中,同时也将目录规范也集成到工具中(初始化一个页面时自动生成page、component等目录),业务开发者仅需要很少的配置甚至无需配置,即可用这个工具进行调试、构建、打包、发布等一系列流程,省去繁琐的webpack配置,提升开发效率。

![](https://pic1.zhimg.com/80/v2-e46ea7ecba636e9df3f433a757428378_1440w.png)

应用推广

为保证业务开发者使用更方便,我们还需要:

  • 文档建设:提供详细的使用文档,包括背景、目的、设计原则、配置等详细说明。
  • 持续维护升级:收集业务开发同学使用反馈,发现问题持续维护升级。
  • 工程化集成:将工具集成到团队的脚手架工具中,成为之后新项目的默认方案,在项目初始化阶段即完成接入。
  • 常见使用问题:更新维护FAQ,帮助后续接入者快速查找并解决问题。

结语

前端工程化是个系统化、模范化、规范化的一个过程,能够提高编码、测试、维护阶段的生产效率,是我们需要不断学习探索的一个方向。然而,前端工程化程度可大可小,团队需要根据自己的业务复杂度,综合现状、痛点和投入产出比,制定适合自己业务的工程化解决方案,适合自己的就是最好的。

随着智慧企业业务的不断发展,我们将不断建设和完善我们的工程化方案,更好的赋能更多的业务。我们也将持续探索业界前沿技术,如webpack5等,用先进的技术更好的为业务服务,为客户服务。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。