欢迎来到Qwik的世界

_大猛_
1,646 阅读8分钟

欢迎来到Qwik的世界

Qwik 是一种新型 Web 框架，可以提供任何大小或复杂性的即时加载 Web 应用程序。您的网站和应用程序可以使用大约 1kb 的 JS（无论应用程序复杂性如何）启动，并在规模上实现一致的性能。

开始使用

先决条件

  • node.js v16 或更高版本
  • 你最喜欢的 IDE（推荐使用 vscode）
  • 开始思考qwik

使用 CLI 创建应用程序

第一步是创建一个应用程序。 Qwik 带有一个 CLI，允许您创建应用程序的基本工作框架。我们将使用 CLI 创建一个空白启动器，以便您快速熟悉它。

在您的 shell 中运行 Qwik CLI

npm create qwik@latest

CLI 将引导您通过交互式菜单设置项目名称并选择其中一个启动器，创建新应用后，您将在终端中看到如下输出：

💫 Let's create a Qwik app 💫

✔ Project name … qwik-app
✔ Select a starter › Basic

🦄  Success!  Project created in portfolio directory

🐰 Next steps:
   cd qwik-app
   npm install
   npm start

💬 Questions? Start the conversation at:
   https://qwik.builder.io/chat
   https://twitter.com/QwikDev

📺 Presentations, Podcasts and Videos:
   https://qwik.builder.io/media/

此时，您将拥有包含启动应用程序的 qwik-app 目录。

运行，开发

  1. 切换到 npm create qwik@latest 创建的目录。

    cd qwik-app

  2. 安装 NPM 模块：

    npm install

  3. 调用开发服务器

    npm start

  4. 您应该会看到与您创建的应用程序一起运行的服务器

    VITE v3.1.1  ready in 140 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose

  5. 访问 http://localhost:5174/ 以浏览该应用程序。

其它命令

这里有一些有用的命令可以帮助您入门。如需完整列表，请参阅 package.json。

  • npm start：npm run dev 的别名（当前默认为运行 SSR）
  • npm run preview：构建并启动预览服务器。
  • npm run build：为生产环境构建应用程序。
  • npm run qwik add：选择要添加的集成。

思考

Qwik 在高层次上与其他 Web 框架非常相似。 Qwik 是一个框架，它呈现一个组件树，从而产生一个交互式应用程序。

Qwik 的独特之处不在于它做了什么，而在于它如何实现其目标。 Qwik 的目标是提供即时应用程序，即使在移动设备上也是如此。 Qwik 通过两个主要策略实现了这一点：

  • 尽可能长时间地延迟 JavaScript 的执行和下载。
  • 在服务器端序列化应用程序和框架的执行状态，在客户端恢复。

Qwik 的目标是只需下载和执行最低限度的应用程序。

核心原则

尽可能延迟 JavaScript 的执行。

Qwik 应用程序启动速度很快，因为要执行的 JavaScript 代码量最少。 （在最简单的情况下，Qwik 应用程序只需要大约 1KB 的 JavaScript 就可以交互。）

通过积极延迟应用程序的下载和执行，Qwik 可以提供当前几代 Web 框架无法比拟的近乎即时的启动性能。

Qwik 速度快不是因为它使用了聪明的算法，而是因为它的设计方式使得大多数 JavaScript 永远不需要下载或执行。它的速度来自于不做其他框架必须做的事情。

可恢复性和序列化

可恢复性允许 Qwik 应用程序在服务器停止的地方继续执行。所有框架都需要跟踪有关应用程序状态的内部数据结构。当前一代的框架不保留从服务器到浏览器转换的这些信息。因此，框架的数据结构需要在浏览器中重建。数据结构的重建和侦听器的附加称为数据注入。

Qwik 在服务器浏览器切换时将侦听器、内部数据结构和应用程序状态序列化为 HTML。因为所有信息都在 HTML 中序列化，所以客户端可以从服务器停止的地方恢复执行。

提出问题

