Merpay iOSのGroundUp Appへの移行 / Migrating Merpay to the GroundUp App on iOS

メルカリiOSアプリは2022年末に大規模なリアーキテクチャが実施されSwiftUIベースのアプリに生まれ変わりました(*)。一方でビジネス上の要件により、メルペイの機能群はUIKitベースのコードをそのままSwiftUIベースのアプリに移植する必要がありました。このセッションでは、どのような戦略を用いてこの移植作業を大きな事故を発生させることなく完遂したか、さらにその後のSwiftUIへの全面移行作業について説明します。
* https://engineering.mercari.com/blog/entry/20221213-ground-up-app/

Toward the end of 2022, the Mercari marketplace app for iOS went through large-scale re-architecturing and was reborn as an app based on SwiftUI.* However, due to business requirements, the grouping of Merpay features had to be transferred as is from a UIKit-based code to a SwiftUI-based app.
In this session, we’ll describe the strategy we used to complete the transfer without any significant incidents and further explain the subsequent overall work performed to migrate to SwiftUI.
* https://engineering.mercari.com/blog/entry/20221213-ground-up-app/

------
Merpay & Mercoin Tech Fest 2023は3日間のオンライン技術カンファレンスです。
IT企業で働くソフトウェアエンジニアおよびメルペイ・メルコインの技術スタックに興味がある方々を対象に2023年8月22日（火）、23日（水）、24日（木）の3日間、開催します。 Merpay & Mercoin Tech Fest は事業との関わりから技術への興味を深め、プロダクトやサービスを支えるエンジニアリングを知ることができるお祭りです。

今年のテーマは「Unleash Fintech」。 メルペイ・メルコインのこれまでの技術的な取り組みはもちろん、メルカリグループのFintech事業における新たな挑戦をお伝えします。 セッションでは事業を支える組織・技術・課題などへの試行錯誤やアプローチなど多面的にご紹介予定です。

メルペイ・メルコインが今後どのようにUnleash（解放）していくのか、ぜひ見に来てください。

■イベント関連情報
- 公式ウェブサイト：https://events.merpay.com/techfest-2023/
- 申し込みページ：https://mercari.connpass.com/event/286670/
- Twitterハッシュタグ： #MerpayMercoinTechFest
■リンク集
- メルカリ・メルペイイベント一覧：https://mercari.connpass.com/
- メルカリキャリアサイト：https://careers.mercari.com/
- メルカリエンジニアリングブログ：https://engineering.mercari.com/blog/
- メルカリエンジニア向けTwitterアカウント：https://twitter.com/mercaridevjp
- 株式会社メルペイ：https://jp.merpay.com/

Transcript

