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

Jetpack ComposeはAndroid向けの新しいUIツールキットです。Android登場から初めてとなる大規模フレームワーク刷新で，完全に1から再設計がなされました。2019年のGoogle I/Oにて発表され，2021年7月にStableになっています。

Jetpack Composeでは他プラットフォームで標準化されてきている宣言的UIモデルが採用され，またパフォーマンス面等の複数の課題が改善されました。
Stableリリースがされた後も盛んに開発が行われており，破壊的変更等への不安はありますが，導入にはそれ以上のメリットがあると考えています。

私の所属するOPENREC.tvは7年以上に渡って開発が続けられている動画プラットフォームです。比較的歴史の長いアプリケーションですが，積極的にJetpack Composeの導入を行ってきました。

このセッションでは，導入に至ったモチベーションや，既存プロダクトへの組み込み方法，また導入過程で発生した課題とその解決方法について紹介します。

Transcript

1. Ӭ໺ Ұഅ 2019೥౓ ৽ଔೖࣾ גࣜձࣾλοϓϧ
 iOS ΤϯδχΞ / SRE νʔϜ @kazumanagano @kazuma_nagano
2. ৿ ಞ࢙ 2019೥౓ ৽ଔೖࣾ גࣜձࣾCyberZ Next Experts (Android) 2019೥౓ ະ౿εʔύʔΫϦΤʔλ @at_sushi_at @Mori-Atsushi
3. 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/
4. OPENREC.tv • ߴը࣭͔ͭۀք࠷ߴਫ४ͷ
 ௿஗ԆͳϥΠϒ഑৴ • αϒεΫ / PPV • ԻָϥΠϒ ήʔϜ࣮گ΍ϓϨΠಈըָ͕͠ΊΔ ϥΠϒಈըϓϥοτϑΥʔϜ
5. OPENREC.tvͷJetpack Composeಋೖ࣮੷ 10ը໘Λ׬શҠߦ ίϯϙʔωϯτΛҠߦ ৽ػೳ͸ComposeͰ ଞ̑ը໘
6. ࠓճͷΰʔϧ Jetpack ComposeΛ
 ϓϩμΫγϣϯಋೖͯ͠Έͨ͘ͳΔ
7. 1.Jetpack ComposeͷϝϦοτ 2.ϓϩμΫγϣϯಋೖͷ3ͭͷํ๏ 3.ར༻্ͷ՝୊ͱͦͷղܾํ๏
8. 1. Jetpack Composeͷ
 ϝϦοτ
9. Jetpack Composeͱ͸ Android޲͚ͷ৽͍͠UIϑϨʔϜϫʔΫ • Androidొ৔ޙɼॳΊͯͷUIϑϨʔϜϫʔΫ࡮৽ • ׬શʹ1͔Β࠶ઃܭ • 2019೥ͷGoogle I/Oʹͯൃද • 2021೥7݄ʹstable ը૾ग़యɿhttps://developer.android.com/jetpack/compose
10. ໋ྩతUIͱએݴతUI Jetpack Composeͷ࠷େͷར఺ ໋ྩతUI એݴతUI ࡟আΛ๨ΕΔͱ
 EmptyͷUI͕࢒ͬͯ͠·͏ Կ౓࣮ߦͯ͠΋
 ಉ݁͡Ռ͕ಘΒΕΔ
11. ΑΓચ࿅͞ΕͨએݴతUI React, Flutterͷڭ܇Λܦͯ ฦΓ஋ͷͳ͍ ίϯϙʔωϯτ ॊೈͳhooks పఈతͳΩϟογϯά ෳࡶͳ৚͕݅ॻ͖΍͍͢ ίϯϙʔωϯτ΍৚݅ࣜ಺ʹ ΤϑΣΫτ͕ॻ͚Δ มߋͷͳ͍ΞΠςϜ͸ ߋ৽͞Εͳ͍
12. ύϑΥʔϚϯεͷվળ ϨΠΞ΢ταΠζͷܭଌํ๏Λ࡮৽ Android View Jetpack Compose ViewGroup View1 View2 ᶃ measure() ᶄ measure() ᶅ measure() ᶆmeasure() ᶇ measure() ਌ࢠΛԿ౓΋ܭଌ͢Δ৔߹͕͋Δ ਌Composable ࢠComposable ࢠComposable ᶃ measure() ᶄ measure() ᶅ measure() ඞͣҰ౓ͷΈ͔͠ܭଌ͞Εͳ͍
13. ϥΠϒϥϦͰͷఏڙ • 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
14. 2. ϓϩμΫγϣϯಋೖͷ
 3ͭͷํ๏
