qwikとは？

builder.ioが作っているフロントエンドフレームワーク

The HTML-first framework
Qwik offers the fastest possible page load times - regardless of the complexity of your website. Qwik is so fast because it allows fully interactive sites to load with almost no JavaScript and pickup from where the server left off.
As users interact with the site, only the necessary parts of the site load on-demand. This precision lazy-loading is what makes Qwik so quick.

HTMLファーストなフレームワーク
QwikはJavaScriptなしで、高速なページロードを実現するフレームワーク。
ユーザがサイトを操作する際に、必要な部分だけをオンデマンドに読み込みするため、速い。

なるほど？

Your sites and apps can boot with about 1kb of JS (regardless of application complexity), and achieve consistent performance at scale.

複雑さに関わらず 1kb のJavaScriptで起動でき、スケールアップしてもパフォーマンスが変わらない。

すごい！？

Think qwik

qwikのdocsにはより、詳細なprincipleが乗っていました。

ユニークな点

JavaScriptの実行とダウンロードをできるだけ長く遅らせる。
サーバー上でアプリケーションとフレームワークの実行状態をシリアライズし、クライアント上でレジューム(再稼働)させる。

基本原則は、JavaScriptの遅延実行っぽい。
→ よって、起動パフォーマンスが速い。
（他のフロントエンドのフレームワークがやるようなハイドレーションを実行しない。）

なんだか、ページロードが速い理由がわかってきた。

アプリケーションを作ってみる

Qwik CLI でプロジェクトを作成。

$ npm create qwik@latest

作成されたプロジェクトはこんな感じで、viteがビルドツールとして入っていた。

$ tree qwik-app --gitignore
qwik-app
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.svg
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── components
│   │   ├── header
│   │   │   ├── header.css
│   │   │   └── header.tsx
│   │   ├── icons
│   │   │   └── qwik.tsx
│   │   └── router-head
│   │       └── router-head.tsx
│   ├── entry.dev.tsx
│   ├── entry.preview.tsx
│   ├── entry.ssr.tsx
│   ├── global.css
│   ├── root.tsx
│   └── routes
│       ├── flower
│       │   ├── flower.css
│       │   └── index.tsx
│       ├── index.tsx
│       ├── layout.tsx
│       └── service-worker.ts
├── tsconfig.json
└── vite.config.ts

以下で実行。

$ npm run preview

gifのコンソールを見て分かる通り、画面のボタンのイベントが発火した際にJSダウンロードが実施され、そのJSがServiceWorkerによって実行されていることがわかります。

buildされたservice-worker.jsを見ても、リンクイベントに対してbundleされたjsファイルがリンクされていそうでした。

/* Qwik Service Worker */
const appBundles=[["q-04377fa4.js",[16]],["q-1d4e3858.js",[]],["q-2740590a.js",[16],["ceU05TscGYE","N39ca0w8E8Y"]],["q-3105d59d.js",[16]],["q-3b022e38.js",[13,16],["xYL1qOwPyDI"]],["q-5cd4f262.js",[13,16],["8gdLBszqbaM","EpaZ5qQ4Lg4","kzjavhDI3L0","u0YVoxt2aTY","yiXwCC0m3jY"]],["q-60805735.js",[13,16],["AKetNByE5TM"]],["q-60ad0231.js",[16]],["q-7165eaf2.js",[13,16],["WmYC5H00wtI"]],["q-7483fde2.js",[16]],["q-76c18864.js",[16]],["q-780e4afe.js",[16],["VkLNXphUh5s"]],["q-81d4e2f5.js",[13,16],["zrbrqoaqXSY"]],["q-bcbb5710.js",[16],["3sccYCDd1Z0","hO3b5j0m2ZI"]],["q-c45ad96e.js",[16]],["q-c5096a40.js",[13,16],["dznIGAlrcag","OW4nu0I1yZ8","p4UiTwsJc7c","V0Y6u0VD1eY"]],["q-cb843918.js",[]],["q-d2c3388e.js",[13,16],["2Eo7WCpaqI8","TxCFOy819ag"]]];
const libraryBundleIds=[7];
const linkBundles=[[/^\/$/,[10,11,9,4]],[/^\/flower\/?$/,[10,11,3,15]]];

明日は引き続きQwikでアプリを作成したいと思います。

qwikとは？

qwikとは？

Think qwik

ユニークな点

アプリケーションを作ってみる

参考