自问三连，如何建设团队里的前端工程技术？

image.png

本文为原创文章，引用请注明出处，欢迎大家收藏和分享💐💐

1、如何理解前端工程技术建设

老生常谈了，前端工程技术建设可以理解为团队内的前端技术和框架建设的整体表现，包括了 技术/规范文档、工程模板研发、组件库和开发工具沉淀、devops自动化、研发到数据可视化闭环、影响力等方面建设与完善。

2、前端工程技术建设的意义

• 规范和研发方法论：经过业务沉淀而形成团队内的研发方法，能通过成熟的技术储备和完备的开发流程为业务提供稳定支撑和高效迭代能力。
• 业务复用：如上所说，成熟的技术储备必定能为业务提供能力上的组件复用，对于长战线的业务发展来讲，是长期贡献的重要体现。
• 研效提升：套用成熟的模板和开发流程到实际开发业务中，缩短工期和提升研发效率。
• 团队的影响力：这里包含2部分，工程规范和技术影响。工程规范主要对内，针对技术栈的规范和技术标准的统一，规范组员的开发过程；而技术影响多对外，能为业界提供标准、技术、文档、流程和开源上的沉淀。

一句话总结：前端工程技术建设是保证工程整个流程、研效高可用，并且能提升对外影响力而做的一系列建设。

3、为何前端技术要工程化

抛砖引玉，要理解前端工程技术建设的必要性，先从前端工程化讲起。

3.1、前端技术的发展历程

image.png

随着1991年，WorldWideWeb的诞生，标志计算机应用从本地向网络时代的跨越。在最早的Web场景中，HTML、CSS、JavaScript组成了网页基石三要素，他们三者分别扮演网页文本结构、样式和动态交互的重要角色，彼此依赖又相互独立。就是如此简单的结构，一直维持到90年代末期，直到1998年伴随ajax第一版本的问世，前端技术才逐渐向动态化过渡。

网景浏览器截图（图已被传的包浆了😂。。。）：图

image.png

在2000年后，前端技术逐渐多样化起来，从Sam Stephenson写的Prototype基础库开始，到跃进的jQuery时期，最后演变出现在主流的三大框架（React、Vue、Angular），都是前端技术一次次的革命与进步。

本人认为，真正意义上的前端工程应该从Nodejs使用，Babeljs和webpack、gulp等构建工具广泛应用开始，将前端技术逐步模块化、可治理、可延伸，最后演变到现在大家能看到的前端工程的大集合。

3.2、Js语言的短板

众所周知，JavaScript是一门是解析型语言，它的优势是体现在轻量、边编译边执行。但同时，它又是一门弱类型、并且以函数为最高优先级的语言，这意味着，一个硕大的js文件，其实通过作用域隔离的是一个个的函数，并且全局作用域和局部作用域的变量也可以随时转换成不同类型。

其实这样的弊端是凸显的，当前端项目规模越来越大时，单纯通过函数进行作用域隔离显得过于乏力，因此，项目也逐渐变成一个巨石(monolith)应用。即使不断拆分js文件，但错综复杂的作用域叠加，也会致使项目变得难以维护。

为了抗衡处于日积（屎）月累（山）的项目，聪明的开发者制定了 CommonJs、AMD、CMD 和 UMD 等Javascript模块化策略，把作用域分隔开，变成一个个的小模块。到后来，三大框架和以 webpack 为代表的构建工具出现，又在模块化基础上连接整个前端工程，就有了前端工程化这一说法。

3.3、前端场景的复杂性

近年来，在纯web应用外也诞生了很多新场景，例如：H5、小程序、微前端、跨端应用。。。每种不同场景技术栈千差万别，工程结构也大不相同。在这点上，传统意义上的作用域区分很难满足所有开发场景，因此，使用前端技术工程化来区别管理前端多样化场景显得尤为必要了。

4、前端工程技术建设的场景需求

之所以先抛出前端工程化概念，是因为它是前端工程的核心。试想下，假如前端工程足够简单，何必要搞开发模板，搞devops、多环境、组件库呢？对吧。。。但是就目前而论，如果没有系统而全的前端工程技术，那么前端项目迭代确实增加了不少阻力，例如：

image.png

image.png

一味只满足业务需求而忽略工程建设，最终在时间的累加付出巨额的维护成本。

在上面场景一，小张其实可以利用构建工具的多环境部署特性，加上devops部署流水线插入对应客户的路径作为环境变量，让项目自适应构建就能解决。

