Jetpack Composeのイマ，プロダクション導入への道

by CyberAgent

Slide 1

Slide 1 text

Ӭ໺ Ұഅ 2019೥౓ ৽ଔೖࣾ גࣜձࣾλοϓϧ  iOS ΤϯδχΞ / SRE νʔϜ @kazumanagano @kazuma_nagano

Slide 2

Slide 2 text

৿ ಞ࢙ 2019೥౓ ৽ଔೖࣾ גࣜձࣾCyberZ Next Experts (Android) 2019೥౓ ະ౿εʔύʔΫϦΤʔλ @at_sushi_at @Mori-Atsushi

Slide 3

Slide 3 text

Kotlin CoroutinesͱJetpack Compose https://at-sushi.work/blog/35/ https://at-sushi.work/blog/51/ https://zenn.dev/at_sushi_at/books/edf63219adfc31 https://developers.cyberagent.co.jp/blog/archives/33059/

Slide 4

Slide 4 text

OPENREC.tv • ߴը࣭͔ͭۀք࠷ߴਫ४ͷ  ௿஗ԆͳϥΠϒ഑৴ • αϒεΫ / PPV • ԻָϥΠϒ ήʔϜ࣮گ΍ϓϨΠಈըָ͕͠ΊΔ ϥΠϒಈըϓϥοτϑΥʔϜ

Slide 5

Slide 5 text

OPENREC.tvͷJetpack Composeಋೖ࣮੷ 10ը໘Λ׬શҠߦ ίϯϙʔωϯτΛҠߦ ৽ػೳ͸ComposeͰ ଞ̑ը໘

Slide 6

Slide 6 text

ࠓճͷΰʔϧ Jetpack ComposeΛ  ϓϩμΫγϣϯಋೖͯ͠Έͨ͘ͳΔ

Slide 7

Slide 7 text

1.Jetpack ComposeͷϝϦοτ 2.ϓϩμΫγϣϯಋೖͷ3ͭͷํ๏ 3.ར༻্ͷ՝୊ͱͦͷղܾํ๏

Slide 8

Slide 8 text

1. Jetpack Composeͷ  ϝϦοτ

Slide 9

Slide 9 text

Jetpack Composeͱ͸ Android޲͚ͷ৽͍͠UIϑϨʔϜϫʔΫ • Androidొ৔ޙɼॳΊͯͷUIϑϨʔϜϫʔΫ࡮৽ • ׬શʹ1͔Β࠶ઃܭ • 2019೥ͷGoogle I/Oʹͯൃද • 2021೥7݄ʹstable ը૾ग़యɿhttps://developer.android.com/jetpack/compose

Slide 10

Slide 10 text

໋ྩతUIͱએݴతUI Jetpack Composeͷ࠷େͷར఺ ໋ྩతUI એݴతUI ࡟আΛ๨ΕΔͱ  EmptyͷUI͕࢒ͬͯ͠·͏ Կ౓࣮ߦͯ͠΋  ಉ݁͡Ռ͕ಘΒΕΔ

Slide 11

Slide 11 text

ΑΓચ࿅͞ΕͨએݴతUI React, Flutterͷڭ܇Λܦͯ ฦΓ஋ͷͳ͍ ίϯϙʔωϯτ ॊೈͳhooks పఈతͳΩϟογϯά ෳࡶͳ৚͕݅ॻ͖΍͍͢ ίϯϙʔωϯτ΍৚݅ࣜ಺ʹ ΤϑΣΫτ͕ॻ͚Δ มߋͷͳ͍ΞΠςϜ͸ ߋ৽͞Εͳ͍

Slide 12

Slide 12 text

ύϑΥʔϚϯεͷվળ ϨΠΞ΢ταΠζͷܭଌํ๏Λ࡮৽ Android View Jetpack Compose ViewGroup View1 View2 ᶃ measure() ᶄ measure() ᶅ measure() ᶆmeasure() ᶇ measure() ਌ࢠΛԿ౓΋ܭଌ͢Δ৔߹͕͋Δ ਌Composable ࢠComposable ࢠComposable ᶃ measure() ᶄ measure() ᶅ measure() ඞͣҰ౓ͷΈ͔͠ܭଌ͞Εͳ͍

