2023 年构建前端应用时应考虑的 10 项基础领域

在现今的网页应用中，可扩展性是关键的核心非功能性要求之一。对开发者而言，我们必须要确保程序与开发过程均具备极高的可扩展性，才能应对应用的增长并交付预期的性能。

然而，前端应用的扩展并不是件容易事，我们要考虑的领域太多了。在本文中，我将介绍快速构建可扩展的前端应用中，十大最重要的领域。

一、应用架构

在设计新应用时，应用的架构是最为关键的因素。传统来说，多数组织和开发者更倾向于可以通过单一代码库维护全部应用，从而简化开发、调试及测试流程的一体化架构。

尽管一体式架构在应用早期看起来确实不错，但随着应用的增长，问题会纷至沓来。举例来说，单体架构中所有组件和服务都是通过同一个代码库进行维护，通过同一条流水线构建和发布的。这所造成的后果是，即使只变动某个组件中的一小处，发布这次更新所耗费的时间也是极长的。同理，一体化架构也带来了许多扩展性方面的问题。因此，在当今应用中我们应避免使用一体化架构。

相反，我们可以使用如微前端架构等更复杂的方式来构建大规模的前端应用。微前端架构允许我们将代码库切割并分别维护，也可以给不同微前端分配不同开发团队独立进行开发、构建、测试及发布。这种方式相较一体化架构而言，速度更快，应用扩展也无需担心会影响应用性能与开发速度。

此外，我们可以用 Bit 之类的专业工具和基础架构为应用创建微前端。作为久经考验的基础设施，戴尔、eBay，以及特斯拉等大型组织都在用 Bit 扩展前端应用。

二、基础设施与工具

构建可扩展的前端应用中的另一关键步骤则是要选择合适的基础设施和工具。工具到位了，我们就可以轻松自动化大部分的重复性工作，为核心开发任务节约大量时间

以代码审查为例，众所周知，代码审查耗时耗力，手动管理程度又有限，且难免会成为应用扩展的阻碍之一。但借助如 SonarCloud 之类的工具，我们可以轻松将代码审查流程自动化，让应用的扩展不再受阻。

同理，其他专用工具也能覆盖前端架构中的众多领域：

• 代码提示：如 Prettier 之类代码格式化工具，让你可以在几秒内将项目中的全部代码格式保持一致。

• 引导：自动创建初始化项目结构及软件包安装。

• 组件管理：组件对微服务架构至关重要，因此我们需要一个合适组件管理机制在微服务间创建、管理、共享组件。这类工具之一的 Bit，让你可以在模块化架构设计、自主团队、解耦代码库以及独立发布中进行分布式组件开发。

• 依赖管理：依赖管理的自动化也是非常重要的，随着应用规模的增长，我们不可能手动维护跨应用、跨团队的上百个依赖关系，同样，这类问题也能用 Bit 这类强力工具来解决。

• 部署：手动触发大量微前端的部署耗时耗力，我们可以通过如 GitHub Actions and Azure Pipelines 等 CI/CD 工具自动化触发代码部署。

三、单体仓库还是多仓库

选择单体仓库还是多仓库的问题，也是我们在设计前端应用时应考虑的重要问题之一。这二者都会为项目架构带来各自的独特功能与挑战，我们需要根据自身需求分析其利弊。

单体仓库

在单体仓库中，所有微前端共用单一代码库。这种所有开发团队均可有访问权限的设计让微前端间分享代码与团队间协作更轻松，开发者也可以统一维护所有测试套件、自动化脚本，以及基础设施配置。不过，单体仓库的部署过程也会更具挑战，共享代码间冲突也会更频繁。

多仓库

多仓库与单体仓库相符，每个组件或项目均有各自独立的仓库。这一设计让开发者可以分别管理代码库的访问权限，避免团队间多次的代码冲突。但缺点是多仓库的代码共享要比单体仓库更难实现。

二者相结合

综上，单体仓库与多仓库各有各的优势，二者择其一意味着项目架构要在某一方面被迫妥协。但要是用上了 Bit, 这类工具，我们就不用再纠结于两种方式了。Bit 让单体仓库与多仓库优点相结合，开发者可以在任何应用中使用任何组件，且能单独追踪所有组件，解决了代码共享的问题。此外，Bit 也能自动管理依赖关系，为每个组件提供单独的构建和测试管道。

也就是说，Bit 鼓励开发者间的代码共享与协作的同时，也保证了所有组件的独立性，这可以说是构建可扩展前端应用程序的最佳方法之一了。

四、技术栈

构建可扩展应用的另一重要因素在于可靠技术栈的选择。我们应时刻关注我们应用程序的未来，并做好技术栈随着客户、架构或需求不断的变动而变化的准备。以下是可扩展的技术栈所应具备的一些主要特征：

• 持续更新

• 未来版本的实际路线图

• 社区支持

• 拥有第三方库和工具的良好生态系统

• 优秀文档

此外，组织上下应使用统一标准的技术栈，让开发者能够窥一斑而知全豹，快速熟悉组织内全部项目。在微前端中，标准的技术栈在改善开发者之间代码共享与协作方面有重要作用。但部分例外情况下，我们也需要跳出框架，为需要特殊技术的项目选择与组织及社区规范相左的技术栈。

此外，我们也需要仔细斟酌技术栈中的每个组件，确保其能互相兼容。通常情况下，前端技术栈主要包括框架、语言、样式处理器、测试、状态管理、构建工具，而在选择技术栈时开发者常优先考虑框架或语言。

