Web 应用程序——我的心理备忘单

介绍

本文是“持续交付：HTML 到 Kubernetes”的一部分。

虽然我迫不及待地想深入了解分布式系统的细节，但我发现自己处于一个不愉快的境地：我认为最好从前端开始写。

那是因为网络应用程序是当今的标准。在多个云中部署的 ArgoCD-Kubernetes 集群中有多少 3000 个微服务并不重要；如果用户不能或不会使用您的产品，那么这些都无关紧要。

为什么在浏览器中

说在浏览器中交付软件越来越受欢迎是不公平的。哎呀，现在或多或少是一切的默认设置。

好吧，这是一个极端的例子。尽管如此，即使我们仍然开玩笑说 JS 的世界每周都在变化，但 Web 应用程序已经越来越受欢迎。尽管Javascript 的生态系统是最先进的，但我们可以说。

所以现在默认是通过互联网交付软件，在跨平台运行的一切银弹上存钱browser。

强大的力量带来巨大的复杂性

但这到底是什么意思？

像维基百科这样的“简单站点”和可以“安装”在您的手机上甚至可以向您发送通知的成熟网络应用程序之间有什么区别？

或者您可以在没有活动的互联网连接时与之交互的应用程序？

服务器端渲染或客户端渲染有何不同？

它是普通的静态 html 吗？或者它是由服务器生成并刚刚返回的？

当您在同一网站内更改页面时，浏览器是否会闪烁？

当您从 Web 应用程序内部访问相同的 URL 与您在浏览器的 URL 栏中点击 Enter 时，它的行为是否相同？

我们可以用 SSR 做 PWA……就做吧，对吧？正确的？！

很多问题，很多选择。这是我的心智模型——它可以作为“WebApps——相关的复杂性和何时使用备忘单”。

您在表中看到的“总体复杂性”是我认为构建、维护、发展、测试和交付此类应用程序的复杂性的总和。不仅是前 3 个月或 6 个月 - 但及时：

当需求改变时

当常青浏览器获得更新时

当图书馆停止使用常青浏览器时

当您需要更新所述库时

当安全补丁

当 X

当Y

什么时候…

这个清单可以继续下去。

我认为没有理由（也许除了 CV 膨胀）为需要实时数据的管理界面创建具有离线功能的 PWA。这只是一个例子。

虽然每种类型的应用程序都有不同的优缺点，但我认为有必要研究一下交付应用程序的复杂程度以及它可以做什么。相对于它应该做什么。

请注意，我的列表是建立在自身之上的：最简单的“网络应用程序”是一个静态 HTML 文件，而最复杂的是一个成熟的 PWA。
WASM 本身就是一头野兽 - 此处不详述。

静态HTML

我名单上的第一个是经典static HTML。这就是网络的起源：html当用户点击URL.

这个过程非常简单：

用户site.com在浏览器中输入他/她的 URL 栏。浏览器（经过一些DNS乐趣）将向服务器发出请求。

服务器接收请求，处理它，并返回一个响应：html文件。

浏览器接收html文件，甚至可能请求初始文件中引用的其他 ( css, )。js它读取整个文件并显示内容。

用户在浏览器中看到信息。简单，优雅，美丽。

在幕后，编写文件并将文件传送到服务器的开发人员如下所示：

开发过程也很简单：只需编写您的html, css,js文件，将它们“链接”在一起，然后部署到您的服务器。不需要花哨的 IDE，也不需要编译。

✅优点：易于开发，无需工具，加载速度快，兼容所有浏览器

⚠️ 我正在考虑js 轻或不存在。对于 js 密集型站点，请看我对SPA的定义。

❌缺点：没有代码可重用性（对于页眉、页脚等内容），用户不可知（为每个人显示相同的数据）。

❗ 如果你想让 js 和 css 在任何地方都一样工作，那么跨浏览器就不是那么兼容了:)

静态站点生成器

对于诸如代码可重用性之类的普通内容static HTML不足的事情，静态站点生成器可以节省时间。

❗注意事项：开发人员在能够交付网站之前需要额外的构建步骤。

虽然请求处理看起来与以下相同static HTML：

开发过程需要一个额外的步骤：

虽然这不是最复杂的场景，但仍然值得注意的是，现在浏览器的简单刷新不会让开发人员看到最终结果。不是没有带有热重载的本地服务器或通过手动运行构建。

✅优点：加载速度快，并且在静态内容工作负载的可重用性方面具有可扩展性。

❌缺点：用户不可知，在部署站点之前需要额外的构建步骤（与相比）。static html

服务器生成的 HTML

那些需要身份验证的网站呢？并显示登录用户的信息？

纯粹的static html还是static site generators不会再削减它了。

我们现在正在转向“真实世界”的网络功能，server不再只是一个愚蠢的内容交付机制。Server现在指的是一台成熟的机器，它也能够处理请求。

（单击此处以获得更高质量的视觉效果）

从用户的角度来看，这与静态网站的过程完全相同。但是，对实际发生的事情的更完整描述是这样的：

