Qwik——后现代框架

Qwik介绍

现代框架面临着巨大的性能挑战，它们并不能满足公司的需求。

其中一些框架已经将性能作为其真正的效用，例如 Svelte，但它们都没有达到真正的预期，因为它们希望让 Web 应用程序在运行时更快，但没有人寻找问题的根源。

Qwik 采取了不同的方法，将重点从“做得更快”转移到“做得更少”。这是一个将改变游戏规则的关键区别。最终，最快的工具可能是执行（重复）工作最少的工具。

Qwik 是由 Angular 的创建者 Misko Hevery 与 Ionic 的创建者 Adam Bradley 和 Gin Framework 的创建者 Manu Almeida 合作创建的框架。

这些都是 Web 开发的先驱。我认为我们面对的不仅仅是另一个 JavaScript 框架。或许我们应该为一个即将改变范式的新框架做好准备。

为什么选择 Qwik？

Qwik 的目标很明确：实现顶级性能、完美无瑕、零 JavaScript 和纯 HTML。是的，我们做到了。现在是时候了。Qwik 正在努力超越其他框架，并且已经取得了成功。

最后一个引入新概念的框架是 Astro，它引入了部分水合，这是 JavaScript 框架的一场革命。

例如，如果我们有一个以不需要 javascript 的文本开头的页面，我们就不会加载任何内容，但是如果我们向下滚动到需要 javascript 进行交互的组件，我们就会使用所需的 javascript 来填充页面。

Qwik 杀死了游戏，没有部分水合，但在第一次加载时水合为零，javascript 为 0。

例如，如果我们在页面底部有一个表单联系人，Angular、React 或 VueJS 将在第一次加载时加载所需的 javascript，Astro 将在我们向下滚动时加载它，Qwik 仅在我们单击表单的发送按钮时才会加载它，它不是在我们面前有表单时加载 javascript，而是在我们与其交互时加载。

Qwik 关键概念

Qwik，HTML 优先框架的理念很明确：尽可能快地实现交互（无需做任何事情，就能更快地完成任务）。

该框架尽可能延迟 JavaScript 的调用，只在绝对需要的时候才调用。重点在于首次加载。

因此，它只加载纯 HTML。为了实现这一点，Qwik 基于一个重要的概念。在本段中，我们将深入探讨它。

可恢复性

如今，现代框架竞相提升数据融合能力。Qwik 的独特之处在于其可恢复性。

这个概念的名称让我们了解了我们正在谈论的内容，“停止/恢复”，从服务器停止的地方恢复应用程序，而不是重新执行所有工作。

序列化事件处理程序是停止和恢复应用程序的关键。但这并非新鲜事，我们之前就通过 jQuery 实现过。

例如，使用纯 JavaScript。Qwik 的不同之处在于，使用 Qwik 就像使用 React 一样，它采用了现代 DX。

如果我们深入思考上图，就能理解卷轴问题，也就是缩放问题。如果我们有一个庞大的 Web 应用程序，使用 Hydration 加载会花费大量时间。

即使采用部分水合，扩展仍将面临挑战，具有可恢复性的 Qwik 仅加载 HTML，这不需要花费太多时间。

只需一瞬间，您的应用程序就已加载到浏览器中。

预取

准确地说，Qwik 不会仅在您单击时下载每个文件，而是在第一次加载以显示页面（即交互式）之后，框架将开始使用服务工作者自动下载 Web 应用程序所需的代码，并将其存储在浏览器的缓存中，因此我们不会每次都向服务器发送请求，但它会立即从缓存中获取它，如果代码尚未下载，它将从服务器下载，这就是我们所说的预取。

因此，当我们说“加载 JavaScript”时，我们指的是从缓存中获取 JavaScript 代码，并仅在需要时执行。其他框架会在第一次加载时下载并执行 JavaScript 代码，这会导致很多性能问题。Qwik 从第一次加载开始即可进行交互，无需等待所有 JavaScript 代码下载完毕。

Qwik城市

2022 年 5 月 1 日，Hevery 在播客中表示，他们的目标是构建一个路由器，既能提供 MPA（多页面应用程序）路由的功能，又能兼具 SPA（单页面应用程序）路由的优势。换句话说，无需刷新页面即可进行 MPA 路由。

只渲染需要刷新的部分。这听起来可能像天方夜谭，但实际上已经有人做到了，他们做到了，它的名字叫 Qwik City。

所以 Qwik 是服务器端渲染和客户端渲染的混合体，它充分利用了两者的优势。

Qwik City 是专为 Qwik 设计的元框架，就像 Next.js 之于 React.js 一样。Qwik City 中的路由非常简单，它基于路由目录中的目录结构。

src/

└── routes/

    └── some/

        └── path/

            └── index.tsx       <https://example.com/some/path>

借助我们的 0 JavaScript 元框架，应用程序无需任何 Qwik City 专用的 JavaScript 即可加载，但其功能远不止于此。它还提供：

• 基于目录的路由
• 嵌套布局
• 基于文件的菜单
• 面包屑
• 支持使用 .tsx 或 .mdx 文件格式创作内容
• 数据端点

结论

现代框架下载所有 javascript，然后执行所有 javascript。

Qwik 会下载一些 JavaScript 代码，但直到我们需要时才会执行。这个框架正在改变我们的思维模型。

我们认为 Qwik 将成为 JS 框架中的先驱之一。它提升了启动性能，这在现代框架中是一个真正的问题，但 Qwik 却解决了这个问题。

让我们展望未来，敬请期待，因为这是我们关于该框架的第一篇文章，当然也不会是最后一篇。在接下来的文章中，我们将深入探讨核心概念，并提供一些构建 Qwik 应用程序的示例。

本文已由 Havery Misko 先生（Angular 和 Qwik 的创建者）审阅，我们非常感谢他的贡献。

原始文章链接。