5 月 2 日,追求极致性能的前端框架 Qwik 正式发布 1.0 版本!Qwik 类似于 React,它也使用用 JSX 编写的组件作为模板,主要区别在于其专注于在浏览器中传输最少的 JavaScript。
在 2022 年 JavaScript 明星项目的前端框架排行中,Qwik 排在第二位,仅次于 React。
Qwik 不依靠水合来为服务器上生成的页面带来交互性,而是使用一种称为可恢复性的技术来提供即时交互的 HTML。它通过在 HTML 本身中序列化应用的状态来工作。该项目由 Miško Hevery 领导,他是 AngularJS 的创建者,他的口号是“为 Web 应用增强 HTML”,Qwik 就是“HTML 优先的框架”。
为什么需要一个新的框架?
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默认提供以下解决方案:
开箱即用的用户体验
- 通过JavaScript流式传输实现即时加载:交付应用,获得优秀的CWV分数,并在应用随着时间变得更加复杂而维持这些分数。
- 推测性代码获取:在用户需要的时候精确地交付所需的代码,以确保即时的用户交互,即使在网络不可靠的低速移动设备上也是如此。
- 惰性执行:Qwik的可恢复技术尽可能延迟在浏览器中执行代码,以保持浏览器的主线程自由并能够响应用户交互。
- 优化渲染时间:Qwik是响应式的,意味着默认情况下只会更新绝对必要的内容,而不会进行多余的更新。
- 数据获取:从服务器开始获取数据,以防止“瀑布”式延迟。
极佳的开发者体验
- 类似于JSX
- 基于目录的路由:使用基于目录的路由创建站点,这是行业中声明路由的首选方式。
- 一流的数据访问:Qwik通过数据加载器和表单操作可以轻松访问服务器数据,并且有100%端到端类型安全性和用户输入验证。
- 中间件:以可移植方式声明中间件逻辑,能够部署到所有主要的托管提供商。
- 统一的执行模型:通过Qwik,编写前端和后端代码自然地融合在单个应用代码库和类型安全性中。默认情况下,Qwik 应用在服务器和浏览器中均可执行,但很容易将函数固定为始终在服务器端(server$())或始终在浏览器端执行。
集成
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-React 允许在 Qwik 应用中懒惰地混合 React 组件。利用 Qwik 中现有的 React 生态系统,使用 Qwik-React 逐步迁移到 Qwik,或者通过延迟水化部分应用来加速 React 应用。Qwik-react 将 island 架构设计模式引入到 React 应用中。
Svelte、Vue 和 Angular 包装器正在由社区开发。
社区
Qwik 拥有一个由热情的开发人员、热情的贡献者和全球支持用户组成的多元化和包容性社区。这个社区充满活力,不断合作,分享想法,并突破框架可以实现的界限。
Qwik 的 GitHub Star 增长历史:
参考:https://www.builder.io/blog/qwik-v1。