用户site.com在浏览器中输入他/她的 URL 栏。浏览器（经过一些DNS乐趣）将向服务器发出请求。

server正在侦听连接，收到新请求。

[可选] 根据应用程序的逻辑，它可能会调用其他服务：数据库、电子邮件、身份验证等。

服务器将所需信息传递给templating engine，后者将templates（由开发人员定义）+ variables（由）“传入” server=> 转换为html文件。

浏览器接收html文件，甚至可能请求初始文件中引用的其他 ( css, )。js它读取整个文件并显示内容。

用户在浏览器中看到信息，却不知道幕后发生了什么。

比静态网站更强大——但也更昂贵。它需要比简单的仅内容交付服务器更多的资源。它在开发成本方面也更昂贵：虽然static htmland evenstatic site generators的唯一要求是理解html，但“知识栏”现在更高了。

（单击此处以获得更高质量的视觉效果）

您现在需要一个local dev server，这样您就可以有一个反馈循环并测试您的更改。理想情况下，它保持同步并像生产一样工作。这增加了大量的复杂性。

构建步骤可能看起来类似于静态站点生成器中的步骤，因为您仍然需要在部署过程中复制一堆文件；但是，对于某些服务器端语言，还有一个额外的编译步骤。

为监听请求的守护程序添加配置 - 恭喜，您现在有一个复杂的设置需要维护。

✅优点：可重用性（由于模板引擎，类似于静态站点生成器），可以返回用户个性化响应。

❌缺点：在开发-部署-维护方面比静态响应复杂得多，每次都需要额外的资源来处理请求。

单页应用

对于server-side generated html，对于每个请求，服务器需要做额外的工作来处理它并返回html将由浏览器呈现的整个内容。这意味着服务器上的额外工作加上html通过（可能不可靠/缓慢的）网络发送的巨大响应（整个标记）。最糟糕的是，当浏览器加载新页面时，用户会看到一个空白页面。

（单击此处以获得更高质量的视觉效果）

如果我们能够解决所有这些问题并减少：

用户需要等待页面加载的时间（不适用于首页加载，这实际上可能更慢）

服务器上的负载 - 通过删除模板并仅返回dynamic部分数据

通过网络发送的有效负载的大小

部署量子的大小

这就是 SPA 发挥作用并解决上述所有问题的地方：

（单击此处以获得更高质量的视觉效果）

但是，这不是免费的。我们得到了额外的复杂性：当然是在开发时间，但是，我们现在也必须开始考虑对请求处理的影响。

让我们看看一个普通的 SPA 是如何加载并能够处理请求和显示数据的：

（单击此处以获得更高质量的视觉效果）

爱丽丝site.com在浏览器中输入她的 URL 栏。浏览器（经过一些DNS乐趣）将向服务器发出请求。

服务器接收请求，处理它，并返回一个响应：html文件。

在这种情况下，html将服务器返回的初始文件视为空壳是安全的。它通常是一个空白页面，其中包含一个空 div元素，将由实际应用程序使用。

该html文件引用了应用程序代码，因此浏览器将对该文件发出新的请求app.js。

浏览器接收并开始处理文件js。根据它的大小，可能需要一段时间……

直到现在我们才有了一个由浏览器加载和运行的 SPA。它可能会给爱丽丝一个线索，表明它开始为她做一些工作（在这种情况下，收集显示她的名字所需的信息）。

Client-side hydration：然后应用程序将异步调用API server（可能与服务于静态文件的调用相同，就我们所关心的而言）。

当它返回信息（“Alice”）时，浏览器可以隐藏加载指示器并呈现页面。

Alice 现在可以与加载的应用程序交互。

一些注意事项：

仅当 Alice首次进入该应用程序时才需要完成步骤 1 至 6 。
dumb content-delivery server 为了清楚起见，我在和之间做了明确的区分API server - 没有什么可以阻止您设置服务器来提供静态内容和响应 API 请求。
❗ 并非所有 SPA 的工作方式都相同 - 虽然此示例涵盖了正在完成的大量工作，但它绝不是 SPA 中发生的事情的完整和准确的示例：仅仅因为它取决于SPA 的实施方式。更不用说浏览器缓存，app.js 可以拆分的事实等。

现在，对于开发和部署过程，事情也变得棘手了：

（单击此处以获得更高质量的视觉效果）

对于本地开发流程，最有可能处理前端和内容交付 server，以及由所选框架和设置构建的系统。

以防万一我对额外的复杂性不够清楚：已经有一个构建步骤用于在开发人员编辑的文件和浏览器显示的文件之间建立反馈循环的简单过程。

最重要的是，通常需要额外API server的，以便开发人员可以获得 SPA 的数据。

可能仍在本地设置中，也可能不在。事实仍然是，它有点必要，而且要维护是另一回事。

哦，还有更多！由于您是在中工作，local development server因此可能只需要额外的配置以便它们一起工作。有趣，对吧？