Qwik 1.0 正式发布

大家好，我是Echa。

好消息，2023年5月2号Builder 官方Qwik 研发团队对外宣布 追求极致性能的前端框架Qwik 1.0 正式发布。

Qwik有点类似于React，也是使用JSX编写组建模版。Qwik对响应式用户界面（UI）的工作方式进行了大胆的反思。其核心前提是框架从头开始构建，以使用最少的JavaScript交付HTML，只要足够的JavaScript就可以根据需要逐步引入交互性。

小编记得在之前整理了这篇，前端生态圈内比较有影响力的 Best of JS 官方正式公布《2022年最受欢迎的JavaScript项目榜单出炉》文章有详细讲解过 Qwik在2022年JavaScript 明星项目的前端框架排行中排名第二，排名第一的是React。

全文大纲

1. Qwik 前言
2. Qwik 介绍
3. 为什么需要一个新的 Qwik框架 ？
4. Qwik 主要特性
5. Qwik 集成详解
6. Qwik 具有互操作性
7. Qwik 拥有活跃社区

Qwik 前言

AngularJS 的创始人 Misko Hevery 近期宣布了新网络框架 Qwik 测试版本的推出，声称无论应用程序有多大，Qwik 都能够快速地构建。在多数情况下，Qwik 会先下载 1KB 的 JavaScript，在需要的时候才会懒加载或预处理程序和应用程序代码。

在一次名为《如何从主线程中移除 99% 的 JavaScript》的演讲中，Hevery 介绍了 Qwik 背后的原理。

Qwik 的目标很简单，确保复杂的网站也能在谷歌页面速度评分项上拿到 100/100……归根究底，就是要让互动时间尽可能地缩短。

如你所见，行业中的大多数框架都能在优化图片和 CSS 上做到尽善尽美，但 JavaScript 方面却又乏善可陈。因为这对于互联网上的每个人来说都是系统性的问题，我的意思是说，问题根源在于工具而不是开发者。

用于优化 JavaScript 交付速度的工具是 Qwik 关注的问题。

Misko 将 JavaScript 在互动时间指标上负面的表现归因于水合（Hydration）作用。水合在连接服务器的渲染时出现。服务器接收到客户端对页面的请求后，做出对应查询以填充界面，并将结果返回客户端。虽然对用户来说，服务器端的页面渲染速度通常要比客户端渲染的页面要快（如更快的首次内容绘制），但页面却并不是立即就可交互的，客户端还需要下载并执行页面上的 JavaScript 脚本。

Qwik 保留了服务器端的渲染，通过在服务器上运行应用程序以避免水合。它将所有相关状态信息序列化，将页面内容和序列化的状态一起以 HTML 的形式发送给客户端。这些相关的状态信息包括时间监听器、内部数据结构，以及应用状态。借助序列化的状态，客户端可以接力完成服务器端没有执行完的任务。

处理交互性的 JavaScript 加载默认是延迟进行的，一般是直到用户实际使用交互时才启动，也就是说一个按钮的事件处理程序最晚可以在用户点击按钮时加载。这种即时的 JavaScript 获取加上预取策略，利用浏览器的本地能力，在不影响页面交互性的前提下完成了文件的加载。

Qwik 介绍

官网：https://qwik.builder.io/

Github：https://github.com/BuilderIO/qwik

Qwik 是一个超快的JavaScript框架。

Qwik使用一种细粒度的模型来隔离应用程序的分段，这些分段根据需要进行水合。通过从基本原则出发，Qwik可以实现其他无法实现的性能，并代表了前端JavaScript的另一种发展路径。
Qwik 是 “零基线 JavaScript” 框架趋势的一部分。网站和应用程序经常被繁重的 JavaScript 资产所臃肿，影响了浏览器的性能：即使页面在服务端渲染，用户也必须等待 JavaScript 被加载、解析和执行，才能与页面互动。

Qwik 没有依靠 hydration 为服务端生成的页面增加互动性，而是使用一种叫做 resumability 的技术来提供即时互动的 HTML。它的原理在 HTML 中序列化应用程序的状态。

该项目由 Miško Hevery 领导，他是 AngularJS 的创建者，AngularJS 的口号是 “为 Web 应用增强 HTML”，而Qwik是 "HTML 优先框架"...不知为何，它们在良好的古老 HTML 之上构建应用的意图是一样的。

为什么需要一个新的 Qwik框架 ？

React、Vue、Angular、Svelte、SolidJS 等框架及其元框架（Next.js、Nuxt、SvelteKit、SolidStart、Astro）通过提供强大的工具和抽象化简了构建复杂应用的过程，从而革命性地改变了 Web 开发。这些框架激发了许多开发者创造出创新性的解决方案，提高了用户和开发者的体验，并提高了 Web 应用的整体质量。

Qwik从这些框架中吸取了很多灵感，利用它们的优点提供快速、可扩展和可维护的解决方案，用于构建 Web 应用。在这些框架奠定的基础上，Qwik 能够为开发者提供强大的工具集，使他们能够快速高效地构建 Web 应用，并保持高质量和高性能。

