Qwik 1-0 正式發佈，追求極致性能的前端框架！

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/rgHHxCIj9BQof6SqBjWD-Q