Resumable な JavaScript フレームワーク Qwik を学ぶ

Resumable な JavaScript フレームワーク Qwik を学ぶ 2022/10/21 Qiita Night 〜 フロントエンド 〜

@KawamataRyo 👨💻 Engineer @LAPRAS inc 🔥 元消防士 ❤ TypeScript, Vue, Deno, React 🏄 懸垂, 個人開発

今日話すこと 💬

・Qwikとは何か？ ・Resumableとは何か？ ※⚠ 自分もQwik、Resumableについて勉強中の身なので不正確な情報があ るかも知れません。何かあればTwitterで教えてもらえると嬉しいです 🙇

Qwikとは何？

qwik builder.io が開発している JavaScript フレームワーク ※ 2022/09 にベータ版がリリース ※ フレームワークよりライブラリでは？という方もいるかもですが、 本プレゼンではDocumentに記載のあるフレームワークに統一します

qwik Angular, Gin, Ionicなどの著名な開発者が開発に関与 Miško Hevery Manu Almeida Adam Bradley

qwik React ライクに JSX で コンポーネントを記述

qwik アプリケーションの規模によって初期ロードの JSのサイズが変わらない初の O(1) フレームワーク https://www.builder.io/blog/hydration-is-pure-overhead

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

qwik SSR時のHydrationをなくし、Resumable でリアクティブを担保 https://www.builder.io/blog/hydration-is-pure-overhead

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

なんか凄そう.. でも、Resumable が全然わからん 😇

ざっくり理解するResumable

Resumable Hydrationの問題を改善したもの

そもそも Hydration とは？🤔

SSRやSSGにてサーバーサイドでレンダリングされた HTMLに対して イベントリスナを登録し、 ページをリアクティブにするまでの一連の処理のこと。 https://www.builder.io/blog/hydration-is-pure-overhead

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

これの何が問題？🤔

適切な箇所に適切なイベントリスナを登録するためには、 クライアントでもレンダリング（VDOM）を行いアプリケーション とフレームワークの状態を復元する必要がある。

適切な箇所に適切なイベントリスナを登録するためには、 クライアントでもレンダリング（VDOM）を行いアプリケーション とフレームワークの状態を復元する必要がある。 既に一度サーバーサイドでHTML化されているコンポーネントの JSを再度ダウンロードし、パース & 実行する必要がある。 オーバーヘッド

どう解消する ? 🤔

• Hydration の実行を非同期化し遅延させる • Hydrationを行う部分を限定して分離する • Hydrationを行わずHTMLに状態をシリアライズする

• Hydration の実行を非同期化し遅延させる React 18のSelective Hydration • Hydrationを行う部分を限定して分離する • Hydrationを行わずHTMLに状態をシリアライズする

• Hydration の実行を非同期化し遅延させる • Hydrationを行う部分を限定して分離する Astro, Freshの Islands Architecture • Hydrationを行わずHTMLに状態をシリアライズする

• Hydration の実行を非同期化し遅延させる • Hydrationを行う部分を限定して分離する • Hydrationを行わずHTMLに状態をシリアライズする QwikのResumable

HTMLに状態をシリアライズするとは？🤔

カウンターコンポーネントのSSRレンダリング結果

カウンターコンポーネントのSSRレンダリング結果 コンポーネントやリアクティブの対象を HTMLコメントでマーキング

カウンターコンポーネントのSSRレンダリング結果 内部構造を全て属性で記述 clickのハンドラは、遅延読み込みするJSファイルを指定

カウンターコンポーネントのSSRレンダリング結果 アプリケーションやフレームワークの状態も、 シリアライズして<script>で記述

雰囲気は理解したが、、 実際に動くやつを見てみたい 👀

https://qwik-sample-app.pages.dev/

• https://qwik-sample-app.pages.dev/

Qwikの動作確認の為に作った、 GitHub の草を思いのままに生やせるジョークアプリ🪴 https://qwik-sample-app.pages.dev/

• https://qwik-sample-app.pages.dev/

他フレームワークとの動作を検証するため、 同内容でNext.js版も作成 vs https://qiita-lt-sandbox-next-kawamataryo.vercel.app/ ※ Vercelへのデプロイ https://qwik-sample-app.pages.dev/ ※ Cloud are Pages へのデプロイ fl https://qwik-sample-app.pages.dev/

• https://qwik-sample-app.pages.dev/
• https://qiita-lt-sandbox-next-kawamataryo.vercel.app/

ロードするJSのサイズ差を わかりやすくするため、 草コンポーネントで無駄にデカイ node̲moduleを注入 https://qwik-sample-app.pages.dev/

• https://qwik-sample-app.pages.dev/

初期ロードするJSのサイズ比較 Next.js Qwik fl Nextに比べるととても小さい https://qiita-lt-sandbox-next-kawamataryo.vercel.app/ https://qwik-sample-app.pages.dev/ ※ Vercelへのデプロイ ※ Cloud are Pages へのデプロイ https://qwik-sample-app.pages.dev/

• https://qwik-sample-app.pages.dev/
• https://qiita-lt-sandbox-next-kawamataryo.vercel.app/

追加ロードするJSのサイズ比較 Next.js Qwik 変化なし Mouse hoverで追加ロード fl 重いnode̲moduleはここに含まれる https://qiita-lt-sandbox-next-kawamataryo.vercel.app/ https://qwik-sample-app.pages.dev/ ※ Vercelへのデプロイ ※ Cloud are Pages へのデプロイ https://qwik-sample-app.pages.dev/

• https://qwik-sample-app.pages.dev/
• https://qiita-lt-sandbox-next-kawamataryo.vercel.app/

まとめ

・Qwik は Resumable をコンセプトに作られた 新しいJavasScriptフレームワーク ・Resumable は Hydration の問題を、HTMLへの状態のシリ アライズと遅延ロードで解決しようとするアプローチ ・ Resumable のようにHydrationを極力なくすという考えは 今後重要になりそう

・Qwik は Resumable をコンセプトに作られた 新しいJavasScriptフレームワーク ・Resumable は Hydration の問題を、HTMLへの状態のシリ アライズと遅延ロードで解決しようとするアプローチ ・ Resumable のようにHydrationを極力なくすという考えは 今後重要になりそう Vue.js でもQwikを参考にResumableの概念を取り入れるらしい （Vue Fes 2022 Evan You キーノートより）

参考資料 • Qwik Document • https://qwik.builder.io/ • Qwikというフレームワークについて • https://lealog.hateblo.jp/entry/2022/01/11/142734 • リジューム可能なJavascriptフレームワークQwikとは • https://www.infoq.com/jp/news/2021/10/qwik-javascript-framework • Qwik City で作るブログアプリ • https://zenn.dev/azukiazusa/articles/blog-app-built-with-qwik-city • Why E cient Hydration in JavaScript Frameworks is so Challenging • https://dev.to/this-is-learning/why-e cient-hydration-in-javascript-frameworks-is-so- challenging-1ca3 • Qwik: A no-hydration instant-on personalized web application • https://www.thisdot.co/blog/qwik-a-no-hydration-instant-on-personalized-web-application • Hydration is Pure Overhead ffi ffi • https://www.builder.io/blog/hydration-is-pure-overhead

We Are Hiring !!

選考課題も公開中 !! 💯