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
AndroidDevSummit2022
Search
shinsuke-fujita
November 29, 2022
Programming
0
1.3k
AndroidDevSummit2022
From Views to Composeのまとめと実践
shinsuke-fujita
November 29, 2022
Tweet
Share
More Decks by shinsuke-fujita
See All by shinsuke-fujita
GoogleI/O2024 LT報告会資料
shinsukefujita1126
1
450
GoogleI/O2023 LT報告会資料
shinsukefujita1126
0
820
KMMで始めるマルチプラットフォーム開発
shinsukefujita1126
0
230
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
1.5k
Other Decks in Programming
See All in Programming
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
130
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
770
Go の GC の不得意な部分を克服したい
taiyow
3
780
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
5
760
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
220
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
250
useSyncExternalStoreを使いまくる
ssssota
6
1k
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
250
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
260
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing Experiences People Love
moore
138
23k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
98
Scaling GitHub
holman
458
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Making the Leap to Tech Lead
cromwellryan
133
9k
Mobile First: as difficult as doing things right
swwweet
222
9k
Transcript
Android Dev Summit ‘22 From Views to Compose: Where can
I start? サイボウズ株式会社 藤⽥真輔(@fujipon1126)
なぜこのセッションを選んだ? • 継続的にJetpack Composeについて学習したい • プロダクトにJetpack Composeを導⼊したい
セッション概要 • 以下のページの内容を説明した感じで、それ以上でもそれ以下 でもない • https://developer.android.com/jetpack/compose/interop/migration- strategy • 既存プロダクトのComposeへの移⾏は3つの戦略で進めると良い 1.
New Features(新機能の作成) 2. Common UI(UIコンポーネントのライブラリ作成) 3. Existing Features(既存機能の置き換え) ※プロダクトの規模などにより適切に対応する
1. New Features(新機能) • Composeを利⽤して新機能を作る場合でも、既存アーキテク チャの制約下で実施する • FragmentとNavigationコンポーネントを利⽤してる場合は、 Fragmentを作成しComposeViewを返す •
新しい機能が既存の画⾯の⼀部になる場合は、他のビューと同 様に、ComposeView を UI 階層に追加する
2. Common UI(UIコンポーネントのライブラリモ ジュール作成) • Compose を使⽤して機能を作成する場合、結果としてコン ポーネントのライブラリを構築することになるはず • モジュールを作成することで、コンポーネントの信頼できる唯
⼀の情報源を保持して、再利⽤性を促進できる • アプリのサイズに応じて、このライブラリは別個のパッケージ、 モジュール、ライブラリ モジュールにすることができる
3. Existing Features(既存機能の置き換え) • 既存機能を段階的に移⾏することが可能 • まずはシンプルな画⾯を置き換え(少量のコードで書き直せる) • ViewとComposeが混在してる画⾯も完全移⾏の有⼒候補 •
複雑さに応じて段階的に移⾏を繰り返し画⾯全体がComposeに なるまで⾏う(ボトムアップアプローチ) • 最終的にUI全てがComposeになると、Fragmentを使⽤するメ リットがほぼ無いので、Composeを利⽤したナビゲーションを 検討する
その他 • 既存のテーマを再利⽤できる • MDC ライブラリを使⽤中→MDC Compose Theme Adapter ライブ
ラリを使⽤ • AppCompatXMLテーマを使⽤中→AppCompat Compose Theme Adapter を使⽤
内容踏まえて実践してみた • サンプルプロジェクトを以下の条件で作成(migration-view-to-compose) SingleActivity & Viewベース & NavigationComponentで画⾯遷移 - MainActivity
- NavigationComponentによる画⾯遷移を提供 - MainFragment - 各サブ画⾯への遷移ボタンがある - Sub1Fragment - Buttonを押すとEditTextに⼊⼒された⽂字をTextViewにコピー - Sub2Fragment - ImageViewとButtonがあって、SeekBarも置いてる - Sub3Fragment - RecyclerViewに50アイテム表⽰
New Featuresの実践 • Sub4画⾯をComposeで作る(Sub4Fragment/Sub4Screen) Sub4Fragment抜粋
Common UIの実践 • common-uiモジュールを作りCommonButtonコンポーザブル を作る(共通ボタン) • appモジュールでcommon-uiの CommonButtonを参照する
Existing Featuresの実践(画⾯の⼀部) • ボタンが複数ある画⾯の⼀部(Sub1ボタン)だけComposeに置 き換える • レイアウト/コード
Existing Featuresの実践(画⾯全体) • RecyclerViewの画⾯をComposeで置き換え View Compose
引⽤元 • From Views to Compose: Where can I start?
- YouTube • Compose をアプリに導⼊する - Android Developers • 移⾏戦略 – Android Developers • fujipon1126/migration-view-to-compose