Slide 13

Slide 13 text

ϥΠϒϥϦͰͷఏڙ • OSͷߋ৽ʹӨڹ͠ͳ͍ʢAndroid 5͔Βར༻Մೳʣ • ߋ৽ͷԸܙΛ͙͢ʹಘΒΕΔ ϝϦοτ σϝϦοτ • ΞϓϦͷαΠζ͕ංେԽ͢ΔՄೳੑ͕͋Δ  → ViewͷϥΠϒϥϦΛ࢖Θͳ͚Ε͹খ͘͞ͳΔ(※1) • ىಈ͕஗͘ͳΔ  → ϕʔεϥΠϯ ϓϩϑΝΠϧͰվળ͢Δ͔΋(※2) ※1ɿhttps://developer.android.com/jetpack/compose/ergonomics?hl=ja#apk-size ※2 : https://android-developers-jp.googleblog.com/2022/03/improving-app-performance-with-baseline.html

Slide 14

Slide 14 text

2. ϓϩμΫγϣϯಋೖͷ  3ͭͷํ๏

Slide 15

Slide 15 text

ϓϩμΫγϣϯಋೖͷલʹ OPENREC.tvͰͷϑϩʔ ௐࠪͱݕূΛ͢Δ 2021೥5݄ Jetpack Composeθϛͷ։࢝ / ৘ใऩूͱ৘ใڞ༗ 2021೥4݄ σόοά༻πʔϧʢUI CatalogʣͰͷࢼݧӡ༻։࢝ 2021೥12݄ ؆୯ͳϦετը໘ΛҠߦɼຊ൪ಋೖ 2022೥2݄ ৽ػೳΛϑϧComposeͰϦϦʔε ݱࡏ ComposeΛੵۃར༻ / ਵ࣌Android View͔ΒҠߦ

Slide 16

Slide 16 text

ํ๏1. ը໘୯ҐͰҠߦ͢Δ • େม͕ͩ୯७ͰޮՌత • ViewModelΛ࢖ͬͨਪ঑ΞʔΩςΫνϟͰ͋Ε͹ɼ  UIͷҠߦͷΈͰࡁΉ

Slide 17

Slide 17 text

ํ๏1. ը໘୯ҐͰҠߦ͢Δ 1. ViewModelͷLiveDataΛ StateFlowʹ௚͢ʢΦϓγϣϯʣ • LiveDataͰ΋ಈ࡞͢Δ͕StateFlowͷํ͕૬ੑ͕ྑ͍  ʢ௥ՃͷϥΠϒϥϦ͕͍Βͳ͍ʣ • ࠓޙLiveDataΛ࢖Θͳ͍ͷͰ͋Ε͹͜ͷλΠϛϯάͰҠߦͯ͠΋ྑ͍͔΋ UI͔Βͷೖྗ͸ϝιουͰ

Slide 18

Slide 18 text

ํ๏1. ը໘୯ҐͰҠߦ͢Δ 2. Jetpack ComposeͰUIΛॻ͘ • ͜͜͸׬શʹStatelessʹ͠ɼStateͷ಺༰Λඳը͢Δ͜ͱʹઐ೦͢Δ ը໘͸˓˓PageͰ໋໊ ϖʔδ͝ͱʹStateΛ༻ҙ

Slide 19

Slide 19 text

3. UIͱ݁߹͢Δ • StatelessͱStatefullͷίϯϙʔωϯτ͸෼͚Δ ○○Coordinatorͱ໋໊ ํ๏1. ը໘୯ҐͰҠߦ͢Δ

Slide 20

Slide 20 text

ํ๏1. ը໘୯ҐͰҠߦ͢Δ 4. Activity / Fragment͔Βݺͼग़͢ Activity Fragment setContentΛݺͼग़͢ ComposeViewΛ࢖͏

Slide 21