1. Session Title Merpay iOSのGroundUP Appへ の移行 @kenmaz Merpay iOS Team
2. Kentaro Matsumae / @kenmaz 2009年頃から趣味でiOS開発を始め、その後は本 業として動画アプリやマンガアプリなどの開発に従 事。2018年6月にiOSエンジニアとしてメルペイに 入社。iD決済、銀行接続、送金機能の開発などに 携わったのち、現在はMerpay Enabling Teamに てメルカリアプリのリアーキテクチャや既存機能の SwiftUIへの書き換えなどに従事している。 株式会社メルペイ iOS Team
3. - メルカリ本体のコードをフルスクラッチで書き換え - Bazelによる高速・高信頼ビルド環境 - 10年間の技術的負債の返済 - SwiftUI / Jetpack Compose + Design System v3.0 - 再構築期間中は新規機能開発は凍結 Mercari GroundUP(GU) App とは
4. - Plan A - 既存アプリとは別のApp ID+フルスクラッチ - 安定したところで新規アプリに誘導 - Plan B - 既存アプリと同じApp IDを使用+フルスクラッチ - TestFlight Beta TestingでA/Bテスト - ある時点で段階的リリース - Plan C - 既存アプリに既存コードと新規コードを混在 - 機能フラグで段階的に切り替え GU Appのロールアウトプラン
5. - 技術的負債はメルカリ本体と比べると少ない (2~3年分) - UIKit + Design System 1.5 - 最小限の変更でメルペイのコードをGU Appに載せ替える - 移行作業中でもメルペイ自体の新規機能開発は止めない Merpay iOSのGU Appへの移行
6. MK MP Integration MP Integration MK MP Integration MC MK MP ❄MK MP Integration Development Production ~202X 2022/08 2020/04 2023/03 2022/11 MK MK MP Integration MP MC MK MP+ mercard Integration MP 2021/10 MP + mercard MP MC UIKit SwiftUI MK=マーケットプレイス ≒メルカリ本体 MP=メルペイ MC=メルコイン mercard=メルカード 2022/10 Phase3 Phase2 Phase1 開発タイムライン
7. Merpay SDK GU App Integration Phase 1
8. - Merpay SDK - Core / MerpayDependencyRegistry - Features / NFC, Coupon, QR, … - そもそもある程度のポータビリティを持った設計 Merpay SDK
9. 1. MP関連機能のMerpay SDKへの集約 2. Bazelによるビルド構成の変更 3. DIコンテナの移植 4. 画面遷移処理の移植 GU App Integration Steps
10. - 各所に散らばっていたMP管理下のコードをMerpay SDKに集約 - 本人確認機能(KYC) - UIKit + ReactiveCocoa + MVVM + xib - 売上金の振り込み申請機能 - UIKit + Objective-C + Storyboard - MPのアーキテクチャで書き換え - UIKit + MVVM + Pure Swift merpay-ios-sdk mercari-ios kakuni-ios-sdk 1. MP関連機能のMerpay SDKへの集約
11. - 旧メルカリアプリ - CocoaPods / Carthage / Git-submodule - 新メルカリアプリ (GU App) - Bazel →Merpay SDKを含むすべての社内外コードを Bazelでビルドできるように設定 merpay-ios-sdk mercari-groundup-ios Google Maps SDK Lottie-iOS Design System (v1.5) CryptSwift Internal External … 2. Bazelビルドのための構成変更
12. - MerpayDependencyRegistry - MK側で実装された機能をMP側で使うためのDIコンテナ - MK側の実装をひたすら注入 APIアクセス MerpayDependencyRegistry 認証 Deeplink制御 URL イベントログ Feature Flag 画像キャッシュ 3. DIコンテナの移植
13. 4. 画面遷移処理の移植 - メルペイ↔メルカリ間の画面遷移を実装 Home UIHostingVC<Home> Search UIHostingVC<Search> Listing UIHostingVC<Listing> Setting UIHostingVC<Setting> MerpayXxxxViewController … UINavigationController Wireframe MerpayDependencyRegistry
14. ひとまず統合完了🎉
15. 更なる最適化 - Gitリポジトリ統合 (monorepo) - SDK Isolation
16. - MK Core / DS3.0 - MK features - MC features mercari-groundup-ios merpay-ios-sdk mercari-ios merpay-ios-sdk - MK Core - MK features - Today Extension - MP features - MK Core / DS3.0 - MK features - MC features - MP features mercari-ios - Today Extension mercari-groundup-ios Carthage / git-submodule Bazel - MP features - Today Extension mercari-jp-ios-core - DS1.5 mercari-jp-ios-core - DS1.5 Mercari-jp-ios-core ❄ - DS1.5 Bazel Before GU After GU After Monorepo Gitリポジトリ統合 (monorepo) 👎直接変更できない 👎GU Appのビルドインフラを活かせない
17. Gitリポジトリ統合 (monorepo) - 統合方法 - Plan A：単純なファイルコピー - 🟢 シンプル 🔴 git履歴が消える - Plan B : Subtree Mergingによるリポジトリの結合 - 🟢 履歴保持 🔴リポジトリサイズ肥大化 - Plan C：git-subtree によるリポジトリの部分な結合 ✅ - 🟢 履歴保持 / 必要最小限のコードのみ統合可能 - 🟡 作業が煩雑
18. Gitリポジトリ統合 (monorepo) - Bazelビルドに合わせた最適化 - ソースコードレイアウトの変更 - 画像アセットの最適化 / less 500KB per module - Bazelモジュール定義 - その他 - モジュールごとにコードフリーズ宣言を行い逐次移行 - 移行中の元コードへの意図せぬ変更防止モニタリング
19. Gitリポジトリ統合 (monorepo)
20. SDK Isolation - 課題 - いくつかのメルカリ機能モジュールがMerpay SDKに直接依存 - テストバンドルキャッシュが肥大化 - CI実行時間とキャッシュストレージ使用量に影響 - 解決方法 - Merpay SDKのDIコンテナのインタフェースのみ抽出 - 別モジュールとして分離
21. SDK Isolation Before
22. SDK Isolation After
23. SDK Isolation - 結果 - モジュールごとのテストバンドルキャッシュサイズ - 300MB→150MB - Merpay SDKの最小限の機能のみをメルカリ側に公開 - SDKの責務の明確化 - Single Responsibility Principle in SOLID
24. メルペイの新規開発画面を SwiftUI + GUアーキテクチャで開発 Phase 2
25. Before GU - メルカリ - Pure MVC - → MVVM + ReactiveCocoa - → Micro View Controller + State - メルペイ - MVVM without 3rd party libs アーキテクチャの変遷
26. After GU - 共通アーキテクチャ - SwiftUI - 単方向データフロー - Redux / TCA Inspired アーキテクチャの変遷 最終的にはMPも共通アーキテクチャに統合していきたい →MPトップ画面のリニューアルにGUアーキテクチャを先行導入
27. Phase2完了🎉
28. メルペイの全ての既存画面を SwiftUIに書き換え (WIP) Phase 3
29. GroundUP Merpay Screens - モチベーション - 技術的負債が比較的少ないといえども初期のコードは2018年 - GUで刷新された基盤機能の恩恵を受けられない - SwiftUI / GUアーキテクチャ / Design System 3.0 / Accessibilityサポート / 新イベントログ基盤 / etc… →MPの既存コードも段階的にGUアーキテクチャに移植
30. 既存仕様の整理 - 移植作業の計画 - 大量の既存画面の仕様を整理・リストアップ - 優先度を決めて移植作業計画を策定 - 問題 - 大量の既存コードと大量の仕様書 - 既存コード↔仕様書の対応関係が不明瞭 - 認識の齟齬 - 例) “メルペイトップ” | “ダッシュボード” | “支払い画面” - 非日本語話者にはより理解が困難
31. Merpay Screen IDの導入 Sources - 解決策 - 画面を一意に特定する Merpay Screen IDを全ての画面に付与 - e.g, “MP-BNK-001” - ソースコード、仕様書、Figma 全てに共通のIDを含め関連を明確化 - 認識の齟齬が解消 - 非日本語話者でも理解しやすい - 社内の開発ガイドラインにも組み込み済み Spec documents Design resources
32. Merpay Screen IDの導入 Screen IDでConfluenceを検索すれば、その画面に関する仕様書が見つかる
33. Merpay Screen IDの導入 Screen IDでFigmaを検索すれば、その画面のデザインが確認できる
34. Merpay Screen IDの導入 Screen IDでコードを検索すれば、その画面の実装が見つかる
35. - 各チームで分担して現在移植作業中 現在絶賛移植作業中🛠 2023/07/09時点 43/621 VC移植済み
36. 現在絶賛移植作業中🛠 銀行口座接続画面
37. まとめ
38. まとめ - 機能開発を止めることなくメルペイのGU Integrationが完了 - Bazelのメリット最大限に活かす構成 - メルペイのSwiftUIへの移行を加速させる基盤の整備