现代网站需要大量的 JavaScript 才能具有交互性。过多的 JavaScript 表现在两个问题上：

  • 网络带宽：大量代码传送到客户端，在慢速网络上可能需要很长时间。
  • 启动时间：在客户端上，需要执行代码（作为水化的一部分）以使站点具有交互性。

随着我们的应用程序变得越来越复杂，交互保真度越来越高，代码量多年来一直在稳步增加，而且没有停止的迹象。简而言之，我们的网站变得越来越复杂。反过来，网站复杂性的增加需要更多的代码。所有这些代码都会对站点启动性能产生负面影响。

更糟糕的是，JavaScript 是单线程的。因此，我们的复杂站点无法利用现代多核 CPU。

问题的产生

上述问题的解决方案既明显又困难：减少消费 JavaScript。

这很明显，因为我们都同意使用较少 JavaScript 的网站会表现得更好。

这很难，因为我们的工具无法帮助我们实现目标。几乎我们所有的工具都以一种减少 JavaScript 交付困难的方式来解决问题。这是因为我们的大多数工具都是为解决特定问题而设计的，而无需考虑它们生成的 JavaScript 数量。

您是否需要解决渲染、样式、动画、A/B 测试、分析等问题？有一个工具可以做到这一点。只需导入或添加一个

作为一个行业，我们没有考虑捆绑大小的含义。每个工具单独解决一个特定问题，但大小不是解决问题代码的一部分。大小是将所有工具放在一起时出现的问题，到那时，开发人员几乎无能为力。

解决方案

Qwik 的设计初衷就是解决尺寸问题。小包大小是它的初始目标，所有其他设计决策都服从于该目标。

Qwik 并不是要创建更少的 JavaScript。Qwik 是关于不必在应用程序启动时立即将所有 JavaScript 发送到客户端。当您将延迟加载 JavaScript 的想法发挥到极致时，您最终会得到 Qwik。

是的，Qwik 需要一种不同的思考和设计应用程序的方式，但结果是初始 JavaScript 接近于零，并且基于用户交互的渐进式 JavaScript 下载。

大小不应该是开发人员的问题

如今，大小是开发人员的问题。如果您遵循每个框架、工具等的最佳实践，您将拥有一个很大的包。这时，开发人员开始使用某种延迟加载边界等来缓解问题。（但是任何尝试过的人都会告诉你，选择是有限的。）

我们的行业最佳实践导致大量捆绑，网络上充满了示例。

Qwik 的核心内容是包大小不应该是开发人员应该考虑的事情。它应该作为框架设计方式的一部分自然而然地出现。

Qwik 的设计初衷就是产生大量的延迟加载边界。工具可以将您的应用程序分解为许多可延迟加载的块，并且运行时仅在需要时才可以下载它们。

为什么不修复现有的框架/工具？

简而言之，延迟加载理念处于低水平，不能在不从根本上改变它们的情况下追溯添加到现有框架/工具中。这种根本性的变化将与框架/工具及其各自的生态系统不兼容，使它们变得无用。

当框架做出某些假设时，例如所有渲染都是同步的，添加异步延迟加载几乎是不可能的。或者，如果框架从模板中恢复侦听器位置，则必须先下载和执行这些模板，然后站点才能进行交互。这些只是一些比较明显的例子，但在实践中，当前的核心模型不符合可恢复性的要求，还有无数的问题在排队等候。

上述情况也意味着现有框架添加可恢复性作为特性是不可行的。现有框架将永远无法做到 Qwik 可以做到的事情（不破坏向后兼容性）。

我们为什么要构建 Qwik？

因为我们相信有更好的方式来构建网站。一种不涉及必须在启动时急切下载的大量 JavaScript 的方式，然后您的站点才会变得可交互。一种允许开发人员考虑添加功能的方式，而不是如何将庞大的代码库分解成更小的块。一种拥有即时网站以提供更好用户体验的方法。所有这一切，以一种独立于应用程序代码库大小的方式进行。

翻译自:qwik.builder.io

avatar
文章
阅读
粉丝