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
220
Jetpack Composeを本番導入してみた結果と課題
YouTube :
https://youtu.be/bivQQpJEWKs
makun
April 20, 2023
Tweet
Share
More Decks by makun
See All by makun
既存コードへのテスト追加とリファクタリングの実践
makun
0
89
Compose Compiler Metrics 詳細と活用方法
makun
1
810
分析用コードをアプリから 切り離す設計の実現
makun
0
120
Other Decks in Programming
See All in Programming
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
170
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
140
テスト分析入門/Test Analysis Tutorial
goyoki
11
2.7k
Doma で目指す ORM 最適解
nakamura_to
1
160
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.5k
Agent Rules as Domain Parser
yodakeisuke
1
330
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
380
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
120
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
410
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Unsuck your backbone
ammeep
671
58k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Rails Girls Zürich Keynote
gr2m
94
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
650
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Building Adaptive Systems
keathley
41
2.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
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番手」 • 機能開発と検証を優先しよう