5 月 2 日，追求極致性能的前端框架 Qwik 正式發(fā)布 1.0 版本！Qwik 類似于 React，它也使用用 JSX 編寫的組件作為模板，主要區(qū)別在于其專注于在瀏覽器中傳輸最少的 JavaScript。

在 2022 年 JavaScript 明星項(xiàng)目的前端框架排行中，Qwik 排在第二位，僅次于 React。

Qwik 不依靠水合來(lái)為服務(wù)器上生成的頁(yè)面帶來(lái)交互性，而是使用一種稱為可恢復(fù)性的技術(shù)來(lái)提供即時(shí)交互的 HTML。它通過(guò)在 HTML 本身中序列化應(yīng)用的狀態(tài)來(lái)工作。該項(xiàng)目由 Mi?ko Hevery 領(lǐng)導(dǎo)，他是 AngularJS 的創(chuàng)建者，他的口號(hào)是“為 Web 應(yīng)用增強(qiáng) HTML”，Qwik 就是“HTML 優(yōu)先的框架”。

為什么需要一個(gè)新的框架？

React、Vue、Angular、Svelte、SolidJS 等框架及其元框架（Next.js、Nuxt、SvelteKit、SolidStart、Astro）通過(guò)提供強(qiáng)大的工具和抽象化簡(jiǎn)了構(gòu)建復(fù)雜應(yīng)用的過(guò)程，從而革命性地改變了 Web 開(kāi)發(fā)。這些框架激發(fā)了許多開(kāi)發(fā)者創(chuàng)造出創(chuàng)新性的解決方案，提高了用戶和開(kāi)發(fā)者的體驗(yàn)，并提高了 Web 應(yīng)用的整體質(zhì)量。

Qwik從這些框架中吸取了很多靈感，利用它們的優(yōu)點(diǎn)提供快速、可擴(kuò)展和可維護(hù)的解決方案，用于構(gòu)建 Web 應(yīng)用。在這些框架奠定的基礎(chǔ)上，Qwik 能夠?yàn)殚_(kāi)發(fā)者提供強(qiáng)大的工具集，使他們能夠快速高效地構(gòu)建 Web 應(yīng)用，并保持高質(zhì)量和高性能。

隨著 Web 應(yīng)用變得越來(lái)越大，由于當(dāng)前的框架向客戶端發(fā)送過(guò)多的 JavaScript，其啟動(dòng)性能會(huì)逐漸降低。將初始捆綁包大小保持在較小的范圍內(nèi)是一場(chǎng)永無(wú)止境的戰(zhàn)斗，并且通常會(huì)無(wú)法做到。

Qwik 向用戶提供即時(shí)應(yīng)用。這是通過(guò)保持初始 JavaScript 成本不變來(lái)實(shí)現(xiàn)的，即使應(yīng)用變得越來(lái)越復(fù)雜，Qwik 只為特定的用戶交互提供 JavaScript。這確保了 JavaScript 不會(huì)使瀏覽器崩潰，無(wú)論應(yīng)用變得多么龐大。

將其視為 JavaScript 的流式處理：

主要特性

Qwik 的理念是確保易用的路徑是高性能的路徑。這就是為什么Qwik默認(rèn)提供以下解決方案：

開(kāi)箱即用的用戶體驗(yàn)

• 通過(guò)JavaScript流式傳輸實(shí)現(xiàn)即時(shí)加載：交付應(yīng)用，獲得優(yōu)秀的CWV分?jǐn)?shù)，并在應(yīng)用隨著時(shí)間變得更加復(fù)雜而維持這些分?jǐn)?shù)。
• 推測(cè)性代碼獲取：在用戶需要的時(shí)候精確地交付所需的代碼，以確保即時(shí)的用戶交互，即使在網(wǎng)絡(luò)不可靠的低速移動(dòng)設(shè)備上也是如此。
• 惰性執(zhí)行：Qwik的可恢復(fù)技術(shù)盡可能延遲在瀏覽器中執(zhí)行代碼，以保持瀏覽器的主線程自由并能夠響應(yīng)用戶交互。
• 優(yōu)化渲染時(shí)間：Qwik是響應(yīng)式的，意味著默認(rèn)情況下只會(huì)更新絕對(duì)必要的內(nèi)容，而不會(huì)進(jìn)行多余的更新。
• 數(shù)據(jù)獲取：從服務(wù)器開(kāi)始獲取數(shù)據(jù)，以防止“瀑布”式延遲。

