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
660
GoogleI/O2023 LT報告会資料
shinsukefujita1126
0
940
KMMで始めるマルチプラットフォーム開発
shinsukefujita1126
0
290
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
1.7k
Other Decks in Programming
See All in Programming
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
ニーリーにおけるプロダクトエンジニア
nealle
0
890
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
280
PipeCDのプラグイン化で目指すところ
warashi
1
290
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
180
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Statistics for Hackers
jakevdp
799
220k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Designing for Performance
lara
610
69k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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