对于场景二，小陈同样可以利用Monorepo方式来管理组件库，并且对组件发布的版本做持久化记录，最后结合服务商标识来按需加载组件就能做到千人千面的多态系统。

5、前端工程技术建设拆分

再提下，前端工程技术建设是保证工程整个流程、研效高可用，并且能提升对外影响力而做的一系列建设。 这要从几个维度来分析：

• 技术维度：
  • 工程类：包括技术栈、开发服务、软件源等
  • 架构类：例如脚手架、中台技术等等
  • 周边技术：容灾、工程测试、灰度平台等
• 流程维度：完善的管理流程能让工程循序渐进发展。
  • DevOps：完整的集成与发布流程
  • 技术闭环：数据埋点、错误收集、数据清洗入库等
  • 业务闭环：数据特征分析、数据平台、反馈平台
• 建设维度：是工程健康发展的保障，包括团队规范、文档规范和技术影响力的建设。
  • 文档类：技术文档、流程规范文档、接口文档
  • 技术评审：MR和CR、技术分享会、技术复盘等
  • 影响力：技术开源、公众平台宣传、技术文章发表、前沿技术探索等

image.png

6、如何建设团队的前端工程技术

6.1、技术建设

image.png

技术能力体现了工程团队的技术广度和深度。一个良性的前端工程技术建设应该会囊括以下几方面：

• 体现前端技术的前沿性：什么 Typescript、React、Vue 之类的热门框架可以在新项目或者探索业务上做尝试，保证自家技术栈不要落后于行业；另外也有助于吸引年轻人和新鲜血液到团队里面。
• 仓库技术规范使用：现在都是团队合作的时代，对于git的使用和协作方式往往会直接影响到一个前端项目开发的效率以及维护成本。对此，我们应该把仓库技术重视起来，git分支划分、提交流程、hooks使用都要有一套适配自家前端团队的规范。
• 工程框架和组件建设：优秀的脚手架和组件都应该配有名分，经过团队业务的洗礼和工程师的不断迭代，这些技术上的沉淀可以开源到企业内部软件源平台，或你对组件有足够信心，也可以对外开源。
• 支撑型技术建设：这块涉及面就比较广了，大体来讲只要能给工程提供帮助都算，例如工程里面的测试体系能力、性能优化技术、开发者工具建设等等。。。这类技术像钻井，可以帮助整个体系纵向发展，拓展技术广度之余能增加工程技术深度。

6.2、DevOps

image.png

DevOps（Development和Operations的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

早些年，DevOps用于整套业务，其链路涵盖都比较齐全；但是，随着越来前端技术趋向全栈、跨端和业务链路复杂后，针对前端的DevOps定制也变得普遍起来。

image.png

Devops是个覆盖面广的技术业务范畴，各大云平台商都提供比较完整的接入。一般关键的流程包括：

1. 通过CI|CD感知并触发工程构建，产出制品；
2. 制品推送到制品管理平台写入版本记录，以便在回滚时实现自动化；
3. 制品生成后，在发布单系统提单，走审核和发布流将产物部署上云服务；
4. 和前端相关的云服务大致分2类：k8s（for nodejs等后台服务）和cos（前端静态资源），根据需求部署即可。（cos上层或许还会接入CDN加速）；

接下来就是各流程闭环平台接入：

1. 监控平台：负责服务或资源错误监控并推送告警（上报SDK在工程源码内植入）；
2. 数据分析平台：负责业务上报数据分析（上报SDK在工程源码内植入）；
3. 容灾与回滚：结合制品库实现服务版本快速自动化回滚；
4. 日志平台：收集网络日志；
5. 工单系统：提供给运维使用，以用户反馈的问题为维度生成一条工单，并实现整个问题追踪、解决流程。
6. 灰度平台：针对服务多版本而开发的统一管理平台。

6.3、规范

image.png

古话说得好：无规矩不成方圆。 一套规范的前端技术标准能大大降低团队的维护成本，也让新人快速上手，除此之外，笔者认为更重要的是好的技术规范能将团队的技术能力带上正轨，向前发展。

6.4、流程闭环

image.png

6.5、影响力

image.png

影响力包括技术和团队两方面，这往往通过业务上的技术沉淀而慢慢发展形成的，包括对团队技术的方法论、技术的开源和技术分享等。

写在最后

感谢大家阅览并欢迎纠错，欢迎大家关注本人公众号「似马非马」，一起玩耍起来！🌹🌹

本文正在参加「金石计划 . 瓜分6万现金大奖」