Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
20210621-mftd-GoogleIORecap-Namazu
Namazu
June 21, 2021
Technology
0
140
20210621-mftd-GoogleIORecap-Namazu
Namazu
June 21, 2021
Tweet
Share
Other Decks in Technology
See All in Technology
How We Foster Reliability in Diversity
nari_ex
PRO
8
2.3k
Power BIのモバイルと都 +1 / Tokyo
ishiayaya
0
140
Nutanix_Meetup_20220511
keigotomomatsu
0
140
モデリング、コンテキスト トランジション +1 / Data modeling
ishiayaya
0
110
【OCHaCafe#5】その Pod 突然落ちても大丈夫ですか?
k6s4i53rx
1
120
⚡Lightdashを試してみた
k_data_analyst
0
160
220428event_overview
caddi_eng
2
210
完全に理解した incremetal 〜そして、何もわからないへ〜
mashiike
0
210
Oracle Database Technology Night #55 Oracle Autonomous Database 再入門
oracle4engineer
PRO
1
110
読者のことを考えて書いてみよう / Write with your reader in mind
line_developers
PRO
3
320
GitHub 엔터프라이즈 어카운트 소개 및 엔터프라이즈 서버 구축 경험
posquit0
1
140
JAWS-UG 朝会 #33 登壇資料
takakuni
0
370
Featured
See All Featured
Clear Off the Table
cherdarchuk
79
280k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
430
For a Future-Friendly Web
brad_frost
164
7.4k
Atom: Resistance is Futile
akmur
255
20k
What's in a price? How to price your products and services
michaelherold
229
9.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Building Adaptive Systems
keathley
25
1.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
It's Worth the Effort
3n
172
25k
A designer walks into a library…
pauljervisheath
196
16k
Bootstrapping a Software Product
garrettdimon
295
110k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Transcript
© 2021 eureka, Inc. All Rights Reserved. 初めての Jetpack Compose
【3社合同】Money Forward Tech Drive - #IO21 Recap 2021.6.21 Namazu @eureka
© 2021 eureka, Inc. All Rights Reserved. 自己紹介 • Namazu
• 2021年新卒Androidエンジニア • BlondeNamazu • @blonde_namazu
© 2021 eureka, Inc. All Rights Reserved.
4 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting コミュニティチャット © 2021 eureka, Inc. All Rights Reserved. 新機能
5 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting • Jetpack Composeとは? • Jetpack Compose移行のメリット • Jetpack Compose移行のコスト • まとめ 目次 © 2021 eureka, Inc. All Rights Reserved.
6 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Composeとは? © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは? •
Googleが提供する宣言的UIツールキット • 既存のxmlベースのViewシステムの代替となる • 2021年7月に1.0 (stable) 配信予定! • 既に導入している企業も多数
© 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは? •
Jetpack Composeの例
© 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは? •
Jetpack Composeの例
10 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Compose移行のメリット © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット 宣言的UI
SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:宣言的UI 宣言的UI
SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
© 2021 eureka, Inc. All Rights Reserved. • 宣言的UIとは何か? ◦
“Single source of truth”に従う ◦ 与えられた状態に対してのみ依存し、一意に振る舞いが定まるUI ◦ 既存のxmlベースのViewシステムのような、状態に対応したUIの生成方法を記 述する手法とは異なる Jetpack Compose移行のメリット:宣言的UI
© 2021 eureka, Inc. All Rights Reserved. • 各Viewが状態を持ち、コードでそれぞれ更新していく仕組みは複雑 Jetpack
Compose移行のメリット:宣言的UI
© 2021 eureka, Inc. All Rights Reserved. • 宣言的UIではUIは与えられた状態に対して不変なViewを生成する Jetpack
Compose移行のメリット:宣言的UI
© 2021 eureka, Inc. All Rights Reserved. • Jetpack Composeの利点:表示ロジックのカプセル化
◦ Compose関数の中身に外部から アクセスすることは出来ない ◦ 意図しないUIのバグを未然に防ぐ Jetpack Compose移行のメリット:宣言的UI
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:デザインツール 宣言的UI
SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
© 2021 eureka, Inc. All Rights Reserved. Compose Preview •
UIパーツ単位でプレビュー出来る • @Preview を付けるだけ! • 同時に様々なパターンをプレビューす ることが可能 ex) Light Theme / Dark Theme スクリーン全体 / UI単体 Jetpack Compose移行のメリット:デザインツール
© 2021 eureka, Inc. All Rights Reserved. Compose Preview •
UIパーツ単位でプレビュー出来る • @Preview を付けるだけ! • 同時に様々なパターンをプレビューす ることが可能 ex) Light Theme / Dark Theme スクリーン全体 / UI単体 Jetpack Compose移行のメリット:デザインツール
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:デザインツール Sample
Data • UIに与える状態について様々なパター ンを同時に検証可能 ex) リストのデータ数 0/少/多 文字列長 0/短/長
© 2021 eureka, Inc. All Rights Reserved. Sample Data Jetpack
Compose移行のメリット:デザインツール • UIに与える状態について様々なパター ンを同時に検証可能 ex) リストのデータ数 0/少/多 文字列長 0/短/長
© 2021 eureka, Inc. All Rights Reserved. Interactive Preview Jetpack
Compose移行のメリット:デザインツール • プレビュー画面でユーザー操作に対応 するUIの挙動を確認可能
© 2021 eureka, Inc. All Rights Reserved. Live literals Jetpack
Compose移行のメリット:デザインツール • リテラルの変更を即座にプレビューに 反映 ex) テキスト、数値、色、etc…
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:その他 宣言的UI
SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
© 2021 eureka, Inc. All Rights Reserved. • Material Designに基づくアプリ独自のテーマ
• ネストされたUIの描画パフォーマンスの向上 • アニメーションサポートの強化 Jetpack Compose移行のメリット:その他
26 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Compose移行のコスト © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のコスト xmlベースのViewシステムと共存可能なので、徐々に移行できる!
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のコスト Compose
in XML, XML in Composeのどちらも可能!
29 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting まとめ © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. まとめ • Jetpack
Composeとは宣言的UIツールキットである • Jetpack Compose移行のメリットは多数! ◦ 宣言的UIの実現 ◦ デザインツールのサポートが強力 ◦ テーマの一貫性が保てる • Jetpack ComposeはxmlベースのViewシステムと 共存可能なので、徐々に移行可能!
© 2021 eureka, Inc. All Rights Reserved. 関連セッション
32 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting 関連セッション © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. 関連セッション What’s new
in Jetpack Compose • Jetpack Composeの概要を16分で説明 • まずはこれを見るのがオススメ
© 2021 eureka, Inc. All Rights Reserved. 関連セッション • Jetpack
Composeの基本的な使い方を 教えてくれるWorkShop • 50分あるが、非常に分かりやすい Jetpack Basics
© 2021 eureka, Inc. All Rights Reserved. 関連セッション • 既存のJetpackライブラリとComposeの
組み合わせ方を説明 • Composeのベストプラクティスにも触れて いるので、実用に役立ちそう Using Jetpack Libraries in Compose
© 2021 eureka, Inc. All Rights Reserved. 関連セッション • セッション後半でJetpack
Composeのデ ザインツールについて説明 • 前半の内容はComposeに関係ないが、 アニメーションに関してのアップデートも面 白かったので余裕があれば是非 What’s new in design tools
© 2021 eureka, Inc. All Rights Reserved. 関連セッション • Jetpack
Compose中でマテリアルデザイ ンを用いる方法の説明 • デザイナーの参考にもなりそう Build beautiful Material Design apps with Jetpack Compose