Slide 21 text

ؾΛ͚ͭͨϙΠϯτ • ViewModelҎԼͷΞʔΩςΫνϟ͸ม͑ͳ͍ MVI΍Fluxͷํ͕૬ੑ͕ྑ͍Մೳੑ΋͋Δ͕ɼ طଘͷViewModelͷ··ʹͨ͠ ແཧʹಉ࣌ʹมߋ͠Α͏ͱ͢Δͱ࠳ં͢ΔՄೳੑ͕͋ͬͨͨΊ • ViewModelΛࠩ͠ସ͑Մೳʹ͠ͳ͍ ϓϨϏϡʔ΍ςετʹ͸statelessίϯϙʔωϯτΛ࢖͏ ํ๏1. ը໘୯ҐͰҠߦ͢Δ

Slide 22

Slide 22 text

ํ๏2. খ͞ͳίϯϙʔωϯτΛॻ͖׵͑Δ ComposeViewΛ࢖͏ xmlͷComposeViewΛ্ॻ͖͢Δ xml Activity

Slide 23

Slide 23 text

ํ๏2. খ͞ͳίϯϙʔωϯτ Λॻ͖׵͑Δ xml͔Βݺͼग़ͤΔΑ͏ʹ͢Δ FrameLayoutͷCustomView

Slide 24

Slide 24 text

ҠߦͷϙΠϯτ • ComposableΛ࠶ར༻ՄೳͳܗͰอ࣋͢Δ ը໘શମΛComposeҠߦ͢Δ͜ͱΛ૝ఆͯ͠ߏங͓ͯ͘͠ Composeʹঢ়ଶΛ࣋ͨͤͳ͍ • Android Viewͱͷ૬ੑ͕ѱ͍έʔε͕͋Δ Nested Scroll͕͏·͘ಈ͔ͳ͍ʢcompose 1.1ʣ ఘΊͯAndroid ViewΛ࢖͏ඞཁ͕ग़ͯ͘Δ ํ๏2. খ͞ͳίϯϙʔωϯτ Λॻ͖׵͑Δ

Slide 25

Slide 25 text

ํ๏3. RecyclerViewͷηϧ ΛComposeԽ͢Δ • ํ๏2ͱ΄ͱΜͲಉ͡ • ը໘શମҠߦʹ΋ܨ͛΍͘͢ɼݸਓతʹ͸͓͢͢Ί • Epoxy΍groupieͰ΋ར༻Մೳ

Slide 26

Slide 26 text

஫ҙ఺ • compose 1.1Ͱ͸ηϧ͕࠶ར༻͞Εͳ͍ͷͰεΫϩʔϧ ͷύϑΥʔϚϯε͕མͪΔՄೳੑ͕͋Δ • compose 1.2Ͱղফ͞ΕΔ༧ఆ ํ๏3. RecyclerViewͷηϧ ΛComposeԽ͢Δ

Slide 27

Slide 27 text

3. ར༻্ͷ՝୊ͱ  ͦͷղܾํ๏

Slide 28

Slide 28 text

՝୊1. ಉ͡ίϯϙʔωϯτͰ΋ඍົʹڍಈ͕ҟͳΔ SwipeRefreshLayout ϦϑϨογϡऴྃ࣌ͷΞχϝʔγϣϯ͕ҟͳΔ ͦͷ৔Ͱফ͑Δ ΋ͱͷҐஔʹ໭Δ

Slide 29

Slide 29 text

TabLayout + Pager Ξχϝʔγϣϯ͕ҟͳΔ Ϧοϓϧ͕ԁ Ϧοϓϧ͕࢛֯ ΠϯσΟέʔλʔͷΞχϝʔγϣϯͳ͠ ΠϯσΟέʔλʔͷΞχϝʔγϣϯ͋Γ ՝୊1. ಉ͡ίϯϙʔωϯτͰ΋ඍົʹڍಈ͕ҟͳΔ

Slide 30

Slide 30 text

