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
110
Jetpack Composeを本番導入してみた結果と課題
YouTube :
https://youtu.be/bivQQpJEWKs
makun
April 20, 2023
Tweet
Share
More Decks by makun
See All by makun
Compose Compiler Metrics 詳細と活用方法
makun
1
460
分析用コードをアプリから 切り離す設計の実現
makun
0
110
Other Decks in Programming
See All in Programming
Ruby GitHub Packages
bkuhlmann
0
620
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
0
110
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
What We Can Learn From OSS
inouehi
0
400
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
350
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
3
520
エンターテイメント業界で利用されるAWS
demuyan
0
200
Ruby Pattern Matching
bkuhlmann
0
920
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
Java 22 Overview
kishida
1
170
PostmanでAPIの動作確認が楽になった話
h455h1
0
130
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Raft: Consensus for Rubyists
vanstee
132
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Rails Girls Zürich Keynote
gr2m
91
13k
Atom: Resistance is Futile
akmur
258
25k
Music & Morning Musume
bryan
41
5.6k
Navigating Team Friction
lara
177
13k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
KATA
mclloyd
14
12k
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番手」 • 機能開発と検証を優先しよう