Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ZOZOTOWN Androidチームが Jetpack Compose導入に取り組む理由
Yusuke Yamada
August 06, 2021
Technology
0
5.3k
ZOZOTOWN Androidチームが Jetpack Compose導入に取り組む理由
Yusuke Yamada
August 06, 2021
Tweet
Share
More Decks by Yusuke Yamada
See All by Yusuke Yamada
ZOZOTOWNアプリへのIn-app_updatesの導入とその運用について.pdf
yymsdk
0
670
アプリのパフォーマンス改善を数値化
yymsdk
1
1k
Other Decks in Technology
See All in Technology
エンタープライズにおけるSRE立ち上げとNew Relic選定に至った背景とは / SRE Startup and New Relic in the Enterprise
tomoyakitaura
2
160
[SRE NEXT 2022]ヤプリのSREにおけるセキュリティ強化の取り組みを公開する
mmochi23
1
420
次期LTSに備えよ!AOS 6.1 HCI Core 編
smzksts
0
180
AWS Control TowerとAWS Organizationsを活用した組織におけるセキュリティ設定
fu3ak1
2
640
runn is a package/tool for running operations following a scenario. / golang.tokyo #32
k1low
1
180
YAMLを書くだけで構築できる分散ストレージ
sat
PRO
0
180
testing journey / Increase sensitivity to minor changes
aki_moon
1
250
アルプの 認証/認可分離戦略と手法
ma2k8
PRO
1
300
AWS ChatbotでEC2インスタンスを 起動できるようにした
iwamot
0
140
Dagu | オンプレ向けワークフローエンジン(WebUI 同梱)
yohamta
0
160
Agile and Requirement : アジャイルな要件定義について考える
kawaguti
PRO
5
1.3k
JAWS-UG 朝会 #33 登壇資料
takakuni
0
390
Featured
See All Featured
Facilitating Awesome Meetings
lara
29
3.9k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Why Our Code Smells
bkeepers
PRO
324
54k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
11k
KATA
mclloyd
7
8.6k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
Writing Fast Ruby
sferik
612
57k
The Invisible Side of Design
smashingmag
289
48k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Making Projects Easy
brettharned
98
4.3k
Embracing the Ebb and Flow
colly
73
3.3k
Documentation Writing (for coders)
carmenhchung
48
2.5k
Transcript
ZOZOTOWN Androidチームが Jetpack Compose導入に取り組む理由 株式会社ZOZOテクノロジーズ ZOZOTOWN本部 ZOZOアプリ部 Androidチーム リーダー 山田
祐介 Copyright © ZOZO Technologies, Inc. 2021/08/05(Thu) Android Meetup【ZOZOテクノロジーズ × サイバーエージェント × GMOペパボ】
© ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ ZOZOTOWN本部 ZOZOアプリ部 Androidチーム リーダー 山田
祐介 2015年に現在の株式会社ZOZOテクノロジーズに入社。 2019年からAndroidチームリーダーを担当。現在8名のメンバー に支えられながらリーダーとして奮闘中! 2
© ZOZO Technologies, Inc. https://zozo.jp/ 3 • 日本最大級のファッション通販サイト • 1,400以上のショップ、8,200以上のブランドの取り扱い(ともに2021年3月
末時点) • 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品 を掲載 • コスメ専門モール「ZOZOCOSME」や靴の専門モール 「ZOZOSHOES」、ラグジュアリー&デザイナーズゾーン 「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など
© ZOZO Technologies, Inc. 本スライドを通して伝えたいこと Jetpack Composeは色んな課題をきっと解 決してくれる!みんな学ぼう!
4 スライド内容の要約 ZOZOTOWN AndroidのUI実装に関する課題とComposeの特性を交えながら、 なぜZOZOTOWN AndroidチームがJetpack Compose導入に取り組んでいるのかを紹介
© ZOZO Technologies, Inc. 5 アジェンダ • Jetpack Composeとの出会い •
ZOZOTOWN Androidが抱えるUI実装の課題 • チームが注目したJetpack Composeの特性 • まとめ
© ZOZO Technologies, Inc. Jetpack Composeとの出会い 6
© ZOZO Technologies, Inc. Jetpack Composeとの出会い Codelab会 • ZOZOTOWN Androidチーム内の取り組み(テックブログで紹介しています)
• メンバーが興味ある、またはプロダクトに必要になりそうな技術についての勉強会 • Composeの前はExoPlayer、DaggerHilt、Coroutineなどを実施 • Composeに関してはPathwaysがあったのでそれに沿って実施 7
© ZOZO Technologies, Inc. Jetpack Composeとの出会い Jetpack Compose Pathways 8
• Composeに関する記事や動画、コードラボが集約・整理されている • チームでの取り組みは2021/4/15から開始 (2021/7末時点で6,Layouts in Jetpack Compose) • 進めていく中でZOZOTOWNの課題解決へのつながりを発見 https://developer.android.com/courses/pathways/compose
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 9
© ZOZO Technologies, Inc. 10 ZOZOTOWN Androidが抱えるUI実装の課題 • Viewの状態管理が複雑 •
Viewのパフォーマンスに警告 • Viewの状態考慮漏れ
© ZOZO Technologies, Inc. 11 ZOZOTOWN Androidが抱えるUI実装の課題 • Viewの状態管理が複雑 •
Viewのパフォーマンスに警告 • Viewの状態考慮漏れ
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 Viewの状態管理が複雑 12
• 1つの画面を複数のカスタムViewで構成している • カスタムViewの状態変化(データの更新)は、いくつかのタイミングで行われる ◦ 初期化時、通信のレスポンス取得後、関連するUIの変更時、Fragmentの再生成時、etc. • 古くから存在し、機能も多い画面は、リファクタリングが進んでいないのでさらに複雑に
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 例:検索画面 13
• アプリの核となる画面、機能追加も頻繁に実施 • レガシーコードが残り続けている(Fragmentの行数3000行超え) • 検索条件として設定できるパラメータは30種類以上 • 各Viewが複数の状態を持ち、またそれらが関連を持っている
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 例:検索画面 14
• アプリの核となる画面、機能追加も頻繁に実施 • レガシーコードが残り続けている(Fragmentの行数3000行超え) • 検索条件として設定できるパラメータは30種類以上 • 各Viewが複数の状態を持ち、またそれらが関連を持っている
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 15 例:新品/古着の切り替え
• 「カラーをまとめる」表示が変わる • 並び順が「あなたにおすすめ順」と「人気順」 これらは通信結果で制御しているが、 バックスタックからの復元では通信は走らないため、別でロ ジックを用意 -> バグの温床になりつつある
© ZOZO Technologies, Inc. 16 ZOZOTOWN Androidが抱えるUI実装の課題 • Viewの状態管理が複雑 •
Viewのパフォーマンスに警告 • Viewの状態考慮漏れ
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 Viewのパフォーマンスに警告 17
• アプリの核となる商品画面で発生 • Android Lintで警告(80以上のViewはパフォーマンスに悪い) • パフォーマンス改善のためにRecyclerView化を検討
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 Viewのパフォーマンスに警告 18
• アプリの核となる商品画面で発生 • Android Lintで警告(80以上のViewはパフォーマンスに悪い) • パフォーマンス改善のためにRecyclerView化を検討 ◦ 一定の塊ごとにカスタムView化 ◦ それぞれ別のViewTypeを定義 ◦ Viewの使い回しではなく、必要になるまで生成しない特性を利用
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 19 ViewTypeの管理はあまりしたくない
RecyclerView.AdapterのgetItemCount()やgetItemViewType()、onBindViewHolder()などをそれぞれ整合性が あうように実装しなければいけない ViewType対策 ConcatAdapterやEpoxyでの実装を検討 ※Epoxyはすでにホーム画面で実績あり パフォーマンス改善のより良い方法を探していた
© ZOZO Technologies, Inc. 20 ZOZOTOWN Androidが抱えるUI実装の課題 • Viewの状態管理が複雑 •
Viewのパフォーマンスに警告 • Viewの状態考慮漏れ
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 Viewの状態考慮漏れ 21
• アプリの核となる商品画面でよく発生 • 状態の変化は少ないものの、パターンが多いのが原因 • テストも書けていないためレビューやQAで発覚する
© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題 22 実際にあった考慮漏れ:
• 同じプログラムだがそれぞれ違う商品の値段まわりの表示 • 即日配送のViewにmargin_bottomを設定して実装していたため、即日配送のViewが表示されない商品で デザイン崩れが発生 -> パターンが多いため考慮漏れのリスクも高くなっている ↑こちらがデザイン崩れ
© ZOZO Technologies, Inc. 23 ZOZOTOWN Androidが抱えるUI実装の課題 • Viewの状態管理が複雑 ◦
特に検索画面は各Viewの状態が複数あり、それが変化するタイミングも複数ある • Viewのパフォーマンスに警告 ◦ 商品画面にてAndroid Lintから警告 • Viewの状態考慮漏れ ◦ 特に商品画面のパターンを開発時に網羅しにくくなっている
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 24
© ZOZO Technologies, Inc. 25 チームが注目したJetpack Composeの特性 • 宣言的UI •
パフォーマンスの最適化 • 便利なプレビュー機能
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 宣言的UI
26 • 状態をUIに変換するという考え方 • UI生成後に中身は更新することができない、更新させるにはUIを再生成する ※What's new in Jetpack Composeの動画2:40あたりからそのような話をしています https://youtu.be/7Mf2175h3RQ?t=162
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 27 状態:1
UI:1 状態をUIに変換 UI:1 UI:2 UI生成後は中身は変化しない 状態:2 UI:2 UIは変化しないので、新しい状態からUIを再生成 状態がデータで、UIがComposable関数が生成するもの
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 28 Composeの思想より抜粋
名前のリストを引数に名前の数だけ 「Hello 名前」を表示する • 前のスライドでいう「状態」はnamesパラメータ • 「UI」はComposable関数が生成するもの(戻り値がないのに注目) • Composable関数内で生成されたUIを変えるには引数を変えるしかない
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 29 Composeの思想より抜粋
グレーの四角がComposable関数。 最上位からデータを渡していく • データの一元化が可能 • 一元化してもパフォーマンスは最適化される
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 30 Composeの思想より抜粋
グレーの四角がComposable関数。 最上位からデータを渡していく • データの一元化が可能 • 一元化してもパフォーマンスは最適化される ◦ 状態の変更があるComposable関数のみ再実行される -> 検証
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 31 •
3つの名前(yamada,takahashi,suzuki)に挨拶をする • ボタンを押すとyamadaがyusukeに変わる
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 32 •
他のComposable関数はこのような感じ • ThreeGreetingはGreetingを3回実行 • Greetingは挨拶の表示とログ出力 • NameChangerは引数のラムダを実行するボタン
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 33 実行結果(画面)
実行結果(ログ) • 名前のリストを作り直しているが、ボタンを押した後のログはyusukeのみ • 変化していないtakahashiとsuzukiは再生成(再コンポーズ)されていない • 差分更新を実装側は考えなくていい
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 34 課題:検索画面の各Viewの状態が複数あり、その変化・復元を意識しなければならない
Composeに移行すれば • 検索画面の各Viewの状態管理を一元化可能 • 一元化したものを正しく更新・維持すればいい ◦ その更新のタイミングを気にする必要がない ※Composeでなくても一元化は可能だが思想として明確になっているほうがメンバー全員が共 通認識を持ちやすい
© ZOZO Technologies, Inc. 結果:バグが減り、開発スピードも上がりそう! 35 チームが注目したJetpack Composeの特性
© ZOZO Technologies, Inc. 36 チームが注目したJetpack Composeの特性 • 宣言的UI •
パフォーマンスの最適化 • 便利なプレビュー機能
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 パフォーマンスの最適化
37 • Composeの思想に内容がまとまっている • 前のスライドの内容も「再コンポーズは可能な限りスキップする」として記載されている • さらに気になる内容が「コンポーズ可能な関数は並行して実行できる」に記載されている
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 38 コンポーズ可能な関数は並行して実行できる
記載内容抜粋 >Compose は複数のコアを活用し、画面上にないコンポーズ可能な関数を、より低い優先度で実行します。 >この最適化は、コンポーズ可能な関数がバックグラウンド スレッドのプール内で実行される可能性があること を意味します。
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 LazyColumnの存在
39 • RecyclerViewのCompose版 • Adapterのようなものは無い • 各Composeを画面内に表示される直前で生成する
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 40 LazyColumnの存在
itemsを分けるだけでRecyclerViewでいうViewTypeの実装が実現可能
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 41 課題:商品画面のパフォーマンス警告を改善しなければならない
Composeに移行すれば • 並列実行でのパフォーマンス最適化 ◦ ユーザーがより早く画面を操作できるようになる • LazyColumnを利用すればRecyclerView化がより簡単に実現できそう
© ZOZO Technologies, Inc. 結果:画面の起動速度が向上しそう! (パフォーマンスが向上しそう!) 42 チームが注目したJetpack Composeの特性
© ZOZO Technologies, Inc. 43 チームが注目したJetpack Composeの特性 • 宣言的UI •
パフォーマンスの最適化 • 便利なプレビュー機能
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 便利なプレビュー機能
44 • @PreviewをComposable関数につけるだけでアプリをビルドしなくても確認可能 • 1つのファイル内に複数のプレビューを用意することも可能
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 45 Preview機能の紹介
最大2行まで文章を表示しそれ以上は...にするComposable関数とそのプレビュー
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 46 Preview機能の紹介
@Previewをつけた関数を増やすだけで複数のパターンを一度に目視可能
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 47 maxLinesを3に増やしてみる
プレビューも同時に更新される
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 48 課題:商品画面のパターンを開発時に網羅しなければならない
Composeに移行すれば • Previewをたくさん用意することでパターンの確認がしやすくなる • デザイン実装のコードレビューも捗りそう
© ZOZO Technologies, Inc. 結果:デザイン実装時の網羅性が向上しそう 49 チームが注目したJetpack Composeの特性
© ZOZO Technologies, Inc. 50 チームが注目したJetpack Composeの特性 • 宣言的UI ◦
Viewで複雑になっている状態管理がスッキリできそう • パフォーマンスの最適化 ◦ Viewが多い画面も複数スレッドの活用で高速化できそう ◦ RecyclerViewのような実装も簡単に実現しやすそう • 便利なプレビュー機能 ◦ 色々な状態も簡単に再現・確認ができ開発効率があがりそう
© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性 他にもいろいろ
51 メンバーからでた今日解説できなかった意見(Composeの良さそうなところ) • テストが書きやすい • Composeを使うことでUIの実装が楽になる(と考えている)→開発のスピードがあがる • 既存のZOZOTOWNではJetpack標準のアーキテクチャを採用していたため、Composeが導入しやすかった • Swift UIやFlutter, ReactNativeなど、モバイル界隈では宣言的UIに移行が進んでいるので検討する価値があった (チーム内にはReact経験者もいた) • チームのモチベーションがあがる→生産性の向上が期待できる
© ZOZO Technologies, Inc. まとめ • Jetpack Composeは、ZOZOTOWN Androidの課題を解決する糸口だった
• Composeの思想を理解して実装するととても良さそう ◦ バグが減り、開発スピードが向上しそう ◦ 描画パフォーマンスが向上しそう • Preview機能の活用で網羅性が向上しそう • Jetpack Composeは色んな課題をきっと解決してくれる!みんな学ぼう! ◦ 学習はJetpack Compose Pathwaysがおすすめ 52
© ZOZO Technologies, Inc. Happy composing! 53
© ZOZO Technologies, Inc. 最後に ZOZOテクノロジーズではAndroidエンジニアの採用を積極的に行っています。 本スライドの話や会社について少しでも興味を持っていただけましたら以下のURLからご応募く ださい。 本スライド作成者がカジュアル面談をさせていただきます
https://hrmos.co/pages/zozotech/jobs/0000194 54
None