建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
譯者 | 李睿
目前創(chuàng)新互聯(lián)建站已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、憑祥網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
審校| 孫淑娟
Qwik對(duì)響應(yīng)式用戶(hù)界面（UI）的工作方式進(jìn)行了大膽的反思。其核心前提是框架從頭開(kāi)始構(gòu)建，以使用最少的JavaScript交付HTML，只要足夠的JavaScript就可以根據(jù)需要逐步引入交互性。
Qwik使用一種細(xì)粒度的模型來(lái)隔離應(yīng)用程序的分段，這些分段根據(jù)需要進(jìn)行水合。通過(guò)從基本原則出發(fā)，Qwik可以實(shí)現(xiàn)其他無(wú)法實(shí)現(xiàn)的性能，并代表了前端JavaScript的另一種發(fā)展路徑。
Qwik的狀態(tài)
Qwik仍處于早期版本中，但它已經(jīng)推出了一段時(shí)間。在StackBlitz中有一個(gè)功能完整的示例，一個(gè)REPL游樂(lè)場(chǎng)和一個(gè)命令行工具。Qwik也已經(jīng)發(fā)展到支持對(duì)開(kāi)發(fā)人員更友好的、類(lèi)似響應(yīng)的語(yǔ)法。其底層仍然是一個(gè)高級(jí)的、獨(dú)一無(wú)二的響應(yīng)式引擎，它定義了狀態(tài)、模板和偵聽(tīng)器的響應(yīng)邊界。
（1）可恢復(fù)性
Qwik使用了巧妙的服務(wù)器端和客戶(hù)端渲染的組合，以避免當(dāng)代框架在兩次（一次在服務(wù)器上，一次在客戶(hù)端上）執(zhí)行水合工作時(shí)重復(fù)。
正如Qwik的創(chuàng)建者M(jìn)isko Hevery所寫(xiě)：Qwik的基本思想是它是可恢復(fù)的。它可以在服務(wù)器停止的地方繼續(xù)。在客戶(hù)端上只需要執(zhí)行最少的代碼。
或者換一種方式：讓服務(wù)器設(shè)置一個(gè)功能盡可能完整的HTML頁(yè)面，并允許客戶(hù)端執(zhí)行盡可能少的工作，以便繼續(xù)或恢復(fù)用戶(hù)的進(jìn)程。
帶有服務(wù)器端渲染（SSR）的響應(yīng)式框架中的典型流程是，首先在服務(wù)器上生成應(yīng)用程序的版本，然后將其發(fā)送到客戶(hù)端，客戶(hù)端渲染架式應(yīng)用程序。在這一點(diǎn)上，客戶(hù)端應(yīng)用程序接管了任務(wù)，基本上必須再次引導(dǎo)同一應(yīng)用程序，以便將一個(gè)正常運(yùn)行的客戶(hù)端連接在一起。
這個(gè)過(guò)程被稱(chēng)為水合作用。有幾種巧妙的方法可以提高水合作用的效率，但Qwik放棄了這些方法，采用了一種名為“可恢復(fù)性”的新方法。
可恢復(fù)性意味著客戶(hù)機(jī)可以從服務(wù)器中斷的地方開(kāi)始，而不必在客戶(hù)機(jī)上重新構(gòu)建應(yīng)用程序。
（2）交互時(shí)間
Qwik努力提升的指標(biāo)是交互時(shí)間(TTI)。這是指用戶(hù)向網(wǎng)頁(yè)發(fā)出請(qǐng)求和網(wǎng)頁(yè)響應(yīng)用戶(hù)交互之間的時(shí)間間隔。
加載時(shí)間(TTL)跟蹤客戶(hù)端完成接收所有所需數(shù)據(jù)所需的時(shí)間(因此是一個(gè)主要由文件大小和網(wǎng)絡(luò)速度決定的指標(biāo))，交互時(shí)間(TTI)考慮了現(xiàn)代JS框架的一個(gè)突出事實(shí)：一旦下載了數(shù)據(jù)，客戶(hù)端就必須解壓縮，并執(zhí)行所需的JavaScript代碼，以使頁(yè)面具有交互性。
響應(yīng)式引擎需要做很多工作。引擎必須分解/解析所有標(biāo)記(如JSX)，這些標(biāo)記通過(guò)變量和表達(dá)式來(lái)根據(jù)狀態(tài)的變化修改所顯示的內(nèi)容，以及根據(jù)代碼的行為。
另一端是一個(gè)簡(jiǎn)單的HTML頁(yè)面。一旦瀏覽器掌握了它，頁(yè)面就可以開(kāi)始移動(dòng)了。這就是谷歌的PageSpeed Insights給Reddit.com這樣的頁(yè)面打32分(滿(mǎn)分100分)，而原始HTML打100分的原因。
（3）閉包和偵聽(tīng)器
Hevery將快速TTI的技術(shù)障礙描述為“死于封閉”。簡(jiǎn)而言之，每個(gè)閉包必須維護(hù)封閉的信息世界這一事實(shí)意味著運(yùn)行時(shí)應(yīng)用程序是一個(gè)急切加載代碼的“千層餅”。
Qwik采用的解決方案是使用與序列化監(jiān)聽(tīng)器交互的全局事件監(jiān)聽(tīng)器。換句話(huà)說(shuō)，通用事件偵聽(tīng)器用于編排按需實(shí)現(xiàn)的偵聽(tīng)器，而不是下載并封裝在閉包中(不管它們是否實(shí)際執(zhí)行)。
Qwik的目標(biāo)是提供與HTML一致的響應(yīng)性，使其可序列化。根據(jù)標(biāo)記中封裝的信息，只需要一個(gè)很小的可執(zhí)行文件就可以在運(yùn)行時(shí)顯示響應(yīng)性。
（4）代碼拆分并進(jìn)行微調(diào)
從另一個(gè)角度來(lái)看，Qwik正在執(zhí)行微調(diào)的代碼拆分。當(dāng)用戶(hù)需要時(shí)，它會(huì)根據(jù)需要加載交互代碼。如果有必要，捆綁器可以將這些塊打包成更大的塊。
Qwik從頭構(gòu)建，有三個(gè)獨(dú)立的函數(shù)，用于創(chuàng)建狀態(tài)、模板和偵聽(tīng)器。這允許框架只加載手頭任務(wù)所需的內(nèi)容。
狀態(tài)、模板和偵聽(tīng)器這三個(gè)邊界一度由開(kāi)發(fā)人員直接編碼。多虧了一個(gè)新的優(yōu)化器工具，它可以將類(lèi)響應(yīng)式語(yǔ)法轉(zhuǎn)換為這些幕后邊界，可以得到一個(gè)相當(dāng)熟悉的DX。優(yōu)化器的工作是將實(shí)際代碼轉(zhuǎn)換為一組微小的存根，以便在必要時(shí)以小塊恢復(fù)應(yīng)用程序。
在優(yōu)化器中，模板和偵聽(tīng)器用美元符號(hào)表示，而狀態(tài)由useStore鉤子處理。稍后將看到這個(gè)語(yǔ)法。
Qwik代碼的最終輸出看起來(lái)與其他框架不同，但是將Qwik與優(yōu)化器一起使用可以使其與其他框架相媲美。Qwik還推出了QwikCity，這是一套更高級(jí)的功能（例如路由），可以讓構(gòu)建完整的應(yīng)用程序更容易。
使用Qwik進(jìn)行操作
現(xiàn)在已經(jīng)理解了Qwik背后的概念，以下了解一下如何使用它進(jìn)行編碼。清單1顯示了用Qwik編寫(xiě)的一個(gè)簡(jiǎn)單組件。(這個(gè)例子來(lái)自Qwik FAQ。)
（1）清單1.簡(jiǎn)單的Qwik組件
import { component$ } from '@builder.io/qwik';
export const App = component$(() => {
console.log('render');
return console.log('hello')}>Hello Qwik
;
});清單1顯示了Qwik中的一個(gè)組件被定義為一個(gè)匿名函數(shù)，從Qwik庫(kù)傳遞到組件$函數(shù)中。每當(dāng)在Qwik中看到美元符號(hào)$時(shí)，這是在讓優(yōu)化器知道它需要做一些工作。Qwik將在應(yīng)用程序的美元符號(hào)部分設(shè)置其細(xì)粒度延遲加載邊界。
清單1中的onClick$是Qwik特殊語(yǔ)法的另一個(gè)例子。Qwik將使用一些技巧，在實(shí)際需要時(shí)只加載支持該功能所需的JavaScript。
清單1中的代碼將被優(yōu)化器分解為幾個(gè)片段，如清單2所示。
（2）清單2.編譯后的Qwik組件
/ The app.js file itself
import { componentQrl, qrl } from "@builder.io/qwik";
const App = /*#__PURE__*/
componentQrl(qrl(()=>import('./app_component_akbu84a8zes.js'), "App_component_AkbU84a8zes"));
export { App };
// app_component_akbu84a8zes.js
import { jsx as _jsx } from "@builder.io/qwik/jsx-runtime";
import { qrl } from "@builder.io/qwik";
export const App_component_AkbU84a8zes = ()=>{
console.log('render');
return /*#__PURE__*/ _jsx("p", {
onClick$: qrl(()=>import("./app_component_p_onclick_01pegc10cpw"), "App_component_p_onClick_01pEgC10cpw"),
children: "Hello Qwik"
});
};
// app_component_p_onclick_01pegc10cpw.js
export const App_component_p_onClick_01pEgC10cpw = ()=>console.log('hello');
在清單2中可以看到，Qwik沒(méi)有包含實(shí)際的組件功能，而是使用庫(kù)中的componentQrl()函數(shù)包含了一個(gè)引用。這個(gè)函數(shù)接受一個(gè)qrl()函數(shù)，該函數(shù)使用匿名函數(shù)導(dǎo)入生成的組件文件。組件之間的這種關(guān)聯(lián)都是由優(yōu)化器在后臺(tái)管理的。開(kāi)發(fā)人員不需要直接考慮這個(gè)問(wèn)題。
QRL代表Qwik URL，這是Qwik引用將被延遲加載的方式?；旧?，只要框架需要延遲加載某些內(nèi)容，它就會(huì)插入一個(gè)QRL，由特定于QRL的消費(fèi)者包裝(比如組件、狀態(tài)或模板函數(shù))。
例如，組件QRL可以在子組件中找到的代碼的正確時(shí)刻加載，而父組件可以快速顯示其布局。與onClick處理程序類(lèi)似：當(dāng)單擊發(fā)生時(shí)，可以對(duì)它進(jìn)行計(jì)算。
（3）Qwik CLI
該命令行工具可從npm獲得，具有所期望的基本功能，包括創(chuàng)建、開(kāi)發(fā)模式和生產(chǎn)構(gòu)建。Qwik CLI使用Vite作為構(gòu)建工具?？梢允褂胣pm create啟動(dòng)新應(yīng)用程序qwik@latest，這將啟動(dòng)一個(gè)交互式提示。
如果創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用程序并運(yùn)行產(chǎn)品構(gòu)建，會(huì)得到一個(gè)dist目錄，在那里可以看到前面描述的所有獨(dú)立的可惰性加載的應(yīng)用程序塊。
Qwik調(diào)整
了解Qwik語(yǔ)法的一個(gè)有趣的地方是Qwik Cheat Sheet，它提供了Qwik和React代碼的并排比較。人們可能會(huì)發(fā)現(xiàn)，這并不是一個(gè)很難的過(guò)渡。有些領(lǐng)域非常相似，有些則主要需要思維的轉(zhuǎn)變。更大的收獲是，Qwik中的響應(yīng)式系統(tǒng)與類(lèi)響應(yīng)式框架完全不同，盡管優(yōu)化器實(shí)現(xiàn)了相似的語(yǔ)法。
Qwik對(duì)代碼拆分和延遲加載的創(chuàng)新方法為前端JavaScript提供了一種新的發(fā)展方式，而了解事情的發(fā)展將會(huì)很有趣。
原文標(biāo)題：??Intro to Qwik: A superfast JavaScript framework??，作者：Matthew Tyson
網(wǎng)站欄目：Qwik簡(jiǎn)介：一個(gè)超快的JavaScript框架
網(wǎng)頁(yè)地址：http://m.5511xx.com/article/codpeij.html
