Slide 1

Slide 1 text

Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. © Yahoo Japan ~「Modifier.Nodeを使いましょう」を踏まえて~ Modifier.composedがプロダクトに与え ている影響 ヤフー株式会社 ヤフオク!統括本部プロダクション1本部 ⻑濱 伶

Slide 2

Slide 2 text

© Yahoo Japan 2 • ⻑濱 伶(Nagahama Rei) X: @Fel1Tech • ヤフー株式会社に2021年度新卒⼊社 • PayPayフリマとヤフオク!のアプリ開発担当

Slide 3

Slide 3 text

© Yahoo Japan このセッションについて Sujiさんの「Modifier.Nodeを使いましょう」に興味を持っていただき、セッショ ンを⾒たときに理解がしやすくなるような概要や知識をお話しします 3

Slide 4

Slide 4 text

© Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.Nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 4

Slide 5

Slide 5 text

© Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.Nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 5

Slide 6

Slide 6 text

© Yahoo Japan • Modifier.composed が抱える問題を扱っている • Modifier.NodeがModifier.composedの代替として移⾏が進んでいる このセッションをフォーカスした理由 このセッションをフォーカスした理由 6

Slide 7

Slide 7 text

© Yahoo Japan • Modifier.composed が抱える問題を扱っている • Modifier.NodeがModifier.composedの代替として移⾏が進んでいる このセッションをフォーカスした理由 このセッションをフォーカスした理由 7 今の内に理解を深めておくことが重要

Slide 8

Slide 8 text

© Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.Nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 8

Slide 9

Slide 9 text

© Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 9

Slide 10

Slide 10 text

© Yahoo Japan • 不要なRecompositionが起きてしまう • Compositionのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 10

Slide 11

Slide 11 text

© Yahoo Japan その前に 11

Slide 12

Slide 12 text

© Yahoo Japan Recompositionとは 不要なRecompositionが起きてしまう 12 • Viewの再描画 → パフォーマンスの低下

Slide 13

Slide 13 text

© Yahoo Japan Recompositionとは 不要なRecompositionが起きてしまう 13 • Viewの再描画 → パフォーマンスの低下 必要な時に必要な場所だけ⾏う

Slide 14

Slide 14 text

© Yahoo Japan • 誰が判断するの︖ • Compose Runtime Recompositionとは 不要なRecompositionが起きてしまう 14

Slide 15

Slide 15 text

© Yahoo Japan • いつ判断するの︖ • レイアウト⽣成時や親レイアウトが再⽣成された時 ルール (引数が同じ場合) • Unitを返却するModifierやComposable関数はスキップする • Unit以外を返却するModifierはスキップしない Recompositionとは 不要なRecompositionが起きてしまう 15

Slide 16

Slide 16 text

© Yahoo Japan • 何をもとに判断しているの︖ • 前回の値と引数で渡された値のequals • falseの時は違うレイアウトだと判断されてRecomposi0onされる Recompositionとは 不要なRecompositionが起きてしまう 16

Slide 17

Slide 17 text

© Yahoo Japan • いつ判断するの︖ • レイアウト⽣成時や親レイアウトが再⽣成された時 • Unitを返却するModifierやComposable関数はスキップする • Unit以外を返却するModifierはスキップしない Recompositionとは 不要なRecompositionが起きてしまう 17

Slide 18

Slide 18 text

© Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 18

Slide 19

Slide 19 text

© Yahoo Japan 不要なRecompositionが起きてしまう 不要なRecompositionが起きてしまう 19 • Modifier.composedはUnitではなくModifierを返却するので、スキップされない • factoryのequalsが結果のModifierではなく、インスタンスで⽐較するため常にFalseに Ҿ༻IUUQTDTBOESPJEDPNBOESPJEYQMBUGPSNGSBNFXPSLTTVQQPSUBOESPJEYNBJODPNQPTFVJVJTSDDPNNPO.BJOLPUMJOBOESPJEYDPNQPTFVJ$PNQPTFE.PEJpFSLUM

Slide 20

Slide 20 text

© Yahoo Japan 不要なRecompositionが起きてしまう 不要なRecompositionが起きてしまう 20 • Modifier.composedはUnitではなくModifierを返却するので、スキップされない • factoryのequalsが結果のModifierではなく、インスタンスで⽐較するため常にFalseに 常にRecomposition Ҿ༻IUUQTDTBOESPJEDPNBOESPJEYQMBUGPSNGSBNFXPSLTTVQQPSUBOESPJEYNBJODPNQPTFVJVJTSDDPNNPO.BJOLPUMJOBOESPJEYDPNQPTFVJ$PNQPTFE.PEJpFSLUM

Slide 21

Slide 21 text

