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
93
Compose Compiler Metrics 詳細と活用方法
makun
1
820
分析用コードをアプリから 切り離す設計の実現
makun
0
120
Other Decks in Programming
See All in Programming
イベントストーミングから始めるドメイン駆動設計
jgeem
4
870
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
0
200
生成AIで日々のエラー調査を進めたい
yuyaabo
0
620
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
200
WindowInsetsだってテストしたい
ryunen344
1
190
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
290
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
For a Future-Friendly Web
brad_frost
179
9.8k
Rails Girls Zürich Keynote
gr2m
94
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Become a Pro
speakerdeck
PRO
28
5.4k
We Have a Design System, Now What?
morganepeng
52
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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番手」 • 機能開発と検証を優先しよう