Deploy a Qwik App to Cloudflare. #React

この抜粋の内容は次のとおりです。

Qwik について
環境構築
Project 構成
他の Framework との比較
Summary

さらに詳しく見たい方は読み続けてください。

2023年8月4回目です。

このメモは、Qwik¹ についてです。

Qwik といえば、「Resumable vs. Hydration」

Yes, Qwik requires a different way of thinking and designing your application, but the result is near zero initial JavaScript with progressive JavaScript download based on user interactions.²

確かに、Qwikは異なる考え方とアプリケーションの設計を必要としますが、その結果、ユーザーのインタラクションに基づいてプログレッシブJavaScriptをダウンロードすることで、初期のJavaScriptはほぼゼロになります。

今回、Qwik と Svelte、Remix の違いを確認します。

題材とする実装は、簡易のポートフォリオサイトです。

これまで試した Remix、Svelte に続いて Qwik です。

今回のサイトとコードはこちらです。

Qwik について

「大規模な」 Web アプリケーションの配信に適しています。
- Qwik は、初期ロードにおける JavaScript のサイズが application の大きさに依存せず変わりません。
Qwik の開発元は、builder.io です。
- builder.io の headless CMS は、ドラッグ＆ドロップでページやコンテンツを作成できるビジュアルエディタを備えています。
- Qwik は、この headless CMS を支える技術です。monetize を目的に Qwik を公開しているわけではない？
- Vercel / Next.js とは立ち位置が異なります。
- Shopify / Remix の関係に近いです。³
Cloudflare や Cloud Run に deploy できます。⁴

環境構築

Empty App を選択しています。

Qwik の default は、TypeScript です。

npm create qwik@latest

┌  Let's create a  Qwik App  ✨ (v1.2.7)
│
◇  Where would you like to create your new project? (Use '.' or './' for current directory)
│  ./my-portfolio-qwik
│
●  Creating new project in  /home/yamamoto_daisuke/qwik/qwik-app  ... 🐇
│
◇  Select a starter
│  Empty App
│
◇  Would you like to install npm dependencies?
│  No
│
◇  Initialize a new git repository?
│  No
│
◇  App Created 🐰
│
○  Result ────────────────────────────────────────────────╮
│                                                         │
│  🦄  Success!  Project created in qwik-app directory    │
│                                                         │
│  🤍 Integrations? Add Netlify, Cloudflare, Tailwind...  │
│     npm run qwik add                                    │
│                                                         │
│  📄 Relevant docs:                                      │
│     https://qwik.builder.io/docs/getting-started/       │
│                                                         │
│  💬 Questions? Start the conversation at:               │
│     https://qwik.builder.io/chat                        │
│     https://twitter.com/QwikDev                         │
│                                                         │
│  👀 Presentations, Podcasts and Videos:                 │
│     https://qwik.builder.io/media/                      │
│                                                         │
│  🐰 Next steps:                                         │
│     cd qwik-app                                         │
│     npm install                                         │
│     npm start                                           │
│                                                         │
│                                                         │
├─────────────────────────────────────────────────────────╯
│
└  Happy coding! 🐇

yamamoto_daisuke@instance-1:~/qwik$

Project 構成

Project Structure

.
├── adapters
│   └── cloudflare-pages
│       └── vite.config.ts
├── package.json
├── package-lock.json
├── public
│   ├── favicon.svg                    # edit
│   ├── _headers
│   ├── manifest.json
│   ├── _redirects
│   └── robots.txt
├── README.md
├── server
│   ├── package.json
│   ├── @qwik-city-not-found-paths.js
│   └── @qwik-city-static-paths.js
├── src
│   ├── components
│   │   ├── footer                     # add
│   │   │   ├── footer.module.css      # add
│   │   │   └── footer.tsx             # add
│   │   ├── portfolio                  # add
│   │   │   └── portfolio.tsx          # add
│   │   └── router-head
│   │       └── router-head.tsx
│   ├── entry.cloudflare-pages.tsx
│   ├── entry.dev.tsx
│   ├── entry.preview.tsx
│   ├── entry.ssr.tsx
│   ├── global.css
│   ├── root.tsx
│   └── routes
│       ├── index.tsx                  # edit
│       ├── layout.tsx                 # edit
│       ├── service-worker.ts
│       └── styles.css
├── tsconfig.json
└── vite.config.ts

他の Framework との比較

Qwik は、React の JSX のような書き方です。

Svelte/SvelteKit のように、Qwik/Qwik City で構成されます。
Chrome の Largest Contentful Paint (LCP)の結果は、以下のとおりです。コード量の大きなプロダクションのコードで計測すると差が顕著に出るのかもしれません。
- Remix: 0.65s
- Svelte: 0.62s
- Qwik: 0.36s
HTML コメントで marking している点が他の framework と違います。
- Qwik 特有のシリアライズです。
- 開発者として意識する部分ではありません。rendering 時に marking されます。Chrome のデベロッパーツールで要素を見ると分かります。

Summary

Qwik について書きました。
Svelte、Remix と同様に Cloudflare Pages に deploy しました。
frontend の検証は終わりにして、Go 1.21⁵ の検証に移ろうと思いましたが、VanJS⁶ というものがあることを最近知りました。💦
VanJS は、Google の senior staff software engineer が作っている framework です。今ある様々な JavaScript Framework にある壁を取り除くことを目的にしているそうです。
気になるので、もう一軒（VanJS）寄ってから、Go 1.21 に取り掛かります。

この投稿をみて何か得られた方は、いいね ❤️ をお願いします。

門外漢の Software Engineer（Site Reliability）が Frontend について考察する理由は、サービスの向上です。

弊社の既存のメンバーは、常に目の前の課題・技術にとらわれます。今であれば React。

しかし、ぼくたち Engineer が存在する理由は、React を使うことが目的ではなく、「最高の買い物体験を提供すること」です。

ビジネス・技術的な選択肢として、何が最高なのかを検討する必要があります。

弊社の CMS⁷ も検討が必要な状況です。

それでは、また別の話でお会いしましょう。👋