本文翻译自Jason Miller的博客文章Application Holotypes。
分析现实世界中的应用程序的特征很困难。我们经常看到有人对应用程序做出概括，既有漫不经心的，也有经过数据统计的：“单页应用程序比多页应用程序慢”或“TTI 低的应用程序加载速度更快”。然而，这些概括对于我们关心的应用程序的性能和架构特征都不太准确。我认为主要决定因素之一是产品的功能和设计约束，根据应用程序的功能和约束对其进行分类可以为每个应用程序面临的问题提供更有针对性和更有效的解决方案。
构建一组类别，以便有效地将应用程序分组是一种挑战：很难预测所有可能的组，每个组设定的边界都是主观的，可能会随着时间的推移而改变。此外，像这样的抽象分组可能很难推理或可视化。例如，我们可以向“胖客户端、以页面为中心的富媒体应用程序，具有离线浏览和用户生成内容的功能”的开发人员推荐哪些性能优化技术？如果转而问的是我们可以向“类似Instagram的应用程序”的开发人员推荐什么，这种讨论就更具体化、更容易进行了。
为了建立这种讨论框架，我们可以构建一个典型应用程序列表。这些应用程序既可以代表当今的网络，也可以基于我们预见到的开发人员为响应未来趋势和平台计划而做出的改变。为了方便起见，代表Web的长尾历史和遗留内容的部分典型应用程序更加通用，而代表当前和即将推出的部分典型应用程序可以更狭窄地限定讨论范围，以便提供更具体的建议。
每个典型应用程序都附有粗略的类别名称、额外的真实案例以及定义其架构的特征和约束。我还根据其架构提供了理想的部署实施和交付技术。
社交网络应用
- 典型：Facebook
- 其他案例：LinkedIn、Reddit、Google+
- 特点：多面性、子应用程序、无限滚动内容、用户生成内容、实时更新、通知
- 限制：过深的会话深度、大规模、实时更新、嵌入式内容的资源争用、嵌套应用程序、SEO
- 理想实现方式：具有外壳和登录页面预渲染的单页应用程序。
- 理想交付方式：独立显示模式下的 PWA。或TWA。
社交媒体应用
- 典型：Instagram
- 其他案例：Youtube、Twitter
- 特点：富媒体、无限滚动内容、用户生成内容、实时更新、通知、可嵌入性、嵌入式内容
- 限制：扩展会话深度、实时更新、嵌入式内容的资源争用、不间断媒体播放、SEO
- 理想实现方式：具有应用程序外壳预渲染和缓存的单页应用程序。
- 理想交付方式：独立显示模式下的 PWA。
店面应用
- 典型：亚马逊
- 其他案例：百思买、新蛋、Shopify（基于商店）
- 特点：搜索、支付、可发现性、过滤和排序 限制：浅到中等会话深度、小交互、高购物车/结帐流失率、SEO
- 理想实现方式：具有 CSR/SPA 接管或 turbolinks 样式转换的服务器呈现站点。
- 理想交付方式：默认显示模式下的 PWA。
内容网站
- 典型：CNN
- 其他案例：FT、BBC、BuzzFeed、Engadget、Salon、Smashing Magazine、The Onion
- 特点：可发现性、富媒体、嵌入式内容 限制：浅会话深度（~1）、广告和多变量测试的资源争用、SEO
- 理想实现方式：具有轮播图风格过渡效果的服务器端渲染网站。
- 理想交付方式：默认显示模式下的 PWA。
PIM应用
- 典型：Gmail
- 其他案例：Google 日历、Outlook.com、Fastmail
- 特点：胖客户端、无限列表、嵌入式内容、富文本编辑、清理、MDI、存储、离线和同步、通知
- 限制：延长会话长度、敏感且大量不可缓存的数据、高安全风险、经常离线
- 理想实现方式：具有应用程序外壳缓存的单页应用程序。
- 理想交付方式：独立显示模式下的 PWA。
生产力工具
- 典型：Google Docs
- 其他案例：Office.com、Zoho、Dropbox、Box
- 特点：胖客户端、富文本编辑、离线和同步、文件系统、剪贴板、存储、图像处理、嵌入式内容
- 限制：延长会话长度和多个并发会话有利于客户端实现。
- 理想实现方式：单页应用程序。考虑应用程序前端缓存。
- 理想交付方式：独立显示模式下的 PWA。
媒体播放器
- 典型：Spotify
- 其他案例：Youtube Music、Google Play Music、Tidal、Soundcloud、Pandora、Deezer
- 特点：富媒体、胖客户端、无限滚动内容、过滤和排序、通知、操作系统集成、离线、可嵌入性
- 限制：延长会话长度，用户浏览其他页面时必须继续播放。
- 理想实现方式：具有应用程序前端预渲染和缓存的单页应用程序。服务器渲染 <head> 以SEO友好。
- 理想交付方式：独立显示模式下的 PWA。
图形编辑器
- 典型：Figma
- 其他案例：AutoCAD、Tinkercad、Photopea、Polarr
- 特点：3D 渲染和 GPU、图像处理、全屏和指针捕获、MDI、存储、离线、文件系统、线程、wasm
- 限制：会话长度长、对输入和渲染延迟的敏感性、大对象/文件
- 理想实现方式：单页应用。将更轻量的浏览 UI 与编辑器分开。
- 理想交付方式：独立显示模式下的 PWA。
媒体编辑器
- 典型：Soundtrap
- 其他案例：Looplabs
- 特点：音频处理、设备集成（midi、usb）、存储、离线、文件系统、线程、wasm
- 限制：长会话长度、低延迟 DSP、低延迟媒体录制和播放、大文件大小/IO
- 理想实现方式：单页应用。将更轻量的浏览 UI 与编辑器分开。
- 理想交付方式：独立显示模式下的 PWA。
工程工具
- 典型：Codesandbox
- 其他案例：Codepen、Jupyter Notebook、RStudio、StackBlitz
- 特点：胖客户端、MDI、存储、离线、文件系统、线程、嵌入式内容
- 限制：极长的会话长度、低延迟文本输入、大内存占用、自定义输入处理和文本渲染、预览内容的安全性
- 理想实现方式：单页应用。考虑将浏览 UI 与编辑器分开。
- 理想交付方式：独立显示模式下的 PWA。
沉浸式/AAA游戏
- 典型：Stadia
- 其他案例：Heraclos、Duelyst、OUIGO 特点：3D 渲染和 GPU、P2P、音频处理、全屏和指针捕获、存储、离线、文件系统、线程、设备集成（游戏手柄）、wasm
- 限制：会话长度长（高度交互）、沉浸感、对输入和渲染延迟极其敏感、需要一致或分步的 FPS、极端的资产大小
- 理想实现方式：单页应用
- 理想交付：全屏显示模式下的 PWA。
休闲游戏
- 典型：Robostorm
- 其他案例：Tank Off、War Brokers、GoreScript、Air Wars、”.io games”
- 特点：2D 和 3D 渲染和 GPU、P2P、音频处理、存储、离线、可嵌入性
- 限制：会话长度长、对输入和渲染延迟敏感、需要一致/分步 FPS
- 理想实现方式：单页应用
- 理想交付方式：嵌入另一个站点，或全屏显示模式下的 PWA。