Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mercari iOSクライアント Re-Architectureのその後 / After Re-Architecture of Mercari iOS client

9c733dc2d65e7dcce91fa62be8bbb2ee?s=47 Builders Box
February 15, 2021

Mercari iOSクライアント Re-Architectureのその後 / After Re-Architecture of Mercari iOS client

■イベント 

【Engineering Team Presentation】各社の事業を支えるアーキテクチャ
https://sansan.connpass.com/event/200589/

■登壇概要
タイトル:Mercari iOSクライアント Re-Architectureのその後
発表者:株式会社メルカリ Personalization Team
iOS Tech Lead 芳賀 優樹

▼Builders Box
https://buildersbox-online.com/

9c733dc2d65e7dcce91fa62be8bbb2ee?s=128

Builders Box

February 15, 2021
Tweet

Transcript

  1. 1 iOSクライアント Re-Architectureのその後 Masaki Haga

  2. 2 About Me - 2018年4月にメルカリへ入社。 - UK版メルカリやJP版メルカリのUX関連プロジェクト(画像検索、ホーム画面な ど)を担当。 - 現在はPersonalizationチームのiOS

    Tech Lead。主にHomeやSearch画 面関連のプロジェクトを担当。 Masaki Haga
  3. 3 iOSクライアント Re-Architectureの概要 • 2018年からスタート • 現在までに主要な画面(出品, 商品詳細, 検索, ホーム)はすべて

    Re-Architecture済み • Micro View Controllerという概念に基づく
  4. 4 Micro View Controller とは?

  5. 5 2018年時点での問題 • 主要な画面でのロジックの増大、複雑化

  6. 6 Item Detail VC • Show Product Images • Show

    Product Name • Show Brand Name if available • Show Price • Show Merpay Balance if available • Call Like API • Navigate to comment screen • Call purchase API …. And more
  7. 7 Micro View Controllerとは? • どのようなアーキテクチャでも、ビジネスロジックが増えれば各レイヤーは肥大 化する。 • 一つのVCを複数のVCに分けることができれば、一つのVCに入るロジックを減 らすことができるのではないか。

  8. 8

  9. 9 Product Image VC • Show Product Images Product Name

    VC • Show Product Name • Show Brand Name if available Product Price VC • Show Price • Show Merpay Balance if available Like Button VC • Call Like API Comment Button VC • Navigate to comment screen Purchase Button VC • Call purchase API
  10. 10 Micro View Controllerとは? • 一つの画面を複数のView Controllerに分ける。 • それらのVCのViewをUIStackViewでつなげ、UIScrollViewにのせる。 ◦

    各VCが自分のViewのサイズを決定 ◦ 親VCが最終的なContent Sizeを決定 • UIStackViewでUIViewControllerをつなげる部分(ContainerView)や Input, Output, Dependency Injectionに関するProtocol等を共有 Frameworkとして提供する。
  11. 11 Mercariの組織 出品 商品詳細 ホーム マイページ カテゴリ 特化 etc...

  12. 12

  13. 13 並行開発やABテスト • ABテストの結果、機能を採用しない場合は、関連するロジックはすべてView Controller内にカプセル化されているので、View Controllerごと消すことが できる。

  14. 14 効果 • 各View Controllerのコード量の減少 ◦ 共有できるレイアウトのロジックはDesign Systemとして提供する。 ◦ 共有できないログ、API、遷移などのロジックはVC内に記述し分散させる。

    • 表示速度の改善
  15. 15 Item Thumbnail • Log, Navigation, UIContextMenuのロジックがカプ セル化されている。

  16. 16 めでたしめでたし?

  17. 17 1.Stateの管理

  18. 18 Stateの管理 • View ControllerそれぞれがStateの型を持っていた。 • Stateを同期するため、シンプルなVCでもコード量が多かった。 ◦ 例:いいねボタンのState

  19. 19

  20. 20

  21. 21 FLUXライクなArchitecture • Store, Action, Reducerから構成される。 • 大きな単位のVCがStoreのインスタンスを保持する。

  22. 22

  23. 23 効果 • Stateを同期させることが簡単になる。 • 複雑なReactive Frameworkのコードの減少。 • Stateの変化が理解しやすくなる。

  24. 24 2.ViewControllerとViewの区別

  25. 25 ViewControllerの深いネスト • 細かくView Controllerを作りすぎると、単純なViewでもコードのオーバーヘッ ドが多くなったり、View Controllerがネストしてコードの見通しが悪い。 • Viewにすべきか、View Controllerにすべきか。ロジックの量で各チームが判

    断。
  26. 26 3.組織とArchitecture

  27. 27 背景 • 2018年、Re-Architectureと同時期に組織が大きくなった。 • メンバーの価値観が多様化。 • Design SystemやDeclarative UIがチーム内でも注目され始める。

  28. 28 sections.append(contentsOf: [ .group([ .detailPush(title: "My profile".localizedString, selectionBlock:pushToMyProfile), .detailPush(title: "Saved

    and viewed items".localizedString, selectionBlock:pushToMyLikesAndViews), .detailPush(title: "Listings".localizedString, selectionBlock:pushToMyListings), .detailPush(title: "Purchases".localizedString, selectionBlock:pushToMyPurchases), .detailPush(title: "Instant offers".localizedString, selectionBlock:pushToInstantSales) ]), .gap(), .group([ .detailPush(title: "Settings".localizedString, selectionBlock:pushToSettings), .detailPush(title: "Support messages".localizedString, selectionBlock:pushToMercariNews), .detailPush(title: "Help centre".localizedString, selectionBlock:pushToHelpCenter) ]), .gap() ])
  29. 29 論点 • 組織の開発スタイルや規模にどれだけマッチしているか • On-Boardingのしやすさ • 実装のスピード • データフローのつかみやすさ

    • Testability • PlatformのAPI(UIKit)は直接使いやすいか ...etc
  30. 30 結論 • アーキテクチャに正解はない。 • 各View ControllerのInput, Output, Dependency Injectionに関する

    Protocolは統一されているが、内部のArchitectureはある程度各チームの裁 量に任せる。
  31. 31 Micro View Controllerの応用 (Home)

  32. 32

  33. 33

  34. 34 新しいHome • 様々なコンポーネントが柔軟に追加できる。 • コンポーネントの出し分けがbackendから操作できる。 • Stateが変更された際、差分がなめらかにUIに反映される。

  35. 35 UIStackView vs UICollectionView • UIStackViewはsub viewが自分でviewの大きさを決めるのに対して UICollectionViewは親がsub viewの大きさを決める(self-sizingを使わな ければ)。

    • UICollectionViewはDifference UpdateにUIKitがアニメーションをつけて くれる。 • UICollectionViewの場合、sub viewのインスタンスは見た目よりも多く作ら れる。
  36. 36 まとめ • Mercari iOSのアーキテクチャ ◦ Micro View Controllerによるロジックの分散、カプセル化 ◦

    各View ControllerのInput, Output, Dependency Injectionに関す るProtocolの統一 ◦ StoreによるStateの同期 ◦ UIStackViewやUICollectionViewによるContainerViewの仕組み
  37. 37 Thank you!