举例来说，一个基于 React 的通用技术栈是由以下几项技术组成：

• React

• TypeScript

• Styled Components

• Jest

• Redux

• Prettier

• Webpack

五、组件模板

组件模板是现代前端应用程序的主要构成之一，不仅提高了代码的可复用性，也让开发者可以轻松扩展应用程序。以 eBay 这种线上销售平台为例，我们可以只用写一个组件来展示产品详情，并将其复用于项目中的全部产品展示。

但这也意味着我们应保持组件设计的一致性，才能让其兼容。不过，能用组件模板生成机制总是好的，总比手动创建要好。

React、Angular 以及 Vue.js 都有通过 CLI 支持组件模板，但如果你使用的框架不支持，Bit 这样的工具也可以让你用绝佳的标准为组件创建并维护可复用模板。

六、跨项目依赖

代码共享是现代前端应用中最常见的概念之一。尽管我们在向微前端架构方向转移以构建可扩展性更强的应用，开发者们仍在使用代码共享技术来增加代码的可复用性。

举例来说，我们可能会需要使用组织内其他微前端或应用中的组件，并将这个额外的微前端或项目添加到当前项目或微前端的依赖中。手动处理这些依赖关系可能会对应用的可扩展性造成负面影响，因此，我们可以使用如 Bit 之类的专业工具轻松连接依赖关系，自动处理依赖管理流程，追踪程序包及其他依赖关系，防止出现版本冲突问题。

七、构建与测试流程

软件测试确保了应用的正常运行。尤其是在修改代码后，我们需要在运行测试，验证代码行为及其对应用其他部分的影响后，才能构建并发布应用。

单元测试、E2E 测试、集成测试，这些都是前端开发中最常见的测试类型。对小型应用程序而言，修改代码后手动触发测试并构建应用程序并不困难，但随着应用的扩展，我们应将这一过程自动化，以避免瓶颈的出现。

依旧以微前端为例，我们需要单独维护每一个微前端的构建和测试管道，但手动监测上百个微前端却并不现实。在这类情况下，我们可以利用 GitHub Action 或 Azure Pipeline，在代码提交至代码库后自动触发测试和构建管道。

此外，像是 Bit 之类工具也能够通过维护组件图谱，仅重新构建受影响组件，在组件层级提供独立构建及测试管道，实现构建与测试流程自动化，赋予开发者在扩展前端应用程序时极大的灵活性。

八、后端通信

前后端的联系也是影响前端可扩展性的另一重要因素。举例来说，随着应用的扩展，在前端执行过多的处理进程会对性能与用户体验造成负面影响。因此，我们应尽量将大部分服务于客户端的计算工作放在后端，并仅将数据传回前端展示。

此外，BFF 之类的设计模式也可以将前端的逻辑转移至中间层，在不依赖后端的情况下，大大缩减前端的工作负荷。其中新增的中间层会与后端服务相调用，在计算完成后将格式化结果发送至前端，从而让开发者可以自由扩展前端而无需担心性能问题。

九、样式设计

样式设计也是前端开发中非常重要的一环。开发者们通过样式的设计为应用增添其独特风格，优化其展示形式。不过，随着应用的扩展，维持应用上下统一的格式可能也会变得颇具挑战。

举例来说，假设我们将应用程序组件从 10 扩展到 100，且需要在新创建的组件中保持相同的颜色、字体、边距、边框等等样式，可以想象，这件事不仅耗时长久且极易出错。

因此，基于组件的主题化在加上与逻辑解耦的样式对开发者们来说颇具吸引力。我们可以通过这类技术创建相同样式的组件并在项目中反复使用，唯一要更新的就是业务逻辑。

此外，我们也可以借助 Bit 之类工具使用组件创建更复杂的主题，下面的视频中展示了使用 Bit 及 React 的基于组件的主题构建。

十、开发者协作

在开发可扩展的应用程序时，我们也必须将开发者间的协作纳入考量之中。优秀的开发者协调可以避免重复性工作，提升团队生产力。如果一个开发团队拥有良好的协调性，那么引入新功能并扩展程序也将会变得轻松容易，避免了开发过程中的延误。

然而，更常出现的情况是，多名开发者必须在应用程序的同一块区域或组件上工作。这种情况下，开发者应对其他同事的开发工作有所了解，才能避免不必要的冲突。我们也可以使用版本控制技术来同步代码库，轻松处理代码冲突。

不过，我们也可以使用 Bit 及 Storybook 等工具，将开发人员的协作提升到另一层次。我们可以借助 Bit 创建一个协作范围，让团队成员在其中导入、导出、共享，以及修改组件。此外，Bit 也允许开发者在接受修改之前对组件代码审查并对比变更。

写在最后

在本文中，我分析了开发可扩展前端应用程序时需要考虑的十项基本领域，但前端应用的扩建并不仅限于此。我们可以不断探索新可能性，发现如 Bit 之类新工具，不断提升应用的可扩展性。

原文链接：

https://blog.bitsrc.io/scaling-frontend-applications-in-2023-e455aceff931

相关阅读：

企业架构治理指什么，如何做？

从 0 到 1 普及前端知识 | 内容合集

展望后端研发工程师的 2023：“后端难学”源于知识体系匮乏，面试时这三点是加分项

浅谈前端和后端的区别