© Yahoo Japan 仕組み 不要なRecompositionが起きてしまう 21 Ҿ༻IUUQTRJJUBDPN@463+@JUFNTEDB⒎EBE

Slide 22

Slide 22 text

© Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 22

Slide 23

Slide 23 text

© Yahoo Japan • 不要なRecompositionが起きてしまう • Compositionのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 23

Slide 24

Slide 24 text

© Yahoo Japan Clickableの場合 Compositionのツリーが⼤きくなることによる監視コストの増加 24 Ҿ༻IUUQTRJJUBDPN@463+@JUFNTEDBGGEBE

Slide 25

Slide 25 text

© Yahoo Japan 多くのItemを配置すると Compositionのツリーが⼤きくなることによる監視コストの増加 25 Ҿ༻IUUQTRJJUBDPN@463+@JUFNTEDBGGEBE

Slide 26

Slide 26 text

© Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 26

Slide 27

Slide 27 text

© Yahoo Japan • 不要なRecomposi0onが起きてしまう • Composi0onのツリーが⼤きくなることによる監視コストの増加 Modifier.composedが抱える問題 「Modifier.Nodeを使いましょう」の概要 27 Modifier.Nodeで主に解決される

Slide 28

Slide 28 text

© Yahoo Japan 余談: 勘違いしていたこと 28

Slide 29

Slide 29 text

© Yahoo Japan 余談: 勘違いしていたこと 29

Slide 30

Slide 30 text

© Yahoo Japan 仕組み 不要なRecompositionが起きてしまう 30 Ҿ༻IUUQTRJJUBDPN@463+@JUFNTEDBGGEBE

Slide 31

Slide 31 text

© Yahoo Japan 余談: 勘違いしていたこと 31 Ҿ༻IUUQTRJJUBDPN@463+@JUFNTEDB⒎EBE

Slide 32

Slide 32 text

© Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.Nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 32

Slide 33

Slide 33 text

© Yahoo Japan • ⼀回のみ実⾏したい処理 (例: ログ) → Composable内部で呼び出すとRecomposi0onのたびに実⾏される可能性 プロダクトに与えていた影響 33

Slide 34

Slide 34 text

© Yahoo Japan • ⼀回のみ実⾏したい処理 (例: ログ) → Composable内部で呼び出すとRecomposi0onのたびに実⾏される可能 プロダクトに与えていた影響 34 Modifier.Nodeへの移⾏でどのように変わるのかをみてみましょう

Slide 35

Slide 35 text

© Yahoo Japan 例 プロダクトに与えていた影響 35

Slide 36

Slide 36 text

© Yahoo Japan 結果 プロダクトに与えていた影響 36 • クリックするたびに「A」のRecomposi0onが起きる

Slide 37

Slide 37 text

© Yahoo Japan 移⾏するとどう変わる︖ 37

Slide 38

Slide 38 text

© Yahoo Japan onFocusChangedを使⽤してみる プロダクトに与えていた影響 38

Slide 39

Slide 39 text

© Yahoo Japan 結果 プロダクトに与えていた影響 39 • 同様に「A」のRecompositionが起きる

Slide 40

Slide 40 text

© Yahoo Japan Node対応後のonFocusChangedは︖ プロダクトに与えていた影響 40

Slide 41

Slide 41 text

© Yahoo Japan 結果 プロダクトに与えていた影響 41 • Recompositionが起こっていない

Slide 42

Slide 42 text

© Yahoo Japan 実験からわかること プロダクトに与えていた影響 42 • Node対応後は引数が変わるなどの必要な場合しかRecomposi0onしない → できるだけNodeに移⾏したModifier修飾⼦を使った⽅が良い

Slide 43

Slide 43 text

© Yahoo Japan 実験からわかること プロダクトに与えていた影響 43 • Node対応後は引数が変わるなどの必要な場合しかRecompositionしない → できるだけNodeに移⾏したModifier修飾⼦を使った⽅が良い どれくらい移⾏している︖

Slide 44

Slide 44 text

© Yahoo Japan アジェンダ 1. このセッションをフォーカスした理由 2. 「Modifier.nodeを使いましょう」の概要 3. プロダクトに与えていた影響 4. 現時点でのModifier.Nodeへの移⾏状況 44

Slide 45

Slide 45 text

© 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

Slide 46

Slide 46 text

© Yahoo Japan • Modifier.Nodeに移⾏前のAPIでは、不必要なRecomposi0onが⾛ってしまう • ⾃前で導⼊も可能だが負債になる可能性 • 段階的に導⼊が進められているため最新バージョンにアップデートを︕ • 詳しくは LT: Modifier.Nodeを使いましょう Qiita: Modifier.Nodeを使いましょう まとめ 46

Slide 47

Slide 47 text

© Yahoo Japan ご清聴ありがとうございました︕ 47