15. ϓϩμΫγϣϯಋೖͷલʹ OPENREC.tvͰͷϑϩʔ ௐࠪͱݕূΛ͢Δ 2021೥5݄ Jetpack Composeθϛͷ։࢝ / ৘ใऩूͱ৘ใڞ༗ 2021೥4݄ σόοά༻πʔϧʢUI CatalogʣͰͷࢼݧӡ༻։࢝ 2021೥12݄ ؆୯ͳϦετը໘ΛҠߦɼຊ൪ಋೖ 2022೥2݄ ৽ػೳΛϑϧComposeͰϦϦʔε ݱࡏ ComposeΛੵۃར༻ / ਵ࣌Android View͔ΒҠߦ
16. ํ๏1. ը໘୯ҐͰҠߦ͢Δ • େม͕ͩ୯७ͰޮՌత • ViewModelΛ࢖ͬͨਪ঑ΞʔΩςΫνϟͰ͋Ε͹ɼ
 UIͷҠߦͷΈͰࡁΉ
17. ํ๏1. ը໘୯ҐͰҠߦ͢Δ 1. ViewModelͷLiveDataΛ StateFlowʹ௚͢ʢΦϓγϣϯʣ • LiveDataͰ΋ಈ࡞͢Δ͕StateFlowͷํ͕૬ੑ͕ྑ͍
 ʢ௥ՃͷϥΠϒϥϦ͕͍Βͳ͍ʣ • ࠓޙLiveDataΛ࢖Θͳ͍ͷͰ͋Ε͹͜ͷλΠϛϯάͰҠߦͯ͠΋ྑ͍͔΋ UI͔Βͷೖྗ͸ϝιουͰ
18. ํ๏1. ը໘୯ҐͰҠߦ͢Δ 2. Jetpack ComposeͰUIΛॻ͘ • ͜͜͸׬શʹStatelessʹ͠ɼStateͷ಺༰Λඳը͢Δ͜ͱʹઐ೦͢Δ ը໘͸˓˓PageͰ໋໊ ϖʔδ͝ͱʹStateΛ༻ҙ
19. 3. UIͱ݁߹͢Δ • StatelessͱStatefullͷίϯϙʔωϯτ͸෼͚Δ ◦◦Coordinatorͱ໋໊ ํ๏1. ը໘୯ҐͰҠߦ͢Δ
20. ํ๏1. ը໘୯ҐͰҠߦ͢Δ 4. Activity / Fragment͔Βݺͼग़͢ Activity Fragment setContentΛݺͼग़͢ ComposeViewΛ࢖͏
21. ؾΛ͚ͭͨϙΠϯτ • ViewModelҎԼͷΞʔΩςΫνϟ͸ม͑ͳ͍ MVI΍Fluxͷํ͕૬ੑ͕ྑ͍Մೳੑ΋͋Δ͕ɼ طଘͷViewModelͷ··ʹͨ͠ ແཧʹಉ࣌ʹมߋ͠Α͏ͱ͢Δͱ࠳ં͢ΔՄೳੑ͕͋ͬͨͨΊ • ViewModelΛࠩ͠ସ͑Մೳʹ͠ͳ͍ ϓϨϏϡʔ΍ςετʹ͸statelessίϯϙʔωϯτΛ࢖͏ ํ๏1. ը໘୯ҐͰҠߦ͢Δ
22. ํ๏2. খ͞ͳίϯϙʔωϯτΛॻ͖׵͑Δ ComposeViewΛ࢖͏ xmlͷComposeViewΛ্ॻ͖͢Δ xml Activity
23. ํ๏2. খ͞ͳίϯϙʔωϯτ Λॻ͖׵͑Δ xml͔Βݺͼग़ͤΔΑ͏ʹ͢Δ FrameLayoutͷCustomView
24. ҠߦͷϙΠϯτ • ComposableΛ࠶ར༻ՄೳͳܗͰอ࣋͢Δ ը໘શମΛComposeҠߦ͢Δ͜ͱΛ૝ఆͯ͠ߏங͓ͯ͘͠ Composeʹঢ়ଶΛ࣋ͨͤͳ͍ • Android Viewͱͷ૬ੑ͕ѱ͍έʔε͕͋Δ Nested Scroll͕͏·͘ಈ͔ͳ͍ʢcompose 1.1ʣ ఘΊͯAndroid ViewΛ࢖͏ඞཁ͕ग़ͯ͘Δ ํ๏2. খ͞ͳίϯϙʔωϯτ Λॻ͖׵͑Δ
25. ํ๏3. RecyclerViewͷηϧ ΛComposeԽ͢Δ • ํ๏2ͱ΄ͱΜͲಉ͡ • ը໘શମҠߦʹ΋ܨ͛΍͘͢ɼݸਓతʹ͸͓͢͢Ί • Epoxy΍groupieͰ΋ར༻Մೳ
26. ஫ҙ఺ • compose 1.1Ͱ͸ηϧ͕࠶ར༻͞Εͳ͍ͷͰεΫϩʔϧ ͷύϑΥʔϚϯε͕མͪΔՄೳੑ͕͋Δ • compose 1.2Ͱղফ͞ΕΔ༧ఆ ํ๏3. RecyclerViewͷηϧ ΛComposeԽ͢Δ
27. 3. ར༻্ͷ՝୊ͱ
 ͦͷղܾํ๏
