Modifier.composedがプロダクトに与えている影響 ~「Modifier.Nodeを使いましょう」を踏まえて~

Here is the presentation slide I used when speaking at After DroidKaigi 2023

Transcript

1. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. © Yahoo Japan ~「Modifier.Nodeを使いましょう」を踏まえて~ Modifier.composedがプロダクトに与え ている影響 ヤフー株式会社 ヤフオク!統括本部プロダクション1本部 ⻑濱 伶
2. © Yahoo Japan 2 • ⻑濱 伶(Nagahama Rei) X: @Fel1Tech • ヤフー株式会社に2021年度新卒⼊社 • PayPayフリマとヤフオク!のアプリ開発担当
3. © Yahoo Japan このセッションについて Sujiさんの「Modifier.Nodeを使いましょう」に興味を持っていただき、セッショ ンを⾒たときに理解がしやすくなるような概要や知識をお話しします 3
4. © Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.Nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 4
5. © Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.Nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 5
6. © Yahoo Japan • Modifier.composed が抱える問題を扱っている • Modifier.NodeがModifier.composedの代替として移⾏が進んでいる このセッションをフォーカスした理由 このセッションをフォーカスした理由 6
7. © Yahoo Japan • Modifier.composed が抱える問題を扱っている • Modifier.NodeがModifier.composedの代替として移⾏が進んでいる このセッションをフォーカスした理由 このセッションをフォーカスした理由 7 今の内に理解を深めておくことが重要
8. © Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.Nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 8
9. © Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 9
10. © Yahoo Japan • 不要なRecompositionが起きてしまう • Compositionのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 10
11. © Yahoo Japan その前に 11
12. © Yahoo Japan Recompositionとは 不要なRecompositionが起きてしまう 12 • Viewの再描画 → パフォーマンスの低下
13. © Yahoo Japan Recompositionとは 不要なRecompositionが起きてしまう 13 • Viewの再描画 → パフォーマンスの低下 必要な時に必要な場所だけ⾏う
14. © Yahoo Japan • 誰が判断するの︖ • Compose Runtime Recompositionとは 不要なRecompositionが起きてしまう 14
15. © Yahoo Japan • いつ判断するの︖ • レイアウト⽣成時や親レイアウトが再⽣成された時 ルール (引数が同じ場合) • Unitを返却するModifierやComposable関数はスキップする • Unit以外を返却するModifierはスキップしない Recompositionとは 不要なRecompositionが起きてしまう 15
16. © Yahoo Japan • 何をもとに判断しているの︖ • 前回の値と引数で渡された値のequals • falseの時は違うレイアウトだと判断されてRecomposi0onされる Recompositionとは 不要なRecompositionが起きてしまう 16
17. © Yahoo Japan • いつ判断するの︖ • レイアウト⽣成時や親レイアウトが再⽣成された時 • Unitを返却するModifierやComposable関数はスキップする • Unit以外を返却するModifierはスキップしない Recompositionとは 不要なRecompositionが起きてしまう 17
18. © Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 18
19. © Yahoo Japan 不要なRecompositionが起きてしまう 不要なRecompositionが起きてしまう 19 • Modifier.composedはUnitではなくModifierを返却するので、スキップされない • factoryのequalsが結果のModifierではなく、インスタンスで⽐較するため常にFalseに Ҿ༻
    IUUQTDTBOESPJEDPNBOESPJEYQMBUGPSNGSBNFXPSLTTVQQPSU BOESPJEYNBJODPNQPTFVJVJTSDDPNNPO.BJOLPUMJOBOESPJEYDPNQPTFVJ$PNQPTFE.PEJpFSLUM
20. © Yahoo Japan 不要なRecompositionが起きてしまう 不要なRecompositionが起きてしまう 20 • Modifier.composedはUnitではなくModifierを返却するので、スキップされない • factoryのequalsが結果のModifierではなく、インスタンスで⽐較するため常にFalseに 常にRecomposition Ҿ༻
    IUUQTDTBOESPJEDPNBOESPJEYQMBUGPSNGSBNFXPSLTTVQQPSU BOESPJEYNBJODPNQPTFVJVJTSDDPNNPO.BJOLPUMJOBOESPJEYDPNQPTFVJ$PNQPTFE.PEJpFSLUM