՝୊1. ಉ͡ίϯϙʔωϯτ Ͱ΋ඍົʹڍಈ͕ҟͳΔ ରԠҊ • ࣗ࡞ͯ͠߹ΘͤΔ Jetpack Compose͸ίϯϙʔωϯτΛൺֱత࡞Γ΍͍͢ ͦΕͰ΋ίετ͸͔͔Δ • ࠩ෼ΛೝΊͯͦͷ··࢖͏ • AndroidViewΛ࢖͏ ৔ॴʹΑͬͯ͸composeͱ૬ޓӡ༻͕Ͱ͖ͳ͍έʔε΋

Slide 31

Slide 31 text

՝୊2. recomposeͷ཈੍ • ༧ظͤͣύϑΥʔϚϯε͕ѱԽ͢Δέʔε͕͋Δ υϥοά΍εΫϩʔϧ / Ξχϝʔγϣϯ • େମ͸ෆཁͳrecomposeʢ࠶ߏ੒ʣ͕  ޿ൣғͰൃੜ͍ͯ͠Δ

Slide 32

Slide 32 text

recomposeΛܭଌ͢Δ ϩάΛ࢓ࠐΉ ModifierͰՄࢹԽ RecomposeHighlighterɿhttps://github.com/android/snippets/blob/master/compose/recomposehighlighter/src/main/java/com/example/android/compose/recomposehighlighter/RecomposeHighlighter.kt recomposeͰ఺౮

Slide 33

Slide 33 text

ϨΠΞ΢τΠϯεϖΫλ Compose 1.2 + Android Studio Dolphin recompose਺ εΩοϓ͞Εͨ਺

Slide 34

Slide 34 text

ղܾํ๏1. ComposableΛ skippableʹ͢Δ શͯͷҾ਺ʹมߋ͕ͳ͍ͱ  Έͳ͞ΕΕ͹εΩοϓ͞ΕΔ εΩοϓ͞Εͳ͍Ϋϥε • List<*>, Set<*> • Throwable, Date • શͯͷinterface • composeΛ࢖͍ͬͯͳ͍Ϟδϡʔϧ΍ϥΠϒϥϦͷΫϥε

Slide 35

Slide 35 text

উखʹมߋ͞Εͳ͍͜ͱΛ໌ࣔ ಺෦ʹState͕͋Δ৔߹͸ @StableΛ࢖͏ ղܾํ๏1. ComposableΛ skippableʹ͢Δ

Slide 36

Slide 36 text

ղܾํ๏2. Stateͷ؂ࢹ৔ॴΛม͑Δ Ҿ਺͕value recompose! recompose! value͕ݺ͹ΕͨՕॴͰrecompose͕͞ΕΔ Before After ͜͜ͰvalueΛ؂ࢹ ͜͜Ͱ͸Stateͷ·· ͜͜ͰvalueΛ؂ࢹ recompose!

Slide 37

Slide 37 text

՝୊2. recomposeͷ཈੍ • جຊrecomposeͷൃੜΛҙࣝ͢Δඞཁ͸ͳ͍ • ࠷ॳ͔Β࠷దԽ͢Δͷ͸ɼίʔυͷݟ௨͕͠  ѱԽͨ͠ΓɼແବͳίετʹͳΓ΍͍͢ • ύϑΥʔϚϯεͷ໰୊͕ੜͨ͡ࡍʹɼ  ܭଌ͠ͳ͕ΒղফΛ໨ࢦ͢ ૣ͗͢Δ࠷దԽΛߦΘͳ͍

Slide 38

Slide 38 text

·ͱΊ 1.Jetpack ComposeͷϝϦοτ એݴతUI / ύϑΥʔϚϯε / OSඇґଘ 2.ϓϩμΫγϣϯಋೖͷ3ͭͷํ๏ ը໘ͰҠߦ͢Δ / ίϯϙʔωϯτͷҠߦ / RecyclerViewͷηϧҠߦ 3.ར༻্ͷ՝୊ͱͦͷղܾํ๏ ίϯϙʔωϯτͷࠩ෼ / recomposeͷ཈੍