28. ՝୊1. ಉ͡ίϯϙʔωϯτͰ΋ඍົʹڍಈ͕ҟͳΔ SwipeRefreshLayout ϦϑϨογϡऴྃ࣌ͷΞχϝʔγϣϯ͕ҟͳΔ ͦͷ৔Ͱফ͑Δ ΋ͱͷҐஔʹ໭Δ
29. TabLayout + Pager Ξχϝʔγϣϯ͕ҟͳΔ Ϧοϓϧ͕ԁ Ϧοϓϧ͕࢛֯ ΠϯσΟέʔλʔͷΞχϝʔγϣϯͳ͠ ΠϯσΟέʔλʔͷΞχϝʔγϣϯ͋Γ ՝୊1. ಉ͡ίϯϙʔωϯτͰ΋ඍົʹڍಈ͕ҟͳΔ
30. ՝୊1. ಉ͡ίϯϙʔωϯτ Ͱ΋ඍົʹڍಈ͕ҟͳΔ ରԠҊ • ࣗ࡞ͯ͠߹ΘͤΔ Jetpack Compose͸ίϯϙʔωϯτΛൺֱత࡞Γ΍͍͢ ͦΕͰ΋ίετ͸͔͔Δ • ࠩ෼ΛೝΊͯͦͷ··࢖͏ • AndroidViewΛ࢖͏ ৔ॴʹΑͬͯ͸composeͱ૬ޓӡ༻͕Ͱ͖ͳ͍έʔε΋
31. ՝୊2. recomposeͷ཈੍ • ༧ظͤͣύϑΥʔϚϯε͕ѱԽ͢Δέʔε͕͋Δ υϥοά΍εΫϩʔϧ / Ξχϝʔγϣϯ • େମ͸ෆཁͳrecomposeʢ࠶ߏ੒ʣ͕
 ޿ൣғͰൃੜ͍ͯ͠Δ
32. recomposeΛܭଌ͢Δ ϩάΛ࢓ࠐΉ ModifierͰՄࢹԽ RecomposeHighlighterɿhttps://github.com/android/snippets/blob/master/compose/recomposehighlighter/src/main/java/com/example/android/compose/recomposehighlighter/RecomposeHighlighter.kt recomposeͰ఺౮
33. ϨΠΞ΢τΠϯεϖΫλ Compose 1.2 + Android Studio Dolphin recompose਺ εΩοϓ͞Εͨ਺
34. ղܾํ๏1. ComposableΛ skippableʹ͢Δ શͯͷҾ਺ʹมߋ͕ͳ͍ͱ
 Έͳ͞ΕΕ͹εΩοϓ͞ΕΔ εΩοϓ͞Εͳ͍Ϋϥε • List<*>, Set<*> • Throwable, Date • શͯͷinterface • composeΛ࢖͍ͬͯͳ͍Ϟδϡʔϧ΍ϥΠϒϥϦͷΫϥε
35. উखʹมߋ͞Εͳ͍͜ͱΛ໌ࣔ ಺෦ʹState͕͋Δ৔߹͸ @StableΛ࢖͏ ղܾํ๏1. ComposableΛ skippableʹ͢Δ
36. ղܾํ๏2. Stateͷ؂ࢹ৔ॴΛม͑Δ Ҿ਺͕value recompose! recompose! value͕ݺ͹ΕͨՕॴͰrecompose͕͞ΕΔ Before After ͜͜ͰvalueΛ؂ࢹ ͜͜Ͱ͸Stateͷ·· ͜͜ͰvalueΛ؂ࢹ recompose!
37. ՝୊2. recomposeͷ཈੍ • جຊrecomposeͷൃੜΛҙࣝ͢Δඞཁ͸ͳ͍ • ࠷ॳ͔Β࠷దԽ͢Δͷ͸ɼίʔυͷݟ௨͕͠
 ѱԽͨ͠ΓɼແବͳίετʹͳΓ΍͍͢ • ύϑΥʔϚϯεͷ໰୊͕ੜͨ͡ࡍʹɼ
 ܭଌ͠ͳ͕ΒղফΛ໨ࢦ͢ ૣ͗͢Δ࠷దԽΛߦΘͳ͍
38. ·ͱΊ 1.Jetpack ComposeͷϝϦοτ એݴతUI / ύϑΥʔϚϯε / OSඇґଘ 2.ϓϩμΫγϣϯಋೖͷ3ͭͷํ๏ ը໘ͰҠߦ͢Δ / ίϯϙʔωϯτͷҠߦ / RecyclerViewͷηϧҠߦ 3.ར༻্ͷ՝୊ͱͦͷղܾํ๏ ίϯϙʔωϯτͷࠩ෼ / recomposeͷ཈੍