浅谈前端工程化体系-上

前言

这个月基本上大半个月在毕业旅行。不过旅行途中去国家图书馆看书的时候发现了两本不错的书,在这个月没有什么编码的情况下,这个月的文章就以《前端工程化体系设计与实践》这本书的读书笔记来代替。

正文

在讲前端工程化的时候我们先脑袋里想一下,什么是工程化。

在之前我的想法是,配合一系列思想、标准和工具,将原本斑驳杂乱的开发变得如同流水线一般,输入需求,输出产品。

前端工程体系是一种服务,以项目迭代过程中的前端开发为主要服务对象,设计开发、构建、部署等环节。

工具是前端工程化的实现媒体,规范是工程化的指导方针,工作流程是工程化的外在表现形式以及约束规范的载体。

我们在过去的开发过程中会各种框架(React、Vue),各种构建工具(Webpack、Rollup),然后配合后端接口对接就完成了工作。

在之后我们会逐步提高要求,比如针对业务层的优化,对开发效率的要求,对规范的要求。再之后我们开始重视构建,注重部署阶段,测试阶段。

因此我们最后回过头会以Node.js为底层平台,配合构建工具为核心打造解决方案。

作为前端我们的工程化其实一直随着社区的标准、工具迭代而不断更新。

  1. 在最初前端写页面,后端写逻辑,套模板是最初的混沌状态,这种情况下后端工程师需要二次处理前端工程师的产出。
  2. 前后端分离形态关键技术是Ajax的诞生。它让前端能够处理更加复杂的逻辑,并拥有更进一步的发展空间。后端工程师在这阶段不需要对js和css做二次处理。但因为静态资源和动态资源一起部署,仍然需要人工交互流程。

    在此之后前后端分离形态慢慢会跟随业务变更与社区发展进行变换。 为了解决开发以及协作层面问题。现在已经能解决如下问题: ES规范与浏览器兼容性不一致。 CSS的弱编程能力。 资源定位。 图片压缩/base64内嵌/css Sprites。 模块依赖分析和压缩打包。

    javascript部分逻辑依赖接口API。

  3. 进一步的工程化状态是基于之前的前后端分离,让前端工程师的职能范围更加扩展。静态资源和动态资源分离部署。这个阶段提供部署的效率也提高了Bug修改效率。使用协商缓存策略,便于线上资源的及时更新。

回过头我们可以看看从最初的刀耕火种状态,前端工程师的话语权仅限于切图,写css。再之后社区规范和工具的发展,使得前端又能写复杂的逻辑与交换。此时前端能掌控的不仅仅是页面,同时也拥有了部分对开发逻辑的话语权。再之后Node的兴起,产品业务的规模化复杂化,让前端能够渐渐解决之前只能后端来处理的事情。接管了一部分后端的工作。再到现在,逐步可以接手部署工作。

前端的工程化的演变也是让前端这个岗位逐步愈发的重要。

前端工程化的三个阶段

工程化的核心不是工具,前端工程化是以规范工作流程为手段,以工具为实现媒体,最终目的是提供开发效率保证web产品的线上质量。

前端工程化的规范包括:

  1. 项目文件的组织结构,比如用目录名称区分源代码和目标文件。
  2. 源代码的开发范式,使用既定的模块化方案。
  3. 工具的使用规范,比如工程化自身的配置规范。
  4. 各阶段环境的依赖,比如部署功能的实现就需要目标服务器提供ssh权限。

前端工程化的初级阶段便是将各种工具进行功能整合,为业务开发人员提供统一规范的工具栈。此本地工具链形态的所有工程化功能,包括构建、本地服务器、部署等,均在本地环境下工作。

工具链的统一,巩固论文流程的规范性,开发者使用统一的工具链、遵循统一的规范进行业务代码编写,利于多人协作与程序的维护。

管理平台形态的工程化是下一个阶段。它需要做到:

  1. 淡化环境差异性,保证构建产出的一致性。
  2. 权限集中管理,提供安全性
  3. 项目版本集中管理,便于危险处理,比如版本回滚。

管理平台形态的各个功能模块的执行环境集中化,从各模块实现角度来与本地工具链基本一致。

最后的阶段就是将前端工程化融入整体,现在大环境方向是做持续集成。

结尾

在Node.js之前,浏览器是前端工程师的唯一范围。当Node.js出现之后,出现了所谓的大前端概念,语言的通用性降低了前端开发服务端的门栏,也为同构编程提供了有力的技术支持。

Node.js中间层的主要工作如下:

  1. 汇总后端数据接口暴露新接口给浏览器javascript逻辑调用
  2. 渲染html模板

当前端工程师能掌握所有与用户相关的资源(数据、逻辑、模板),他就能更全面的掌控开发进度以及实现更合理的前后端分离。

Table of Contents