随着 Web 应用变得越来越大，由于当前的框架向客户端发送过多的 JavaScript，其启动性能会逐渐降低。将初始捆绑包大小保持在较小的范围内是一场永无止境的战斗，并且通常会无法做到。

Qwik 向用户提供即时应用。这是通过保持初始 JavaScript 成本不变来实现的，即使应用变得越来越复杂，Qwik 只为特定的用户交互提供 JavaScript。这确保了 JavaScript 不会使浏览器崩溃，无论应用变得多么庞大。

将其视为 JavaScript 的流式处理：

Qwik 主要特性

Qwik 的理念是确保易用的路径是高性能的路径。这就是为什么Qwik默认提供以下解决方案：

开箱即用的用户体验

• 通过JavaScript流式传输实现即时加载：交付应用，获得优秀的CWV分数，并在应用随着时间变得更加复杂而维持这些分数。
• 推测性代码获取：在用户需要的时候精确地交付所需的代码，以确保即时的用户交互，即使在网络不可靠的低速移动设备上也是如此。
• 惰性执行：Qwik的可恢复技术尽可能延迟在浏览器中执行代码，以保持浏览器的主线程自由并能够响应用户交互。
• 优化渲染时间：Qwik是响应式的，意味着默认情况下只会更新绝对必要的内容，而不会进行多余的更新。
• 数据获取：从服务器开始获取数据，以防止“瀑布”式延迟。

极佳的开发者体验

• 类似于JSX
• 基于目录的路由：使用基于目录的路由创建站点，这是行业中声明路由的首选方式。
• 一流的数据访问：Qwik通过数据加载器和表单操作可以轻松访问服务器数据，并且有100%端到端类型安全性和用户输入验证。
• 中间件：以可移植方式声明中间件逻辑，能够部署到所有主要的托管提供商。
• 统一的执行模型：通过Qwik，编写前端和后端代码自然地融合在单个应用代码库和类型安全性中。默认情况下，Qwik 应用在服务器和浏览器中均可执行，但很容易将函数固定为始终在服务器端（server$()）或始终在浏览器端执行。

Qwik 集成详解

Qwik 提供快速扩展的即用型集成，可以与您喜欢的库和框架轻松集成。只需在命令行上运行npx qwik add，然后从列表中选择所需的集成即可：

• 一次编写，任意部署：支持多个主流云托管服务商，包括Azure、Cloudflare、Google Cloud Run、Netlify、Node.js、Deno、Vercel等，而且这个列表还在不断增长。以与托管提供商无关的方式编写应用，避免厂商锁定。
• UI组件：选择使用QwikUI、Papanasi UI或经过实战检验的UI类库，如Material UI、ChakraUI、Radix或通过Qwik-React使用其他基于React的组件库。
• 图像优化：使用 @unpic/qwik 和 qwik-image 对图像进行优化，以获得最佳用户体验。
• 国际化：使用 $localize 和 qwik-speak 支持多语言交互应用。
• 身份验证：使用业界领先的AuthJS为应用添加多种认证策略。
• CMS：Qwik 与 Builder.io 原生集成，可用于结构化数据和组件级头部内容创建和发布。
• 样式：Qwik 允许延迟加载和组件级样式封装。结合PostCSS、Vanilla Extract或Tailwind等流行解决方案，实现样式需求。
• 测试：使用 Vitest 进行单元测试，使用 Playwright 和 Cypress 进行端到端测试。使用 Storybook 开发和测试组件。
• 企业准备：使用qwik-nx为企业规模的应用和monorepo开发提供特殊的生成器和执行器。

Qwik 具有互操作性

Qwik-React 允许在 Qwik 应用中懒惰地混合 React 组件。利用 Qwik 中现有的 React 生态系统，使用 Qwik-React 逐步迁移到 Qwik，或者通过延迟水化部分应用来加速 React 应用。Qwik-react 将 island 架构设计模式引入到 React 应用中。

Svelte、Vue 和 Angular 包装器正在由社区开发。

Qwik 拥有活跃社区

Qwik拥有一个由热情的开发人员、热情的贡献者和全球支持用户组成的多元化和包容性的社区。这个社区总是充满活力，不断合作，分享想法，并突破框架所能实现的极限。

世界各地也有一个快速增长的社区领袖群体，来自中国、法国、荷兰、英国、美国、以色列、葡萄牙、中国台湾、匈牙利等地的开发者团体和聚会正在加入这个由Qwik社区领袖组成的奇妙群体。

官方的Discord社区随时为您提供任何问题的帮助。此外，官方通过Qwik英雄计划表彰杰出的社区成员，这些成员在帮助Qwik成长和变得更好方面做出了卓越的贡献。

官方为Qwik社区及其发展感到骄傲。看看官方在过去三个月里在社区发展方面取得的巨大进展。

在过去的三个月里，Discord服务器的成员数量从4000人增加到了5000多人：

最后，查看官方的GitHub Qwik页面，在那里欢迎大家点star。

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的友友们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。