Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jetpack Composeを本番導入してみた結果と課題
Search
makun
April 20, 2023
Programming
1
200
Jetpack Composeを本番導入してみた結果と課題
YouTube :
https://youtu.be/bivQQpJEWKs
makun
April 20, 2023
Tweet
Share
More Decks by makun
See All by makun
既存コードへのテスト追加とリファクタリングの実践
makun
0
78
Compose Compiler Metrics 詳細と活用方法
makun
1
770
分析用コードをアプリから 切り離す設計の実現
makun
0
120
Other Decks in Programming
See All in Programming
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
はじめての Go * WASM *OCR
sgash708
1
100
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
技術を改善し続ける
gumioji
0
120
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
260
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Statistics for Hackers
jakevdp
797
220k
Code Reviewing Like a Champion
maltzj
521
39k
Agile that works and the tools we love
rasmusluckow
328
21k
Done Done
chrislema
182
16k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Cult of Friendly URLs
andyhume
78
6.2k
What's in a price? How to price your products and services
michaelherold
244
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Transcript
Jetpack Composeを 本番導入してみた結果と課題 pixiv App Night pixiv Inc. makun /
齊藤 2022.10.27
2 概要 • 「パルシィ」にCompose導入をした • 導入は今年(2022年)5月から • 既存のAndroidViewを徐々に置き換えた • 6ヶ月間での課題とその対応のいちぶを紹介
パルシィとは
4
5 makun wcaokaze akira
6 Compose 導入の理由 • 単純にメリットが大きい • ラージスクリーンやフォルダブルの対応 • 導入を進め開発経験と基盤を整える •
気持ち
課題①
8 うちらのComposable、 パフォーマンス悪くね?
@Composable fun ComicLineItem( comic: Comic, onItemClick: () -> Unit =
{}, ..., ) {...} Composableの例 9
data class Comic( val id: String, val title: String, val
summary: String, val authors: List<Author>, val imageUrl: String, ..., ) 受け取っているデータの例 10 Composableの引数にしたとき、 必要のない再コンポーズが 起こるようになる List やその中身が Immutableではない
@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 を宣言すれ ば良さそう? 良くない
@Immutable data class Comic( val id: String, val title: String,
val summary: String, val authors: List<Author>, val imageUrl: String, ..., ) 12 MutableList の可能性があり 運用を間違えると壊れる Kotlin でいう「 !! 」と同じ
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 を定義ができる 安定化の強制が可能
data class Comic( val id: String, val title: String, val
summary: String, val authors: ImmutableList<Author>, val imageUrl: String, ..., ) 14 クラスの利用先も ImmutableList に依存 Composeとは無関係のモジュールも Composeに依存してしまう
15 Model Tracker Compose Feature Compose Common Repository Compose 依存
とにかく依存が増える、なので
17 Composableごとに 「必要なデータのみ」を受け取る
@Composable fun ComicLineItem( comicId: String, comicTitle: String, comicImageUrl: String, comicSummary:
String, onItemClick: (...) -> Unit = {}, ..., ) {...} ComicLineItemの例 18 必要なデータのみを Immutable な値として 受け取るようにする 引数が多く扱いにくくなる
data class ComicLineModel( val comicId: String, val comicTitle: String, val
comicImageUrl: String, val comicSummary: String, ..., ) { constructor(comic: Comic) : this(...) } ComicLineItem用のModelを定義 19
20 Model Tracker Compose Feature Compose Common Repository Compose 依存
21 Model Tracker Compose Feature Compose Common Repository Compose 依存
Viewに関心のあるモジュー ルだけがComposeに依存
22 課題①まとめ Composableごとに必要なデータのみを受け取るように することで、Composableが安定し、Composeに依存す るモジュールをViewに関心のあるものだけにできた。
課題②
24 機能開発、遅れてね?
開発のおおまかな流れ 25 リ リ l ス 仕 様 決 定
実 装 検 証
Compose導入後の開発の流れ 26 リ リ l ス 仕 様 決 定
コ ン ポ l ズ 対 応 コ ン ポ l ズ 検 証 実 装 検 証 実装の前に、コンポーズ化する流れ
実装対象の画面を先にCompose導入して しまえば、実装も楽になるのでは?
28 そんなことない
あきらかにやること増えてる 29 リ リ l ス 仕 様 決 定
コ ン ポ l ズ 対 応 コ ン ポ l ズ 検 証 実 装 検 証 実装と検証が大変
Compose導入は最優先ではない、なので
31 Composeの対応は「2番手」
32 機能実装と検証を最優先しよう
リリースを分割する 33 リリース 仕様決定 実装 検証 リリース 観察 Compose 対応
Compose 検証 機能開発 の流れ Compose 化の流れ
34 課題②まとめ Compose対応を機能開発のリリースとは別に行うこと で、余裕をもった機能開発を行うことができ、より 安定し た機能をユーザーに届けることができる ようになった
すんなりいかなかったこと
36 HTMLを利用したText
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 HTMLをTextで利用する • 世の中では自作してるヒトも多い • joen93/compose-html-text を利用 • 公式実装まで待機
39 縁取りしたText
40
41 縁取りしたTextの実現 • 今ままでは自作のTextViewを利用 • Composeでの実装方法がわからん • 自作したTextViewを再利用(AndroidView)
42 まとめ • 「必要なデータ」のみを受け取る • Composeの対応は「2番手」 • 機能開発と検証を優先しよう