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

62K Views

October 21, 22

スライド概要

2022/10/21 Qiita Night 〜 フロントエンド 〜 発表資料

profile-image

Frontend engineer @lapras_inc / TypeScript / Vue.js / Firebase / 元消防士

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

今日話すこと 💬

4.

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

5.

Qwikとは何?

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

ざっくり理解するResumable

14.

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

15.

そもそも Hydration とは?🤔

16.

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

17.

これの何が問題?🤔

18.

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

19.

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

20.

どう解消する ? 🤔

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

他フレームワークとの動作を検証するため、 同内容で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/

34.

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

35.

初期ロードする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/

36.

追加ロードする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/

37.

まとめ

38.

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

39.

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

40.

参考資料 • 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

41.

We Are Hiring !!

42.

選考課題も公開中 !! 💯