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
230
Jetpack Composeを本番導入してみた結果と課題
YouTube :
https://youtu.be/bivQQpJEWKs
makun
April 20, 2023
Tweet
Share
More Decks by makun
See All by makun
No More Writing Test Code: JetBrains AI Assistant Automates Design and Generation of Asynchronous Processing Tests
makun
0
25
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
150
既存コードへのテスト追加とリファクタリングの実践
makun
0
110
Compose Compiler Metrics 詳細と活用方法
makun
1
860
分析用コードをアプリから 切り離す設計の実現
makun
0
130
Other Decks in Programming
See All in Programming
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
個人軟體時代
ethanhuang13
0
320
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
Swift Updates - Learn Languages 2025
koher
2
460
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
20
11k
Claude Codeで挑むOSSコントリビュート
eycjur
0
200
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
250
rage against annotate_predecessor
junk0612
0
160
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Gamification - CAS2011
davidbonilla
81
5.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Writing Fast Ruby
sferik
628
62k
Agile that works and the tools we love
rasmusluckow
330
21k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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番手」 • 機能開発と検証を優先しよう