前端系统设计问题主要有两种：(1) 应用程序和 (2) UI 组件。
应用程序
如上所述，为前端系统设计面试设计应用程序将类似于一般的软件工程系统设计面试，事实上，这些问题非常相似。但是，您应该专注于客户端，讨论应用程序架构和客户端实现细节，而不是讨论分布式系统。
当今时代，许多网站都是交互式和丰富的应用程序，几乎可以做许多桌面应用程序可以做的事情。 如果您在网络上使用过 Gmail、Facebook、YouTube、ChatGPT 或 Google 日历，那么您就使用过 Web 应用程序。 Web 应用程序往往具有交互性和动态性（页面上的内容经常变化），并且 Web 应用程序中的页面导航通常不需要完全刷新页面； 应用程序使用 JavaScript 获取下一页的远程数据，并动态更改内容和 URL。
由于 Web 应用程序是涉及多个模块的复杂软件，因此在软件工程课程中学习的常见应用程序架构（如模型-视图-控制器 (MVC)、模型-视图-视图模型 (MVVM)）也适用于构建 Web 应用程序。 React 是 Facebook 用于构建交互式 Web 应用程序的最流行的 JavaScript 库之一，许多 React Web 应用程序都采用基于单向 Flux/Redux 的架构。
不同的应用程序有其独特的方面和讨论要点。 重要的是，您要专注于应用程序特有的部分，而不是花太多时间讨论适用于所有问题的通用内容。 首先，设计高级架构，确定系统中的组件以及组件之间的 API。 然后深入研究几个对问题有趣/独特且如何实现或优化它们的领域。
示例
以下是前端系统设计面试中常问的应用程序问题列表以及您应该关注的领域：
| 应用程序 | 示例 | 重要领域 |
|---|---|---|
| 新闻提要 | Facebook、Twitter | 提要交互、提要分页方法、帖子撰写器 |
| 消息/聊天 | Messenger、Slack、Discord | 实时聊天、消息同步、消息列表、聊天列表 |
| 电子商务市场 | 亚马逊、eBay | 产品列表页面、产品详细信息页面、购物车、结帐 |
| 照片共享 | Instagram、Flickr、Google Photos | 照片浏览、照片编辑、照片上传 |
| 旅行预订 | Airbnb、Skyscanner | 搜索 UI、搜索结果、预订 UI |
| 视频流 | Netflix、YouTube | 视频播放器、视频流、推荐视频 |
| Masonry 布局实现和媒体提要优化 | ||
| 协作应用程序 | Google Docs、Google Sheets、Google Slides、Notion | 实时协作协议、冲突解决、状态同步 |
| 电子邮件客户端 | Outlook、Apple Mail、Gmail | 邮箱同步、邮箱 UI、电子邮件撰写器 |
| 绘图 | Figma、Excalidraw、Canva | 渲染方法、客户端状态/数据模型、状态管理 |
| 地图 | Google/Apple Maps、Foursquare City Guide | 地图渲染、显示位置 |
| 文件存储 | Google Drive、Dropbox | 文件上传、文件下载、文件资源管理器 |
| 视频会议 | Zoom、Google Meet | 视频流、各种观看模式 |
| 乘车共享 | Uber、Lyft | 行程预订、司机位置、应用程序状态 |
| 音乐流 | Spotify、Apple Music | 音频流、音乐播放器 UI、播放列表 UI |
| 游戏 | 俄罗斯方块、贪吃蛇 | 游戏状态、游戏循环、游戏逻辑 |
UI 组件
在现代前端开发中，使用组件库来构建应用程序是很常见的。您可能以前使用过的一些流行的组件库包括 jQuery UI（多么老派！）、Bootstrap、Material UI、Chakra UI 等。
前端工程师应该能够构建应用程序所需的各种 UI 组件。一些 UI 组件可能很容易构建（例如文本、按钮、徽章等），而另一些则可能更复杂（自动完成、下拉菜单、模态框等）。大多数情况下，如果您被要求设计一个 UI 组件，它将来自后一类。
首先确定组件的子组件（例如，对于图像轮播，有图像、分页按钮、缩略图），定义组件的面向外部的 API（组件应该接受哪些选项/属性），描述内部组件状态，子组件之间的 API（如果相关），然后深入研究性能、可访问性、用户体验、安全性等方面的优化和考虑。
您可能需要为以下一个或多个目的编写少量代码：
- 描述组件层次结构
- 描述组件状态的形状
- 解释组件内的一些非平凡逻辑
<ImageCarouselimages={...}onPrev={...}onNext={...}layout="horizontal"><ImageCarouselImage style={...} /><ImageThumbnail onClick={...} /></ImageCarousel>
自定义主题
您肯定会被期望设计一种方式，让组件的用户（开发人员）自定义组件的外观。请参阅 前端面试指南的 UI 组件 API 设计原则部分，以了解不同方法的概述和比较。
示例
前端系统设计面试中会问到的 UI 组件示例：
- 设计一个 自动完成组件
- 设计一个 下拉菜单组件
- 设计一个 可嵌入的轮询小部件
- 设计一个 图片轮播
- 设计一个 模态组件
- 设计一个 富文本编辑器
- 设计一个带有排序和分页的数据表
- 设计一个日期选择器
- 设计一个多选组件
面试期间该做什么？
既然您已经了解了在前端系统设计面试中可能被问到的问题，那么您应该如何回答呢？我们提出了 RADIO 框架，这是一种易于记忆的结构化方法，您可以使用它来应对前端系统设计面试问题。