Jetpack Composeを本番導入してみた結果と課題

YouTube : https://youtu.be/bivQQpJEWKs

Transcript

1. Jetpack Composeを 本番導入してみた結果と課題 pixiv App Night pixiv Inc. makun / 齊藤 2022.10.27
2. 2 概要 • 「パルシィ」にCompose導入をした • 導入は今年（2022年）5月から • 既存のAndroidViewを徐々に置き換えた • 6ヶ月間での課題とその対応のいちぶを紹介
3. パルシィとは
5. 5 makun wcaokaze akira
6. 6 Compose 導入の理由 • 単純にメリットが大きい • ラージスクリーンやフォルダブルの対応 • 導入を進め開発経験と基盤を整える • 気持ち
7. 課題①
8. 8 うちらのComposable、
 パフォーマンス悪くね？

9. @Composable fun ComicLineItem( comic: Comic, onItemClick: () -> Unit = {}, ..., ) {...} Composableの例 9
10. data class Comic( val id: String, val title: String, val summary: String, val authors: List<Author>, val imageUrl: String, ..., ) 受け取っているデータの例 10 Composableの引数にしたとき、 必要のない再コンポーズが 起こるようになる List やその中身が Immutableではない
11. @Immutable data class Comic( val id: String, val title: String, val summary: String, val authors: List<Author>, val imageUrl: String, ..., ) 11 @Immutable を宣言することで、Compose Compilerが安定したクラスと 判断できる 全てのデータで @Immutable を宣言すれ ば良さそう？ 良くない
12. @Immutable data class Comic( val id: String, val title: String, val summary: String, val authors: List<Author>, val imageUrl: String, ..., ) 12 MutableList の可能性があり 運用を間違えると壊れる Kotlin でいう「 !! 」と同じ
13. data class Comic( val id: String, val title: String, val summary: String, val authors: ImmutableList<Author>, val imageUrl: String, ..., ) 13 Kotlin / kotlinx.collections.immutable を利用し ImmutableList を定義ができる 安定化の強制が可能
14. data class Comic( val id: String, val title: String, val summary: String, val authors: ImmutableList<Author>, val imageUrl: String, ..., ) 14 クラスの利用先も ImmutableList に依存 Composeとは無関係のモジュールも Composeに依存してしまう
15. 15 Model Tracker Compose Feature Compose Common Repository Compose 依存
16. とにかく依存が増える、なので
17. 17 Composableごとに
 「必要なデータのみ」を受け取る

18. @Composable fun ComicLineItem( comicId: String, comicTitle: String, comicImageUrl: String, comicSummary: String, onItemClick: (...) -> Unit = {}, ..., ) {...} ComicLineItemの例 18 必要なデータのみを Immutable な値として 受け取るようにする 引数が多く扱いにくくなる
19. data class ComicLineModel( val comicId: String, val comicTitle: String, val comicImageUrl: String, val comicSummary: String, ..., ) { constructor(comic: Comic) : this(...) } ComicLineItem用のModelを定義 19
20. 20 Model Tracker Compose Feature Compose Common Repository Compose 依存
21. 21 Model Tracker Compose Feature Compose Common Repository Compose 依存 Viewに関心のあるモジュー ルだけがComposeに依存
22. 22 課題①まとめ Composableごとに必要なデータのみを受け取るように することで、Composableが安定し、Composeに依存す るモジュールをViewに関心のあるものだけにできた。
23. 課題②
24. 24 機能開発、遅れてね？

25. 開発のおおまかな流れ 25 リ リ l ス 仕 様 決 定 実 装 検 証
26. Compose導入後の開発の流れ 26 リ リ l ス 仕 様 決 定 コ ン ポ l ズ 対 応 コ ン ポ l ズ 検 証 実 装 検 証 実装の前に、コンポーズ化する流れ
27. 実装対象の画面を先にCompose導入して しまえば、実装も楽になるのでは？
28. 28 そんなことない

29. あきらかにやること増えてる 29 リ リ l ス 仕 様 決 定 コ ン ポ l ズ 対 応 コ ン ポ l ズ 検 証 実 装 検 証 実装と検証が大変
30. Compose導入は最優先ではない、なので
31. 31 Composeの対応は「2番手」

32. 32 機能実装と検証を最優先しよう

33. リリースを分割する 33 リリース 仕様決定 実装 検証 リリース 観察 Compose 対応 Compose 検証 機能開発 の流れ Compose 化の流れ
34. 34 課題②まとめ Compose対応を機能開発のリリースとは別に行うこと で、余裕をもった機能開発を行うことができ、より 安定し た機能をユーザーに届けることができる ようになった
35. すんなりいかなかったこと
36. 36 HTMLを利用したText

37. val text = “Hello, <font color=\”blue\”>world</font>!!” // AndroidViewではHTMLが利用できた val textView = TextView(context) textView.text = text // ComposeではHTMLが利用できない Text(text = text) HTMLを利用したText 37
38. 38 HTMLをTextで利用する • 世の中では自作してるヒトも多い • joen93/compose-html-text を利用 • 公式実装まで待機
39. 39 縁取りしたText

41. 41 縁取りしたTextの実現 • 今ままでは自作のTextViewを利用 • Composeでの実装方法がわからん • 自作したTextViewを再利用（AndroidView）
42. 42 まとめ • 「必要なデータ」のみを受け取る • Composeの対応は「2番手」 • 機能開発と検証を優先しよう