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.4k
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
540
GoogleI/O2023 LT報告会資料
shinsukefujita1126
0
890
KMMで始めるマルチプラットフォーム開発
shinsukefujita1126
0
260
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
1.6k
Other Decks in Programming
See All in Programming
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
130
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
エンジニア未経験が最短で戦力になるためのTips
gokana
0
220
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
190
AI Agents with JavaScript
slobodan
0
170
custom_lintで始めるチームルール管理
akaboshinit
0
160
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
7
4k
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.8k
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
3
740
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
300
プログラミング教育のコスパの話
superkinoko
0
120
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
3
1.8k
Featured
See All Featured
Making Projects Easy
brettharned
116
6.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Visualization
eitanlees
146
16k
How to Ace a Technical Interview
jacobian
276
23k
What's in a price? How to price your products and services
michaelherold
245
12k
Speed Design
sergeychernyshev
28
870
The Language of Interfaces
destraynor
157
24k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Building an army of robots
kneath
304
45k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
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