21. © Yahoo Japan 仕組み 不要なRecompositionが起きてしまう 21 Ҿ༻
    IUUQTRJJUBDPN@463+@JUFNTEDB⒎EBE
22. © Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 22
23. © Yahoo Japan • 不要なRecompositionが起きてしまう • Compositionのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 23
24. © Yahoo Japan Clickableの場合 Compositionのツリーが⼤きくなることによる監視コストの増加 24 Ҿ༻
    IUUQTRJJUBDPN@463+@JUFNTEDBGGEBE
25. © Yahoo Japan 多くのItemを配置すると Compositionのツリーが⼤きくなることによる監視コストの増加 25 Ҿ༻
    IUUQTRJJUBDPN@463+@JUFNTEDBGGEBE
26. © Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 26
27. © Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 27 Modifier.Nodeで主に解決される
28. © Yahoo Japan 余談: 勘違いしていたこと 28
29. © Yahoo Japan 余談: 勘違いしていたこと 29
30. © Yahoo Japan 仕組み 不要なRecompositionが起きてしまう 30 Ҿ༻
    IUUQTRJJUBDPN@463+@JUFNTEDBGGEBE
31. © Yahoo Japan 余談: 勘違いしていたこと 31 Ҿ༻
    IUUQTRJJUBDPN@463+@JUFNTEDB⒎EBE
32. © Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.Nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 32
33. © Yahoo Japan • ⼀回のみ実⾏したい処理 (例: ログ) → Composable内部で呼び出すとRecomposi0onのたびに実⾏される可能性 プロダクトに与えていた影響 33
34. © Yahoo Japan • ⼀回のみ実⾏したい処理 (例: ログ) → Composable内部で呼び出すとRecomposi0onのたびに実⾏される可能 プロダクトに与えていた影響 34 Modifier.Nodeへの移⾏でどのように変わるのかをみてみましょう
35. © Yahoo Japan 例 プロダクトに与えていた影響 35
36. © Yahoo Japan 結果 プロダクトに与えていた影響 36 • クリックするたびに「A」のRecomposi0onが起きる
37. © Yahoo Japan 移⾏するとどう変わる︖ 37
38. © Yahoo Japan onFocusChangedを使⽤してみる プロダクトに与えていた影響 38
39. © Yahoo Japan 結果 プロダクトに与えていた影響 39 • 同様に「A」のRecompositionが起きる
40. © Yahoo Japan Node対応後のonFocusChangedは︖ プロダクトに与えていた影響 40
41. © Yahoo Japan 結果 プロダクトに与えていた影響 41 • Recompositionが起こっていない
42. © Yahoo Japan 実験からわかること プロダクトに与えていた影響 42 • Node対応後は引数が変わるなどの必要な場合しかRecomposi0onしない → できるだけNodeに移⾏したModifier修飾⼦を使った⽅が良い
43. © Yahoo Japan 実験からわかること プロダクトに与えていた影響 43 • Node対応後は引数が変わるなどの必要な場合しかRecompositionしない → できるだけNodeに移⾏したModifier修飾⼦を使った⽅が良い どれくらい移⾏している︖
44. © Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 44
45. © Yahoo Japan • 移⾏前のModifier • clickable (段階的に移⾏済み) • border • draggable • scrollable •移⾏済の主要なModifier • onFocusChanged • focusable Modifier.Nodeへの移⾏状況(BOM ver.2023.09.00時点) 45 ରԠPR: https://android-review.googlesource.com/q/Modifier.Node
46. © Yahoo Japan • Modifier.Nodeに移⾏前のAPIでは、不必要なRecomposi0onが⾛ってしまう • ⾃前で導⼊も可能だが負債になる可能性 • 段階的に導⼊が進められているため最新バージョンにアップデートを︕ • 詳しくは LT: Modifier.Nodeを使いましょう Qiita: Modifier.Nodeを使いましょう まとめ 46
47. © Yahoo Japan ご清聴ありがとうございました︕ 47