極佳的開(kāi)發(fā)者體驗(yàn)

• 類似于JSX
• 基于目錄的路由：使用基于目錄的路由創(chuàng)建站點(diǎn)，這是行業(yè)中聲明路由的首選方式。
• 一流的數(shù)據(jù)訪問(wèn)：Qwik通過(guò)數(shù)據(jù)加載器和表單操作可以輕松訪問(wèn)服務(wù)器數(shù)據(jù)，并且有100%端到端類型安全性和用戶輸入驗(yàn)證。
• 中間件：以可移植方式聲明中間件邏輯，能夠部署到所有主要的托管提供商。
• 統(tǒng)一的執(zhí)行模型：通過(guò)Qwik，編寫前端和后端代碼自然地融合在單個(gè)應(yīng)用代碼庫(kù)和類型安全性中。默認(rèn)情況下，Qwik 應(yīng)用在服務(wù)器和瀏覽器中均可執(zhí)行，但很容易將函數(shù)固定為始終在服務(wù)器端（server$()）或始終在瀏覽器端執(zhí)行。

集成

Qwik 提供快速擴(kuò)展的即用型集成，可以與您喜歡的庫(kù)和框架輕松集成。只需在命令行上運(yùn)行npx qwik add，然后從列表中選擇所需的集成即可：

• 一次編寫，任意部署：支持多個(gè)主流云托管服務(wù)商，包括Azure、Cloudflare、Google Cloud Run、Netlify、Node.js、Deno、Vercel等，而且這個(gè)列表還在不斷增長(zhǎng)。以與托管提供商無(wú)關(guān)的方式編寫應(yīng)用，避免廠商鎖定。
• UI組件：選擇使用QwikUI、Papanasi UI或經(jīng)過(guò)實(shí)戰(zhàn)檢驗(yàn)的UI類庫(kù)，如Material UI、ChakraUI、Radix或通過(guò)Qwik-React使用其他基于React的組件庫(kù)。
• 圖像優(yōu)化：使用 @unpic/qwik 和 qwik-image 對(duì)圖像進(jìn)行優(yōu)化，以獲得最佳用戶體驗(yàn)。
• 國(guó)際化：使用 $localize 和 qwik-speak 支持多語(yǔ)言交付應(yīng)用。
• 身份驗(yàn)證：使用業(yè)界領(lǐng)先的AuthJS為應(yīng)用添加多種認(rèn)證策略。
• CMS：Qwik 與 Builder.io 原生集成，可用于結(jié)構(gòu)化數(shù)據(jù)和組件級(jí)頭部?jī)?nèi)容創(chuàng)建和發(fā)布。
• 樣式：Qwik 允許延遲加載和組件級(jí)樣式封裝。結(jié)合PostCSS、Vanilla Extract或Tailwind等流行解決方案，實(shí)現(xiàn)樣式需求。
• 測(cè)試：使用 Vitest 進(jìn)行單元測(cè)試，使用 Playwright 和 Cypress 進(jìn)行端到端測(cè)試。使用 Storybook 開(kāi)發(fā)和測(cè)試組件。
• 企業(yè)準(zhǔn)備：使用qwik-nx為企業(yè)規(guī)模的應(yīng)用和monorepo開(kāi)發(fā)提供特殊的生成器和執(zhí)行器。

互操作性

Qwik-React 允許在 Qwik 應(yīng)用中懶惰地混合 React 組件。利用 Qwik 中現(xiàn)有的 React 生態(tài)系統(tǒng)，使用 Qwik-React 逐步遷移到 Qwik，或者通過(guò)延遲水化部分應(yīng)用來(lái)加速 React 應(yīng)用。Qwik-react 將 island 架構(gòu)設(shè)計(jì)模式引入到 React 應(yīng)用中。

Svelte、Vue 和 Angular 包裝器正在由社區(qū)開(kāi)發(fā)。

社區(qū)

Qwik 擁有一個(gè)由熱情的開(kāi)發(fā)人員、熱情的貢獻(xiàn)者和全球支持用戶組成的多元化和包容性社區(qū)。這個(gè)社區(qū)充滿活力，不斷合作，分享想法，并突破框架可以實(shí)現(xiàn)的界限。

Qwik 的 GitHub Star 增長(zhǎng)歷史：

參考：https://www.builder.io/blog/qwik-v1。

分享題目：Qwik1.0正式發(fā)布，追求極致性能的前端框架！
網(wǎng)址分享：http://uogjgqi.cn/article/djisjhh.html