[Jetpack Compose] 原理から見るSkippable対応

Transcript

1. Harada Reo @ すいみー 2024/1/18 LT新年会 [Jetpack Compose] 原理から見るSkippable対応
2. すいみー CyberAgent Inc. Ameba どすこい塾 DroidKaigi Staff RunningReo 自己紹介 / Introduction
3. このLTのゴール Composeフレームワークが 開発者に対して与える 恩恵を把握する
4. 理想状態 Skippable対応をどこまで やるべきかの基準を 持てるようになる
5. Skippableとは？ Composeのレンダリング段階は3つあるが パフォーマンス向上のため更新時に 飛ばす(skipする)工夫ができる Skippableとは？
6. 話さないこと 細かいSkippable対応の tipsは特に話しません ※以下の赤い部分を話します
7. Composeフレームワークが やってくれること
8. Composeのフレームワークがやってくれること @Composable fun Title() { Column(modifier = Modifier.fillMaxWidth()) { Text(“Hello World”) Button(onClick = { ... }) } }
9. Composeのフレームワークがやってくれること 普通の関数との違い ・何度も再実行可能である ・Skippableである ・リアクティブである
10. Composeのフレームワークがやってくれること 普通の関数との違い ・何度も再実行可能である ・Skippableである ・リアクティブである
11. Composeのフレームワークがやってくれること Compose Compilerは Stateを読み込むComposable関数を検出して それをCompose Runtimeに伝える 逆にStateを読み込まないComposable関数は Compose Runtimeに伝えない
12. Composeのフレームワークがやってくれること Compose Compilerは Stateを読み込むComposable関数を検出して それをCompose Runtimeに伝える 逆にStateを読み込まないComposable関数は Compose Runtimeに伝えない Compose Compiler = Kotlin CompilerのPlugin
13. Composeのフレームワークがやってくれること Compose Compilerは Stateを読み込むComposable関数を検出して それをCompose Runtimeに伝える 逆にStateを読み込まないComposable関数は Compose Runtimeに伝えない Compose Runtimeってなに？
14. Composeのフレームワークがやってくれること その前に・・・
15. Composeのフレームワークがやってくれること @Composable fun Title() { Column(modifier = Modifier.fillMaxWidth()) { Text(“Hello World”) Button(onClick = { ... }) } }
16. Composeのフレームワークがやってくれること 普段書いているComposable関数ですが 実は見えない引数がコンパイル時に合成されている
17. Composeのフレームワークがやってくれること @Composable fun Title($composer: Composer<*>) { Column(modifier = Modifier.fillMaxWidth(), $composer) { Text(“Hello World”, $composer) Button(onClick = { ... }, $composer) } }
18. Composeのフレームワークがやってくれること @Composable fun Title($composer: Composer<*>) { Column(modifier = Modifier.fillMaxWidth(), $composer) { Text(“Hello World”, $composer) Button(onClick = { ... }, $composer) } } すべてのcomposable関数にcomposerが渡される ツリー構造をcompose runtimeに伝える
19. Composeのフレームワークがやってくれること @Composable fun Title($composer: Composer<*>) { Column(modifier = Modifier.fillMaxWidth(), $composer) { Text(“Hello World”, $composer) Button(onClick = { ... }, $composer) } } すべてのcomposable関数にcomposerが渡される ツリー構造をcompose runtimeに伝える コードを自由に書き換えられるのはKotlinの恩恵！ Javaでこのような柔軟な言語プラグインを作るのが難しい
20. Composeのフレームワークがやってくれること @Composable fun Title($composer: Composer<*>) { Column(modifier = Modifier.fillMaxWidth(), $composer) { Text(“Hello World”, $composer) Button(onClick = { ... }, $composer) } } すべてのcomposable関数にcomposerが渡される ツリー構造をcompose runtimeに伝える コードを自由に書き換えられるのはKotlinの恩恵！ Javaでこのような柔軟な言語プラグインを作るのが難しい Compose Runtimeってなに？(再び)
21. Composeのフレームワークがやってくれること ツリー構造をメモリ配列で見てみる
22. @Composable fun Title($composer: Composer<*>) { $composer.start(123) Column(modifier = Modifier.fillMaxWidth(), $composer) { Text(“Hello World”, $composer) Button(onClick = { ... }, $composer) } $composer.end() } Composeのフレームワークがやってくれること
23. Composeのフレームワークがやってくれること Composable関数はUIの実体を返すわけではく Compose Runtimeを通じて メモリ内のツリー構造を構築したり 更新したりするので 高速なレンダリングが可能になっている
24. Composeのフレームワークがやってくれること Compose Runtimeは Composable関数のコードとSlot Tableを繋げる Interfaceのようなものでありそう メモリ内にDataのツリー構造を作っている 仕組みは素晴らしい！
25. Composeのフレームワークがやってくれること Composeフレームワークは Kotlinのオブジェクト指向に 関数型の概念を加える
26. Composeのフレームワークがやってくれること 関数型の特徴として 関数名・型・引数によって一意のkeyを生成する 関数の返り値をキャッシュすることができる 先ほどのSlot Tableの例から分かるように Composeフレームワークはソース内の 位置関係をキャッシュすることで どのような依存関係があるのかを明確にしている
27. 振り返り
28. このLTのゴール Composeフレームワークが 開発者に対して与える 恩恵を把握する
29. このLTのゴール Composeフレームワークが 開発者に対して与える 恩恵を把握する 難しかった・・・
30. 振り返り Compose内部の仕組みは難しく これだけでComposeのフレームワークの 恩恵を把握したというには早計・・・
31. 振り返り とはいえ、原理からComposeを見ると Skippable対応が自然と実践できたり 今までの取り組みが腑に落ちることがある
32. 「Jetpack Compose internals」 https://jorgecastillo.dev/book/ 「Under the hood of Jetpack Compose — part 2 of 2」 https://medium.com/androiddevelopers/under-the-hood-of-jetpack- compose-part-2-of-2-37b2c20c6cdd 「KotlinConf 2019: Leland Richardson が解き明かす Compose ランタイム」 https://www.youtube.com/watch?v=6BRlI5zfCCk&t=153s 「Thinking in Compose」 https://developer.android.com/jetpack/compose/mental-model?hl=ja 参考資料
33. 「Jetpack Compose internals」 https://jorgecastillo.dev/book/ 「Under the hood of Jetpack Compose — part 2 of 2」 https://medium.com/androiddevelopers/under-the-hood-of-jetpack- compose-part-2-of-2-37b2c20c6cdd 「KotlinConf 2019: Leland Richardson が解き明かす Compose ランタイム」 https://www.youtube.com/watch?v=6BRlI5zfCCk&t=153s 「Thinking in Compose」 https://developer.android.com/jetpack/compose/mental-model?hl=ja 参考資料 誰か一緒に輪読会しませんか？
34. 本年も よろしくお願いします