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.2k
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
390
GoogleI/O2023 LT報告会資料
shinsukefujita1126
0
780
KMMで始めるマルチプラットフォーム開発
shinsukefujita1126
0
220
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
1.5k
Other Decks in Programming
See All in Programming
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
2
320
僕がつくった48個のWebサービス達
yusukebe
17
16k
今日で分かる!カスタムコップの作り方
krpk1900
2
360
AWS IaCの注目アップデート 2024年10月版
konokenj
3
550
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
0
200
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
2
2.6k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
350
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
270
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
0
1.2k
Honoの来た道とこれから
yusukebe
18
2.9k
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
4
2.2k
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.2k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
How GitHub (no longer) Works
holman
311
140k
Building an army of robots
kneath
302
42k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Producing Creativity
orderedlist
PRO
341
39k
A designer walks into a library…
pauljervisheath
202
24k
Optimising Largest Contentful Paint
csswizardry
32
2.9k
Facilitating Awesome Meetings
lara
49
6k
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