ZOZOTOWN Androidチームが Jetpack Compose導入に取り組む理由

Slide 1

Slide 1 text

ZOZOTOWN Androidチームが  Jetpack Compose導入に取り組む理由  株式会社ZOZOテクノロジーズ  ZOZOTOWN本部 ZOZOアプリ部 Androidチーム  リーダー山田祐介      Copyright © ZOZO Technologies, Inc. 2021/08/05(Thu)  Android Meetup【ZOZOテクノロジーズ × サイバーエージェント × GMOペパボ】 

Slide 2

Slide 2 text

Slide 3

Slide 3 text

© ZOZO Technologies, Inc. https://zozo.jp/  3 ● 日本最大級のファッション通販サイト  ● 1,400以上のショップ、8,200以上のブランドの取り扱い（ともに2021年3月末時点）  ● 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着商品を掲載  ● コスメ専門モール「ZOZOCOSME」や靴の専門モール  「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン  「ZOZOVILLA」を展開  ● 即日配送サービス  ● ギフトラッピングサービス  ● ツケ払いなど 

Slide 4

Slide 4 text

© ZOZO Technologies, Inc. 本スライドを通して伝えたいこと  Jetpack Composeは色んな課題をきっと解決してくれる！みんな学ぼう！      4 スライド内容の要約  ZOZOTOWN AndroidのUI実装に関する課題とComposeの特性を交えながら、  なぜZOZOTOWN AndroidチームがJetpack Compose導入に取り組んでいるのかを紹介 

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© ZOZO Technologies, Inc. Jetpack Composeとの出会い  Codelab会  ● ZOZOTOWN Androidチーム内の取り組み（テックブログで紹介しています）  ● メンバーが興味ある、またはプロダクトに必要になりそうな技術についての勉強会  ● Composeの前はExoPlayer、DaggerHilt、Coroutineなどを実施  ● Composeに関してはPathwaysがあったのでそれに沿って実施    7

Slide 8

Slide 8 text

© ZOZO Technologies, Inc. Jetpack Composeとの出会い  Jetpack Compose Pathways  8 ● Composeに関する記事や動画、コードラボが集約・整理されている  ● チームでの取り組みは2021/4/15から開始  （2021/7末時点で６,Layouts in Jetpack Compose）  ● 進めていく中でZOZOTOWNの課題解決へのつながりを発見    https://developer.android.com/courses/pathways/compose   

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題      Viewの状態管理が複雑  12 ● １つの画面を複数のカスタムViewで構成している  ● カスタムViewの状態変化（データの更新）は、いくつかのタイミングで行われる  ○ 初期化時、通信のレスポンス取得後、関連するUIの変更時、Fragmentの再生成時、etc.  ● 古くから存在し、機能も多い画面は、リファクタリングが進んでいないのでさらに複雑に 

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題      Viewのパフォーマンスに警告  18 ● アプリの核となる商品画面で発生  ● Android Lintで警告（80以上のViewはパフォーマンスに悪い）  ● パフォーマンス改善のためにRecyclerView化を検討  ○ 一定の塊ごとにカスタムView化  ○ それぞれ別のViewTypeを定義  ○ Viewの使い回しではなく、必要になるまで生成しない特性を利用 

Slide 19

Slide 19 text

© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題      19 ViewTypeの管理はあまりしたくない  RecyclerView.AdapterのgetItemCount()やgetItemViewType()、onBindViewHolder()などをそれぞれ整合性があうように実装しなければいけない  ViewType対策  ConcatAdapterやEpoxyでの実装を検討  ※Epoxyはすでにホーム画面で実績あり  パフォーマンス改善のより良い方法を探していた 

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

© ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題      22 実際にあった考慮漏れ：    ● 同じプログラムだがそれぞれ違う商品の値段まわりの表示  ● 即日配送のViewにmargin_bottomを設定して実装していたため、即日配送のViewが表示されない商品でデザイン崩れが発生  -> パターンが多いため考慮漏れのリスクも高くなっている    ↑こちらがデザイン崩れ

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性      宣言的UI    26 ● 状態をUIに変換するという考え方  ● UI生成後に中身は更新することができない、更新させるにはUIを再生成する    ※What's new in Jetpack Composeの動画2:40あたりからそのような話をしています  https://youtu.be/7Mf2175h3RQ?t=162     

Slide 27

Slide 27 text

Slide 28

Slide 28 text

© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性      28 Composeの思想より抜粋名前のリストを引数に名前の数だけ「Hello 名前」を表示する ● 前のスライドでいう「状態」はnamesパラメータ  ● 「UI」はComposable関数が生成するもの（戻り値がないのに注目）  ● Composable関数内で生成されたUIを変えるには引数を変えるしかない 

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性      34 課題：検索画面の各Viewの状態が複数あり、その変化・復元を意識しなければならない  Composeに移行すれば  ● 検索画面の各Viewの状態管理を一元化可能  ● 一元化したものを正しく更新・維持すればいい  ○ その更新のタイミングを気にする必要がない      ※Composeでなくても一元化は可能だが思想として明確になっているほうがメンバー全員が共通認識を持ちやすい 

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性      38 コンポーズ可能な関数は並行して実行できる  記載内容抜粋  >Compose は複数のコアを活用し、画面上にないコンポーズ可能な関数を、より低い優先度で実行します。  >この最適化は、コンポーズ可能な関数がバックグラウンドスレッドのプール内で実行される可能性があることを意味します。   

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

© ZOZO Technologies, Inc. 50 チームが注目したJetpack Composeの特性  ● 宣言的UI ○ Viewで複雑になっている状態管理がスッキリできそう ● パフォーマンスの最適化 ○ Viewが多い画面も複数スレッドの活用で高速化できそう ○ RecyclerViewのような実装も簡単に実現しやすそう ● 便利なプレビュー機能 ○ 色々な状態も簡単に再現・確認ができ開発効率があがりそう

Slide 51

Slide 51 text

© ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性      他にもいろいろ    51 メンバーからでた今日解説できなかった意見（Composeの良さそうなところ）    ● テストが書きやすい  ● Composeを使うことでUIの実装が楽になる(と考えている)→開発のスピードがあがる  ● 既存のZOZOTOWNではJetpack標準のアーキテクチャを採用していたため、Composeが導入しやすかった  ● Swift UIやFlutter, ReactNativeなど、モバイル界隈では宣言的UIに移行が進んでいるので検討する価値があった（チーム内にはReact経験者もいた）  ● チームのモチベーションがあがる→生産性の向上が期待できる 

Slide 52

Slide 52 text

© ZOZO Technologies, Inc. まとめ     ● Jetpack Composeは、ZOZOTOWN Androidの課題を解決する糸口だった  ● Composeの思想を理解して実装するととても良さそう  ○ バグが減り、開発スピードが向上しそう  ○ 描画パフォーマンスが向上しそう  ● Preview機能の活用で網羅性が向上しそう  ● Jetpack Composeは色んな課題をきっと解決してくれる！みんな学ぼう！  ○ 学習はJetpack Compose Pathwaysがおすすめ  52

Slide 53

Slide 53 text

Slide 54

Slide 54 text

© ZOZO Technologies, Inc. 最後に     ZOZOテクノロジーズではAndroidエンジニアの採用を積極的に行っています。  本スライドの話や会社について少しでも興味を持っていただけましたら以下のURLからご応募ください。  本スライド作成者がカジュアル面談をさせていただきます    https://hrmos.co/pages/zozotech/jobs/0000194  54

Slide 55

Slide 55 text

No content