前端架构选择
应用程序模型：架构决策指南
分析实际应用程序的特征是困难的。我们经常对我们在外面看到的应用程序进行概括，包括统计：“单页应用程序比多页应用程序慢"或"低TTL的应用程序加载速度快”。然而，这些概括对我们关心的性能和架构特征的适用程度各不相同。我相信这种可变性的主要决定因素之一是产品的特性和设计约束，根据应用程序的特性和约束对应用程序进行分类可以为每个应用程序面临的问题提供更有针对性和影响力的解决方案。
构建一组可以有效地将应用程序分组的命名类别是一个挑战：预测所有可能的组是困难的，并且每个设置的边界是主观的并且可能随着时间而改变。此外，像这样的抽象分组可能很难推理或可视化。例如，我们可以向“具有离线浏览和用户贡献的以页面为中心的厚客户端富媒体应用程序”的开发人员推荐哪些性能优化技术？
为了建立这个框架，我们可以构建一个完成的应用程序列表。这些既可以代表当今存在的网络，也可以基于我们预见的开发人员为响应趋势和平台计划而做出的变化。为了使事情变得更容易，代表网络长尾部分历史和遗留内容的全息图可以更通用，而代表当前和即将到来的应用程序的全息图可以更狭窄的范围，以允许更具体的建议。
认识正模
每个正模应用程序都附有一个粗略的类别名称，真实示例，特性和约束。基于架构，还提供了理想的实现和交付技术。
社交网络方向
正模：脸书
示例：LinkedIn，Reddit，
特征：多方面的，子应用程序，无限滚动内容，用户贡献，实时更新，通知
约束：扩展会话深度，大规模，实时更新，来自嵌入式内容的资源争用，嵌套应用程序，SEO
理想实现：带有预渲染外壳和登录页面的单页应用程序
理想交付：独立显示模型下的PWA。
社交媒体应用
正模：Instagram
示例：YouTube，Twitter
特征：富媒体，无限内容滚动，用户贡献，实时更新，通知，可嵌入式，嵌入内容
限制：扩展会话深度，实时更新，来自嵌入内容的资源争用，不间断媒体播放，SEO
理想实现：具有应用程序外壳预渲染和缓存的单页应用程序。
理想交付：独立显示模型下的PWA。
购物
正模：亚马逊
示例：淘宝，京东，拼多多
特性：搜索，支付，可发现性，过滤和排序
约束：浅到中等的会话深度，小交互，高购物车/结账下降，SEO
理想实现：服务器渲染具有CSR/SPA接管或turbolinks 式转换的站点。
理想交付：默认显示模式下的PWA。
内容网站
正模：CNN(美国有线电视新闻网)
示例：BBC，百度新闻，Engadget（关于消费电子产品的流行科技网志与播客）
特性：可发现性，富媒体，嵌入式内容
约束：浅会话深度(~1)，来自广告和多变量测试的资源争用，SEO
理想实施：具有turbolinks 样式转换的服务器渲染站点。
理想交付：默认显示模式下的PWA。
个人信息管理应用
正模：Gmail
示例：QQ邮箱，163邮箱
特性：胖客户端，无限列表，嵌入式内容，富文本编辑，清理，MDI，存储，离线和同步，通知
约束：延长会话长度，敏感且很大程度不可缓存数据，高安全风险，经常离线
理想实现：带有应用程序缓存的单页应用。
理想交付：独立显示模式下的PWA。
工具类应用
正模：飞书云文档
示例：腾讯文档
特性：胖客户端，富文本编辑，离线和同步，文件系统，剪贴板，存储，图像处理，嵌入内容
约束：延长会话长度和多个并发会话的青睐客户端实现。
理想实现：带有应用外壳缓存的单页应用，应用程序之间的卸载页面。
理想交付：独立显示模式下的PWA。
媒体播放器
正模：QQ音乐
示例：酷狗
特性：富媒体，胖客户端，无限内容滚动，过滤和排序，通知，操作系统集成，离线，可嵌入性
约束：延长会话长度，用户导航时必须继续播放
理想实现：具有应用程序外壳预渲染和缓存的单页应用程序。服务器渲染
理想交付：独立显示模式下的PWA。
图形编辑器
正模：Figma（向量图形编辑软件）
示例：AutoCAD，Photopea
特性：3D渲染和GPU，图像处理，全屏和指针捕获，MDI，存储，离线，文件系统，线程，wasm
约束：长会话长度，对输入和渲染延迟的敏感性，大对象/文件
理想实现：单页应用程序。将轻量级浏览UI与编辑器分开。
理想交付：独立显示模式下的PWA。
媒体编辑
正模：Soundtrap
示例：Looplabs
特性：音频处理，设备集成(midi,usb)，存储，离线，文件系统，线程，wasm
约束：长会话长度，低延迟DSP，低延迟媒体录制和播放，大文件/IO
理想实现：单页应用。将轻量级浏览UI与编辑器分开。
理想交付：独立显示模式下的PWA。
工程工具
正模：Codesandbox（在线代码编辑器）
示例：Codepen，Jupyter Notebook，RStudio
特性：厚客户端，MDI，存储，离线，文件系统，线程，嵌入式内容
约束：极长的会话长度，低延迟文本输入，大内存占用，自定义输入处理和文本渲染，预览内容的安全性
理想实现：单页应用程序，考虑将浏览UI与编辑器分开。
理想交付：独立显示模式下的PWA。
沉浸式/AAA游戏
正模：Stadia
特性：3D渲染和GPU，P2P，音频处理，全屏和指针捕获，存储，离线，文件系统，线程，设备集成(游戏手柄)，wasm
约束：长会话长度(高度交互),沉浸式，对输入和渲染延迟极其敏感，需要一致或阶梯式FPS,极端资产大小
理想实现：单页应用
理想交付：全屏显示模式下的PWA。
休闲游戏
正模：Robostorm
示例：斗地主，QQ农场
特性：2D和3D渲染和对GPU，P2P，音频处理，存储，离线，可嵌入性
约束：长会话长度，对输入和敏感渲染延迟，需要一致/步进的FPS
理想实现：单页应用
理想交付：嵌入另一个站点，或全屏显示模式下的PWA。