2023年8月19日，掘金掘力计划系列活动第22场——《聊聊前端工程化实践和未来》在杭州举行，在本场前端工程化专题的分享活动中，来自禾观科技的技术专家尤毅做了题为《如何渐进式的推送前端工程化》的分享。

工程化的定义

自 2018 年以来，前端工程化的概念一直在不断被提及。而相关的讨论主要集中在"前端"领域的模块化、组件化、自动化和规范化等方面。

但随着前端技术的快速发展，工程化的范畴已经开始向整个产品生命周期延伸，不仅仅局限于前端UI交互的交付。可以逐步渗透至需求分析、测试以及上线后的监控等环节。这一演进的目的是为了全面优化整个产品的开发和运营过程，提高效率、降低成本，并确保产品的质量和稳定性。

在过去几年中，前端工程化已经实现了模块化和组件化的目标，通过使用工具和框架，开发者能够更好地管理和复用代码，提高开发效率和团队协作能力。自动化也成为前端工程化的重要组成部分，通过构建工具、自动化测试和持续集成/持续交付（CI/CD）流程，开发团队能够实现自动化的代码构建、测试和部署，减少人为错误和手动操作带来的风险。

随着前端技术的不断发展和业务需求的增加，前端工程化的范畴可以向更广泛的领域扩展。在需求分析阶段，工程化的原则可以帮助团队更好地理解和管理需求，通过需求拆分和优先级规划，确保开发工作的有序进行。测试阶段也可以借助工程化的思想和工具，实现自动化测试、性能监测和错误追踪，提高产品的质量和稳定性。

此外，工程化还可以延伸至产品上线后的监控和运维阶段。通过应用性能监控、日志分析和异常追踪等工具，开发团队能够实时监测产品的运行状态，及时发现和解决问题，同时提供更好的用户体验和服务质量。

前端工程化的全生命周期演进是对当前快速发展的前端技术和业务需求的回应。通过将工程化理念渗透到产品开发和运营的各个环节，企业能够更好地应对市场挑战，提高竞争力，并为用户提供更优质的产品体验。

切入工程化的利器

微前端技术的兴起主要源于前端开发领域的框架多样性和版本碎片化的现状。除了主流的 React、Vue 和 Angular 等框架外，还存在许多老旧的项目和其他框架。

同时在业务高速迭代的情况下，前端技术的快速演进和多样化导致了许多项目使用不同的框架和版本。然而，这种多样性和碎片化使得项目的维护和升级变得复杂和困难。在这种情况下，业务开发人员在接手升级或持续迭代项目时面临着巨大的困难。

对于需要快速保证整体技术的统一并实现需求的持续迭代的情况，微前端是一个非常好的切入点。它提供了一个渐进式的更新路径，允许团队按照优先级逐步进行技术的更新，并推进工程化中的技术规范化。通过合理的规划和执行，微前端可以帮助团队更好地应对技术变革和需求变化，提高开发效率和产品质量。

除了微前端之外，低代码平台是一种可以快速提高开发效率的根据。在渐进式推动低代码化之前，可以从组件封装和物料积累入手，结合"Schema to view"方案，逐步过渡到完整的低代码方案。

首先，组件封装是一个重要的步骤。通过将常用的功能和UI元素封装为可复用的组件，可以提高开发效率和代码的可维护性。使开发人员在开发过程中更加专注于业务逻辑，而无需重复编写和调整相似的代码。

其次，物料积累也是推动低代码化的重要一环。物料是指预先定义好的业务组件、模板和样式等资源，可以在开发过程中被快速引用和使用。通过构建和积累丰富的物料库，开发人员可以更快速地创建和定制业务界面。

在组件封装和物料积累的基础上，"Schema to view"方案可以进一步推动低代码化。通过定义数据模型和视图模板之间的映射关系，使开发人员能够通过配置数据模型来快速生成对应的视图界面。这种方式可以减少手动编写大量模板代码的工作量，提高开发效率。

但无论是低代码还是微前端的方案，都需要前端对于业务需求都非常的熟悉，才能更好的发挥这两者的最大作用，如果对于业务不够熟悉，微前端可能将给团队开发带来较为沉重的技术负担，而低代码则会带来额外使用上的心智成本以及反向降低业务交付效率。

ALL IN DOCKER

在整个需求交付的过程中，CICD 部分是最为容易作为收口的环节。使用"All in Docker"的方案可以将不同的技术类型和产物发布流程统一管理，从而更容易整合和自动化。

利用 Docker 容器化技术，将应用程序及其依赖项打包成可移植的容器。这样，不论是前端还是后端，可以使用相同的Docker 容器部署和管理流程。通过使用统一的脚本和工具链，可以简化发布流程，并提高整体交付效率。

整个 CICD 的规范与开发并不仅限于前端同学，也可以吸纳后端以及运维等其他岗位同学一起共建适合整个公司的通用体系。通过将前端和后端的应用程序都容器化，可以实现跨团队、跨技术栈的协同开发和交付、减少部署和运维的复杂性，提高整个公司的技术协作和交付效率。

同时，使用Docker还可以提供更好的环境隔离和可移植性。每个应用程序都运行在独立的Docker容器中，彼此之间相互隔离，避免了不同应用之间的冲突和干扰、保证了应用程序在不同环境中的一致性和可移植性。

结语

在当前的前端领域，深入业务对于前端开发人员来说是非常重要的。通过深入理解业务需求、业务流程和用户行为，前端同学可以更好地设计和实现与业务紧密结合的前端解决方案。包括更好地理解用户需求，优化用户体验，以及与后端和其他团队进行有效的协作。

同时，深入整个软件的研发链路也是前端开发人员需要去尝试的方向。这涉及到与其他开发团队（如后端开发、测试、运维等）紧密合作，参与系统架构设计、性能优化、安全性等方面的工作。通过扩展技术视野和参与更广泛的交流使得前端工程化的链路可以延伸到整个软件研发链路中。

从业务中发展自身的价值，并积极参与整个软件的研发链路，通过深入理解业务需求、与其他开发团队紧密合作以及持续学习和掌握前沿技术来实现。这样的发展路径将使前端开发人员在职业发展中更具竞争力，并为团队和项目的成功做出更大的贡献。也是提高未来前端自身竞争力的手段之一。

关于掘力计划

掘力计划由稀土掘金技术社区发起，致力于打造一个高品质的技术分享和交流的系列品牌。聚集国内外顶尖的技术专家、开发者和实践者，通过线下沙龙、闭门会、公开课等多种形式分享最前沿的技术动态。（作者：赵强）