Tweet
Tweet

Slide 1

Slide 1 text

@ogaclejapan Jetpack Compose で始める Server Cache State DroidKaigi.collect { #14Tokyo }

Slide 2

Slide 2 text

自己紹介 Masaki Ogata SIer（受託開発） サイバーエージェント： Amebaブログ, AbemaTV, etc.. メドレー： CLINICSアプリ（患者の医療体験をサポート） これまでの経歴 ogaclejapan @ogaclejapan 2

Slide 3

Slide 3 text

宣伝（LTの背景） メドレー初のアドベントカレンダーやってます。私は20日目を書きます🙋 https://qiita.com/advent-calendar/2024/medley 3

Slide 4

Slide 4 text

時は戻り、DroidKaigi 2024 セッション「Essential concepts to know when learning Declarative UI」 https://2024.droidkaigi.jp/en/timetable/694168/ 4

Slide 5

Slide 5 text

時はさらに戻り、2024年4月某日 「Soil」という自作ライブラリをGitHub上でアルファ公開しました 🎉 https://github.com/soil-kt/soil 5 ✅ Compose Multiplatform対応OSSライブラリ ✅ Server Cache State を担うQueryパッケージ 🚧 現在も鋭意開発中（1.0.0-alpha09）

Slide 6

Slide 6 text

Server Cache State is 何 6

Slide 7

Slide 7 text

Bulletproof React のドキュメントから読み解く（1/2） 7 React開発のベストプラクティスとして作られた有名なGitHubリポジトリ※1 https://github.com/alan2207/bulletproof-react ● Component State ● Application State ● Server Cache State 👈 ● Form State ● URL State 効率化の観点から状態の分類化を検討するべし（State Management章より意訳） ※1 最近のRSC文脈では必ずしもベストプラクティスとは限らない可能性がありますので、ご留意ください

Slide 8

Slide 8 text

Bulletproof React のドキュメントから読み解く（2/2） 8 Server Cache State の説明文には次のように書かれている サーバーキャッシュ状態は、サーバーから取得したデータ をクライアント側で将来の利用のためにローカルに保存す ることを指す。 このデータを Redux のような状態管理スト アにキャッシュすることも可能だが、より効率的な方法が 存在する。 パフォーマンス向上やデータ取得プロセスの最 適化のためには、より効率的なキャッシング手法を検討す ることが重要である 文明の力を借りて日本語に翻訳 👉

Slide 9

Slide 9 text

🤷 9 理解できましたか？

Slide 10

Slide 10 text

Client State と Server State の違い 10 Server Stateは、Client Stateと比べてデータの性質が異なる※1 Client State Server State 小分類 Component State, Application State, Form State, URL State Server Cache State データの所有者 アプリケーション自身が所有 サーバーが所有 データの鮮度 常に最新を参照可能 最後に取得した時点のスナップ ショット 制御方式 同期処理 非同期処理のみ ※1 参考）https://tanstack.com/query/latest/docs/framework/react/overview

Slide 11

Slide 11 text

ボイラープレートコードの多さ 11 Server State に分類されるデータ管理には、次のような実装上の課題がつきまとう ● 処理状態の管理 ○ 非同期処理には時間がかかる可能性があるため、UXへ配慮しなければならない 👉 読み込み中など処理状態に応じてユーザへの適切なフィードバックを検討する ● 再取得やリトライ処理 ○ モバイルネットワーク環境では一時的な通信エラーに配慮しなければならない 👉 再取得の仕組み（ボタン設置やPull to Refreshなど）やリトライ処理を検討する ● 画面間のデータ同期（いいねボタン問題） ○ 更新が他の画面に反映されるよう、データの整合性へ配慮しなければならない 👉 画面間でのデータ更新通知の仕組みを検討する

Slide 12

Slide 12 text

12 ゆえに、 React界隈では Server Cache State を担う専用のラ イブラリを活用することで、これらの課題を効率的に 解消し、状態管理の負担を軽減している。（はず） Jetpack Compose でやりたい！

Slide 13

Slide 13 text

13 つまり、 React界隈では Server Cache State を担う専用のラ イブラリを活用することで、これらの課題を効率的に 解消し、状態管理の負担を軽減している。（はず） Jetpack Compose でやりたい！

Slide 14

Slide 14 text

（時間に限りがあります）続きはブログ記事で🙏 14 ご清聴ありがとうございました