前端开发人员的系统设计指南

目录：

• 为什么要进行 FE 系统设计

• 面试官寻找什么

• 重要主题

• 用户界面/用户体验

• 框架和技术选择

• 例子

• 战略

为什么要对前端进行系统设计？

前端日益复杂，后端和前端之间的界限正在逐渐模糊。此外，前端开发人员也应该参与项目的设计决策。如果后端/API开发人员忽略了设计中的任何重要方面，前端开发人员应该在设计会议上提出。

面试官在寻找什么？

作为前端开发人员，您是否了解

• 应用程序应该如何进行E2E设计？

• 任何应用程序的重要部分是什么？

• 您是否了解哪种资源最合适以及原因

• 你是否了解设计决策的利弊

• 您是否了解后端/API 人员需要做什么才能使您的前端

• 您是否了解设计应用程序的成本（价格）以及如何优化它？

• 你能设计一个微服务吗

• 你能设计微前端吗

• 如何创建可扩展的存储库

有哪些重要议题？

• 数据库

• CDN

• 蜜蜂

• 存储 - S3、EC2、EBS

• 部署

• 53号公路

• 证书

• 分析

• 监控

• 日志

• 数据恢复

• 表现

• 可访问性

• 跨浏览器

• SPoF（单点故障）

• 可扩展

• 安全

• 微前端

• 搜索引擎优化

• 可靠性

• 可维护性

UI/UX 是系统设计的一部分吗？如果是，那么应该讨论什么？

是的，作为前端开发者，你应该讨论 UI/UX。谈谈 UX 是什么样的？

重要的是要谈论

• 性能：你的设计决策将如何提高性能
• 可访问性：当您谈论 UI 和 UX 时就会出现这一点。
• 跨浏览器：如果任何技术决策将影响任何浏览器（请指出）
• SPoF：单点故障：如何避免
• 可扩展性：您的解决方案的可扩展性如何
• 安全：最重要的方面，如何保障安全
• 数据状态：如何保持移动端和桌面端的数据一致性

我们可以讨论框架选择和技术选择吗？

是的，谈论它很重要。但你的所有决定都不应该基于你所了解的框架。你应该专注于解决方案，而不是基于你所了解的框架。

而且，这是面试的一个重要方面。所以，你应该充分了解你所做的所有技术决策的利弊。

例如：为什么选择非关系型数据库而不是关系型数据库？为什么是 EC2 而不是 Lambda 函数？ReactJS 与 Angular 的比较？SSR 与 CSR 的比较等等。

应该深入到什么程度？

• 首先，专注于解决问题（而不是最佳解决方案）。
• 然后专注于优化解决方案。讨论最佳解决方案及其原因（优缺点，哪些方面会受到影响？例如：性能会提升，避免 SPoF 等）。
• 现在，深入研究与前端相关的模块。例如：讨论 API 端点、缓存或本地存储或数据库、哪个数据库、Web 应用的部署和存储。
• 面试官会在你提问时打断你。给他们时间和空间来提问。

例子

您需要设计一个聊天应用程序。

• 一个用户可以与多个用户进行多次聊天
• 可以将用户添加到组
• 用户可以在聊天中使用表情符号做出反应
• 用户可以 1:1 回复聊天
• 还有一些其他要求

步骤1： 定义范围：

• 我们预计有多少用户？
• 可以同时进行多少个聊天？
• 聊天记录要保存多久？
• 要使用哪些表情符号？它们的功能是什么？例如：切换，或者如何查看它们，我们是否需要在聊天历史记录中保留它们等等。
• 我们支持多用户聊天吗？
• 通过数字来了解可扩展性、性能、所需资源等。

结果：你应该意识到问题的范围和规模

第 2 步： 思考解决方案、功能和资源

• 从网络或移动设备开始（您觉得舒服的方式或根据面试官的要求）
• 我们在这里要解决什么问题？你不可能一下子解决所有问题。所以，先想出最重要的2-3个问题，然后开始专注于它们。
• 考虑用于构建可用系统所需的资源

结果：你应该清楚 2-3 个最重要的要求以及你需要哪些资源

步骤 3： 让我们从高级设计（前端 + 后端）开始

• 网络互动
• 端点
• 数据库
• 验证
• 贮存

结果：您应该有一个可用的工作设计来解决最重要的 2-3 个问题。

步骤 4： 深入研究并优化

问题：如果用户离线一个月，会发生什么？你会如何设计用户体验？（谈谈用户体验 (UX) 和用户界面 (UI)）

• 可访问性
• 表现
• 可扩展性
• 如何扩展设计
• 如何检索旧聊天记录
• API设计等

结果：问题的优化设计，具有明确的优点和缺点。

战略：

• 系统设计周期约为 60 分钟。
  • 5分钟分享问题陈述
  • 40分钟解答问题
  • 5 分钟问答时间。

你必须练习，确保在40分钟内完成所有事情。面试前尽可能多地练习。你可以使用白板、纸或任何应用程序，例如draw.io。

• 让你的40分钟充满互动。保持大声说话和思考。大声说出你的想法以及原因很重要。
• 没有正确或错误的答案。系统设计的关键在于了解你和你的设计决策能力。
• 作为一名前端开发者，涉及的范围非常广泛。所以，最好先谈谈范围。问问自己：你希望我专注于哪些方面？例如：我是否应该跳过前端开发（FE）部分的细节，直接深入研究后端、基础设施或部署等？
• 深入了解模块和用户旅程的连接细节。例如：用户数据存储在哪里？使用哪个 API 端点获取数据？如果用户数量从 10 倍增加到 100 倍，用户数据存储的可扩展性如何？

学习愉快！！

你可以在Twitter上关注我