9️⃣

Deploy a Qwik App to Cloudflare.

2023/08/20に公開

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

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

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


2023年8月4回目です。

このメモは、Qwik[1] についてです。

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

https://www.builder.io/blog/hydration-is-pure-overhead

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.[2]

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

https://twitter.com/QwikDev/status/1521202882124521472

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

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

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

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

https://my-portfolio-qwik.pages.dev/

https://github.com/danny-yamamoto/my-portfolio-qwik

Qwik について

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

環境構築

  • Empty App を選択しています。
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 のような書き方です。

https://github.com/danny-yamamoto/my-portfolio-qwik/blob/c81b17c9d57c550d7c3f91523c70edd21da520ba/src/components/portfolio/portfolio.tsx#L5-L55

  • Svelte/SvelteKit のように、Qwik/Qwik City で構成されます。

  • Chrome の Largest Contentful Paint (LCP)の結果は、以下のとおりです。コード量の大きなプロダクションのコードで計測すると差が顕著に出るのかもしれません。

    • Remix: 0.65s
    • Svelte: 0.62s
    • Qwik: 0.36s
      スクリーンショット 2023-08-20 15.15.25.jpg
  • HTML コメントで marking している点が他の framework と違います。

    • Qwik 特有のシリアライズです。
    • 開発者として意識する部分ではありません。rendering 時に marking されます。Chrome のデベロッパーツールで要素を見ると分かります。
      スクリーンショット 2023-08-20 15.11.47.jpg

Summary

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

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

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

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

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

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

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

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

脚注
  1. https://qwik.builder.io/ ↩︎

  2. https://qwik.builder.io/docs/concepts/think-qwik/ ↩︎

  3. https://remix.run/blog/remixing-shopify ↩︎

  4. https://qwik.builder.io/docs/deployments/gcp-cloud-run/ ↩︎

  5. https://tip.golang.org/doc/go1.21 ↩︎

  6. https://vanjs.org/ ↩︎

  7. https://www.trial-net.co.jp/mag/ ↩︎

Discussion