前端系统设计问题主要有两种：(1)应用和(2)用户界面组件。
如上所述，为前端系统设计面试设计应用软件与一般的软件工程系统设计面试感觉类似，事实上，问题也高度相似。 然而，与其谈论分布式系统，不如关注客户端，讨论应用架构和客户端实现细节。
在当今时代，许多网站都是交互式的丰富应用程序，几乎可以实现许多桌面应用程序所能实现的功能。 如果您在网页上使用 Gmail、Facebook、YouTube、Google Calender，您已经使用了 Web 应用程序。 Web 应用往往是动态的，Web 应用中的导航通常不需要刷新整个页面，而是使用 JavaScript 获取下一页的远程数据，并动态更改内容和 URL。 由于 Web 应用是涉及多个模块的复杂软件，我们在软件工程课程中学到的常见应用架构，如模型-视图-控制器（MVC）、模型-视图-视图模型（MVVM），在构建 Web 应用时也同样适用。 React 是 Facebook 最流行的 JavaScript 库之一，用于构建交互式 Web 应用程序，许多 React Web 应用程序采用基于 Flux/Redux 的单向架构。
不同的应用有其独特的方面和谈话要点。 您必须将重点放在申请材料的独特之处，而不要花太多时间谈论适用于所有问题的一般性内容。 首先，设计高层架构，确定系统中的组件以及组件之间的 API。 然后深入研究与问题相关的几个方面，以及如何实施或优化这些方面。
以下是前端系统设计面试中常见的应用问题列表，以及您应重点关注的领域：
| 应用 | 示例 | 重要领域 |
|---|---|---|
| 信息流 | Facebook, Twitter | 按钮交互， 动态内容分页方法， 消息/帖子编辑器 |
| 消息/聊天 | Messenger, Slack, Discord | 消息同步、实时聊天、消息列表、聊天列表 |
| 电子商务市场 | Amazon, eBay | 产品列表页, 产品详情页, 购物车, 结账 |
| 照片共享 | Instagram, Flickr, Google Photos | 照片浏览，照片编辑，照片上传 |
| 旅行预订 | Airbnb, Skyscanner | 搜索用户界面, 搜索结果, 预订用户界面 |
| 电子邮件客户端 | Outlook, Apple Mail, Gmail | 邮箱同步、邮箱 UI、邮件编辑器、 |
| 视频流媒体 | YouTube, Netflix, TikTok | 视频播放器, 视频流, 视频详情页, 推荐视频 |
| 协作应用 | 谷歌文档，谷歌表单，谷歌幻灯片，Notion | 实时协作，状态同步 |
| 作图 | Figma, Lucidchart | 渲染方法，客户端状态/数据模型 |
| 地图 | 谷歌/苹果地图，Foursquare City Guide | 地图渲染，显示位置 |
| 文件存储 | Google Drive, Dropbox | 文件上传，文件下载，文件浏览器 |
| 视频会议 | Zoom, Google Meet | 视频流，多种观看模式 |
| 拼车服务 | Uber, Lyft | 行程预订, 司机位置 |
| 音乐流媒体 | Spotify, Apple Music | 音乐播放器用户界面，播放列表用户界面 |
| 游戏 | Tetris, Snake | 游戏状态, 游戏循环, 游戏逻辑 |
在现代前端开发中，通常使用组件库来构建应用程序。 一些流行的组件库您可能已经使用过，包括 jQuery UI（多么老派！）、Bootstrap、Material UI、Chakra UI 等。
前端工程师需要能够构建应用程序所需的各种用户界面组件。 有些用户界面组件很容易构建（例如文本、按钮、徽章等），而其他组件则可能要复杂得多（自动完成、下拉、模态等）。 大多数情况下，如果您被要求设计一个用户界面组件，它将属于后一类。
首先确定组件的子组件（例如，对于一个图片传送带，有图片、分页按钮、缩略图），定义组件的对外 API（组件应该接受哪些选项/道具），描述组件的内部状态、子组件之间的 API（如果相关），然后深入到性能、可访问性、用户体验、安全性等相关的优化和考虑。
您可能需要为以下一个或多个目的编写少量代码：
<ImageCarouselimages={...}onPrev={...}onNext={...}layout="horizontal"><ImageCarouselImage style={...} /><ImageThumbnail onClick={...} /></ImageCarousel>
您肯定需要为组件的用户（开发人员）设计一种自定义组件外观的方法。 请参阅前端面试指导手册的用户界面组件 API 设计原则部分，了解不同方法的概述和比较。
在前端系统设计访谈中提出的用户界面组件示例：
既然您已经了解了前端系统设计面试中可能会问到的问题类型，那么该如何回答这些问题呢？ 我们提出了RADIO 框架，这是一种易于记忆的结构化方法，您可以用它来应对系统设计面试问题。