Leveraging KMM in Tapple (JP)

※現在ではKMPが推奨単語となっており、KMMは非推奨となっておりますが、登壇時点ではKMM(Kotlin Multiplatform for Mobile)という単語が一般的に用いられていたので、資料ではKMMが用いられています

===

プロダクトにおけるKMM導入事例について紹介しています。
タップルがKMMを採用した背景や全体設計、KMM化を進めるために整備したドキュメントやフロー、工夫した点と今後の展望などについて紹介しています。

また、後半ではiOS側のKMMに関連する設計や、iOSエンジニア目線でのKMM化を進める上での工夫した点、KMM導入におけるメリデメについても自分たちの意見を紹介しています。

===

* Although now KMP is a preferred word for multi-platform technology for mobile as well, at the time of this presentation, KMM was the common terminology at that time that refers to multi-platform technology that shares logics for both iOS and Android.

At Flutter × Kotlin Multiplatform by CyberAgent #8, Ryohei Uno and I talked about how we, Tapple, Inc. leverage KMM in our product. In detail, we talked about..
- How we managed our documentation to let new members easily join our development with KMM
- The architecture from iOS engineer perspective
- Pros and cons of KMM from our perspecitves

Video
- https://www.youtube.com/watch?v=xupjjhXwwP0

Transcript

1. CONFIDENCIAL KMM導入事例 ~Tapple編~
2. CONFIDENCIAL 目次 • TappleのKMM全体像 ◦ 概要 ▪ KMMとは ▪ 変遷 ▪ 設計 ◦ KMM化のフロー ▪ 工夫した点と今後 • iOSエンジニアがKMM化を進める上での工夫、試行錯誤した点 ◦ 設計 ◦ iOS現状と今後について ◦ KMMのメリット・デメリット • まとめ
3. CONFIDENCIAL • タップルにて KMM導入を決めた背景・理由がわかる • タップルでの KMM導入の進め方、工夫した/している点 がわかる • iOSチーム、アプリコードへの導入時の工夫した/している点 がわかる この発表のゴール
4. CONFIDENCIAL https://developers.cyberagent.co.jp/blog/archives/37611/ KMMのおさらいと他チーム事例
5. CONFIDENCIAL TappleのKMM全体像 Androidエンジニア ☕と飲んだり、淹れたりするのが 趣味です Shohei Kawano
6. CONFIDENCIAL 前提 • 2014年サービスリリース → コードベースが大きい • サービス特性上、仕様が複雑 ◦ 男女による分岐 ◦ 「自分」と「お相手」のユーザー情報・状態 ◦ 特定条件によるイベント発生、etc. • 様々な場所でOS間アプリ挙動差異 なぜKMM？
7. CONFIDENCIAL 導入による狙い・理想 • 複雑なロジックを一箇所にまとめて管理する • OS間アプリ挙動差異を整理・修正する • 両OS向けアプリエンジニアが協働し設計・挙動差異をなくす →より質の高いユーザー体験をより早く届けられる状態 なぜKMM？
8. CONFIDENCIAL Flutterの選択肢？ • Flutter=UI＆ロジック両方を共有可能 • タップルの要件 ◦ UIは既存のものを使いまわし、ロジックのみ共有 なぜKMM？ https://kotlinlang.org/lp/mobile/
9. CONFIDENCIAL TappleでのKMM導入変遷
10. CONFIDENCIAL 2020年後半 • KMM検討・検証開始 2021年前半 • Androidの既存コードをKMM-Compatibleに ◦ network / modelsをcommonMainに移動 ◦ RetrofitをKtorに置き換え ◦ etc. • KMMアーキテクチャ策定 • 計測ロジックなどのKMM化 satoshun KMM導入変遷
11. CONFIDENCIAL 2021年後半 • KMMチーム発足 ◦ Android ▪ 専任1名 ▪ 兼務1名 ◦ iOS ▪ 兼務1名 • 機能のKMM化開始 2022年 • iOS&AndroidのGitリポジトリをモノレポ化 • ドキュメント整備 • 小さい画面から少しずつKMM化 KMM導入変遷 satoshun
12. CONFIDENCIAL 2021年後半 • KMMチーム発足 ◦ Android ▪ 専任1名 ▪ 兼務1名 ◦ iOS ▪ 兼務1名 • 機能のKMM化開始 2022年 • iOS&AndroidのGitリポジトリをモノレポ化 • ドキュメント整備 • 小さい画面から少しずつKMM化 KMM導入変遷 satoshun モノレポ化後、 iOS/Androidのコードの距離が 近くなり、成果物をpublish/取 り込むコストも減り、より KMMの開発がしやすくなりま した
13. CONFIDENCIAL 現在 • 複数人のモバイルエンジニアがKMMを用いて開発中 ◦ 新規機能開発→まずKMMで開発可能かどうか検討し可能な限りKMMで開発 ◦ 既存機能の置き換え→徐々に • 13個のKMM Featureモジュール • 施策開発・その他技術的な取り組みと並行して少しずつ推進中 KMM導入変遷
14. CONFIDENCIAL TappleのKMM設計
15. CONFIDENCIAL • ViewModelクラスをKMMで新しく定義することはしない • ViewModel内のロジック/状態管理をKMMモジュールにて共通化する • 単一方向のデータフロー アーキテクチャ方針
16. CONFIDENCIAL • Presenter ◦ データ取得、状態管理の役割 ◦ iOS/AndroidのViewModel内で利用 ◦ 1Screen, 1Presenter ◦ Dispatcher ▪ Actionを発行する ◦ Action ▪ Presenterへの命令 ◦ UiState ▪ UIの状態を表現する View ViewModel Presenter Repository Remote API Local Storage KMMのアーキテクチャ KMMによって共通化
17. CONFIDENCIAL 「いいかも送信履歴」画面 実装例（ざっくり）
18. CONFIDENCIAL いいかも送信履歴 • 初回読み込み • 追加読み込み • 「いいかも」送信の取り消し
19. CONFIDENCIAL abstract class Presenter<S : UiState, A : UiAction>( initialState: S, dispatcher: CoroutineDispatcher ) : Dispatcher<A>, PresenterContext { … val state: StateFlow<S> = _state fun watchState() = state.wrap(this) … protected fun setState(reducer: S.() -> S) { scope.launch { stateMutex.withLock { _state.update(reducer) } } } … Presenter.kt
20. CONFIDENCIAL abstract class Presenter<S : UiState, A : UiAction>( initialState: S, dispatcher: CoroutineDispatcher ) : Dispatcher<A>, PresenterContext { … val state: StateFlow<S> = _state fun watchState() = state.wrap(this) … protected fun setState(reducer: S.() -> S) { scope.launch { stateMutex.withLock { _state.update(reducer) } } } … Presenter.kt UI側に公開するstate property setState関数からのみ更新できる
21. CONFIDENCIAL abstract class Presenter<S : UiState, A : UiAction>( initialState: S, dispatcher: CoroutineDispatcher ) : Dispatcher<A>, PresenterContext { … val state: StateFlow<S> = _state fun watchState() = state.wrap(this) … protected fun setState(reducer: S.() -> S) { scope.launch { stateMutex.withLock { _state.update(reducer) } } } … Presenter.kt iOS側からFlowを購読しやすくする ための関数です ※以下URL先の実装と同じ実装です https://github.com/Kotlin/kmm-production-sample/blob/aed57893bab7e88a0df50285196e942be6934bf8/shared/src/iosMain/kotlin/com/github/jetbrains/rssreader/core/CFlow.kt
22. CONFIDENCIAL LikeHistoryPresenter.kt sealed interface LikeHistoryUiAction : UiAction { object Initialize : LikeHistoryUiAction object LoadMore : LikeHistoryUiAction data class DeleteLike(val userId: Long) : LikeHistoryUiAction … } data class LikeHistoryUiState( val isLoading: Boolean = false, val likeHistoryList: List<LikeHistory> = emptyList(), … val networkError: LikeHistoryUiEffect.NetworkError? = null ) : UiState
23. CONFIDENCIAL LikeHistoryPresenter.kt sealed interface LikeHistoryUiAction : UiAction { object Initialize : LikeHistoryUiAction object LoadMore : LikeHistoryUiAction data class DeleteLike(val userId: Long) : LikeHistoryUiAction … } data class LikeHistoryUiState( val isLoading: Boolean = false, val likeHistoryList: List<LikeHistory> = emptyList(), … val networkError: LikeHistoryUiEffect.NetworkError? = null ) : UiState 初回読み込み 追加読み込み 「いいかも」取り消し
24. CONFIDENCIAL LikeHistoryPresenter.kt sealed interface LikeHistoryUiAction : UiAction { object Initialize : LikeHistoryUiAction object LoadMore : LikeHistoryUiAction data class DeleteLike(val userId: Long) : LikeHistoryUiAction … } data class LikeHistoryUiState( val isLoading: Boolean = false, val likeHistoryList: List<LikeHistory> = emptyList(), … val networkError: LikeHistoryUiEffect.NetworkError? = null ) : UiState UI側に渡す Stateを定義
25. CONFIDENCIAL class LikeHistoryPresenter internal constructor( private val repository: LikeHistoryRepository, dispatcher: CoroutineDispatcher ) : Presenter<LikeHistoryUiState, LikeHistoryUiAction>( initialState = LikeHistoryUiState(), dispatcher = dispatcher ) { … override fun dispatch(action: LikeHistoryUiAction) { when (action) { is Initialize -> initialize() is LoadMore -> loadMore() is DeleteLike -> deleteLike(action.userId) … } } LikeHistoryPresenter.kt
26. CONFIDENCIAL class LikeHistoryPresenter internal constructor( private val repository: LikeHistoryRepository, dispatcher: CoroutineDispatcher ) : Presenter<LikeHistoryUiState, LikeHistoryUiAction>( initialState = LikeHistoryUiState(), dispatcher = dispatcher ) { … override fun dispatch(action: LikeHistoryUiAction) { when (action) { is Initialize -> initialize() is LoadMore -> loadMore() is DeleteLike -> deleteLike(action.userId) … } } LikeHistoryPresenter.kt Actionを発行してPresenter のstate更新を行う
27. CONFIDENCIAL LikeHistoryViewModel.kt @HiltViewModel internal class LikeHistoryViewModel @Inject constructor( private val presenter: LikeHistoryPresenter ) : … { init { presenter.dispatch(LikeHistoryUiAction.Initialize) } val state = presenter.state.asLiveData(viewModelScope.coroutineContext) }
28. CONFIDENCIAL LikeHistoryViewModel.kt @HiltViewModel internal class LikeHistoryViewModel @Inject constructor( private val presenter: LikeHistoryPresenter ) : … { init { presenter.dispatch(LikeHistoryUiAction.Initialize) } val state = presenter.state.asLiveData(viewModelScope.coroutineContext) } ViewModel初期化時にActionを発行する例 ActionはUIからViewModelを介してActionを発行する場合 もあります
29. CONFIDENCIAL LikeHistoryViewModel.kt @HiltViewModel internal class LikeHistoryViewModel @Inject constructor( private val presenter: LikeHistoryPresenter ) : … { init { presenter.dispatch(LikeHistoryUiAction.Initialize) } val state = presenter.state.asLiveData(viewModelScope.coroutineContext) } UI側から購読するための状態を公開
30. CONFIDENCIAL @MainActor final class LikeHistoryViewModel { typealias Presenter = KmmPresenter… ... private let presenter: Presenter init( ... presenter: Presenter ) { ... self.presenter = presenter presenter.uiState.map(\.likeHistoryList) .sink { [weak self] likeHistory in // handling logic } .store(in: &cancellableSet) ... } LikeHistoryViewModel.swift
31. CONFIDENCIAL @MainActor final class LikeHistoryViewModel { typealias Presenter = KmmPresenter… ... private let presenter: Presenter init( ... presenter: Presenter ) { ... self.presenter = presenter presenter.uiState.map(\.likeHistoryList) .sink { [weak self] likeHistory in // handling logic } .store(in: &cancellableSet) ... } LikeHistoryViewModel.swift iOSの置き換えフェーズでは一度 ViewModelで状態を購読するパターンも あります
32. CONFIDENCIAL LikeHistoryViewModel.swift extension LikeHistoryViewModel { func loadList() { presenter.dispatch(action: LikeHistoryUiActionRefresh()) } func loadMore() { presenter.dispatch(action: LikeHistoryUiActionLoadMore()) }
33. CONFIDENCIAL LikeHistoryViewModel.swift extension LikeHistoryViewModel { func loadList() { presenter.dispatch(action: LikeHistoryUiActionRefresh()) } func loadMore() { presenter.dispatch(action: LikeHistoryUiActionLoadMore()) } 拡張関数を定義して既存のViewModelか らpresenterのActionを発行する例
34. CONFIDENCIAL KMM化を推進するために 工夫した点と今後
35. CONFIDENCIAL 工夫した点 • ドキュメントの整備 • KMM化のフロー整備 • Slackチャンネル作成 • ペア作業の推奨 →困ったときにすぐに参照できるものがある・質問できる状態作り 工夫した点と今後
36. CONFIDENCIAL 工夫した点 • ドキュメントの整備 • KMM化のフロー整備 • Slackチャンネル作成 • ペア作業の推奨 →困ったときにすぐに参照できるものがある・質問できる状態作り 工夫した点と今後
37. CONFIDENCIAL ドキュメントの整備 • 「まずはここを見る」 「ここを見ればなにかしらある」 • 困ったこと・トラブルシュート事例を まとめる・貯める
38. CONFIDENCIAL KMM化のフローの整備
39. CONFIDENCIAL KMM化のフローの整備 既存コードの確認
40. CONFIDENCIAL KMM化のフローの整備 新しいモデル定義の方針を決め、 必要に応じてリファクタリング
41. CONFIDENCIAL KMM化のフローの整備 KMM featureモジュールと Presenterの作成
42. CONFIDENCIAL KMM化のフローの整備 作成したモジュールとPresenterを 使って既存コードを置き換え
43. CONFIDENCIAL 現状 • 推進できてはいるが、施策開発等と並行しながらやっている状態 • 正直まだまだ手探りな部分も多い • KMM自体まだBetaの状態なので今後変更もありそう 今後 • ”うまみ”のあるところから戦略的にKMM化・より推進する • 理想郷「両OS向けアプリを開発できる貴重なエンジニアが増えていく状態」 に 工夫した点と今後
44. CONFIDENCIAL iOSエンジニア目線のKMM iOSエンジニア 🍻とサウナが趣味です Ryohei Uno
45. CONFIDENCIAL KMMを交えた iOSの設計の話
46. CONFIDENCIAL • MVVM + Fluxを採用 ◦ Action: API処理やStoreの更新 ◦ Store: 各画面の状態を保持 • Global State: SingletonのFluxで管理(Shared Flux) TappleのiOSの設計
47. CONFIDENCIAL • VMが、Presenterを持つ • API処理、状態管理をKMMに移動 • VMは、KMMで解決できないOS差のロジック ◦ Shared Fluxを交えた処理 ◦ UserDefaults KMMを含めた画面の全体設計
48. CONFIDENCIAL 当初のKMMの設計から • iOS側でPresenterをより使いやすい形に変更してみた • 今回は、3つの工夫点を紹介します！
49. CONFIDENCIAL KMMを取り入れる　 工夫①
50. CONFIDENCIAL 課題 • VMで、KMMからCombineへの変換処理を都度書く必要があった アプローチ • KMMのPresenterをラップしたKMMPresenterクラスを定義 KMMを取り入れるために　工夫1
51. CONFIDENCIAL • KMM側からSwiftへの変換処理の共通化 ◦ 初期化、状態の初期値の設定など ◦ 状態更新を監視する関数(Flow)を Combineへ変換 共通化したい部分 @MainActor final class BlockHistoryViewModel { private let presenter: BlockHistoryStatePresenter @Published private var state: BlockHistoryUiState @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: BlockHistoryStatePresenter) { self.presenter = presenter self.state = presenter.currentState self.presenter.watchState() .watch { [weak self] state in self?.state = state } state.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } }
52. CONFIDENCIAL • KMM側からSwiftへの変換処理の共通化 ◦ 初期化、状態の初期値の設定など ◦ 状態更新を監視する関数(Flow)を Combineへ変換 共通化したい部分 @MainActor final class BlockHistoryViewModel { private let presenter: BlockHistoryStatePresenter @Published private var state: BlockHistoryUiState @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: BlockHistoryStatePresenter) { self.presenter = presenter self.state = presenter.currentState self.presenter.watchState() .watch { [weak self] state in self?.state = state } state.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } } 初期化、状態の初期値の代入
53. CONFIDENCIAL • KMM側からSwiftへの変換処理の共通化 ◦ 初期化、状態の初期値の設定など ◦ 状態更新を監視する関数(Flow)を Combineへ変換 共通化したい部分 @MainActor final class BlockHistoryViewModel { private let presenter: BlockHistoryStatePresenter @Published private var state: BlockHistoryUiState @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: BlockHistoryStatePresenter) { self.presenter = presenter self.state = presenter.currentState self.presenter.watchState() .watch { [weak self] state in self?.state = state } state.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } } 状態の更新を監視する関数からCombineへの変換
54. CONFIDENCIAL abstract class Presenter<S : UiState, A : UiAction>( initialState: S, dispatcher: CoroutineDispatcher ) : Dispatcher<A>, PresenterContext { … val state: StateFlow<S> = _state fun watchState() = state.wrap(this) … protected fun setState(reducer: S.() -> S) { scope.launch { stateMutex.withLock { _state.update(reducer) } } } … Presenter.kt iOS側からFlowを購読しやすくする ための関数です ※以下URL先の実装と同じ実装です https://github.com/Kotlin/kmm-production-sample/blob/aed57893bab7e88a0df50285196e942be6934bf8/shared/src/iosMain/kotlin/com/github/jetbrains/rssreader/core/CFlow.kt
55. CONFIDENCIAL @MainActor public final class KmmPresenter<S: Kmm_coreUiState, A: Kmm_coreUiAction, P: Kmm_corePresenter<S, A>>: PresenterProtocol { private var presenter: P public let uiState: CurrentValueSubject<S, Never> public init(_ presenter: P) { self.presenter = presenter self.uiState = .init(presenter.currentState) presenter.watchState() .watch { [weak self] uiState in self?.uiState.send(uiState) } } public func dispatch(action: A) { presenter.dispatch(action: action) } deinit { presenter.close() } } KMMPresenter
56. CONFIDENCIAL @MainActor public final class KmmPresenter<S: Kmm_coreUiState, A: Kmm_coreUiAction, P: Kmm_corePresenter<S, A>>: PresenterProtocol { private var presenter: P public let uiState: CurrentValueSubject<S, Never> public init(_ presenter: P) { self.presenter = presenter self.uiState = .init(presenter.currentState) presenter.watchState() .watch { [weak self] uiState in self?.uiState.send(uiState) } } public func dispatch(action: A) { presenter.dispatch(action: action) } deinit { presenter.close() } } State, Action, Presenterを受け取る KMMPresenter
57. CONFIDENCIAL @MainActor public final class KmmPresenter<S: Kmm_coreUiState, A: Kmm_coreUiAction, P: Kmm_corePresenter<S, A>>: PresenterProtocol { private var presenter: P public let uiState: CurrentValueSubject<S, Never> public init(_ presenter: P) { self.presenter = presenter self.uiState = .init(presenter.currentState) presenter.watchState() .watch { [weak self] uiState in self?.uiState.send(uiState) } } public func dispatch(action: A) { presenter.dispatch(action: action) } deinit { presenter.close() } } UIStateの変更を監視し、状態を変更 KMMPresenter
58. CONFIDENCIAL @MainActor final class BlockHistoryViewModel { private let presenter: BlockHistoryStatePresenter @Published private var state: BlockHistoryUiState @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: BlockHistoryStatePresenter) { self.presenter = presenter self.state = presenter.currentState self.presenter.watchState() .watch { [weak self] state in self?.state = state } state.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } } コード量の変化
59. CONFIDENCIAL @MainActor final class BlockHistoryViewModel { typealias Presenter = KmmPresenter<BlockHistoryUiState, BlockHistoryUiAction, BlockHistoryStatePresenter> private let presenter: Presenter @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: Presenter) { self.presenter = presenter presenter.uiState.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } } コード量の変化
60. CONFIDENCIAL スッキリ 👏
61. CONFIDENCIAL @MainActor final class BlockHistoryViewModel { typealias Presenter = KmmPresenter<BlockHistoryUiState, BlockHistoryUiAction, BlockHistoryStatePresenter> private let presenter: Presenter @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: Presenter) { self.presenter = presenter presenter.uiState.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } } Presenterの定義 変わったところ
62. CONFIDENCIAL @MainActor final class BlockHistoryViewModel { typealias Presenter = KmmPresenter<BlockHistoryUiState, BlockHistoryUiAction, BlockHistoryStatePresenter> private let presenter: Presenter @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: Presenter) { self.presenter = presenter presenter.uiState.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } } UIStateから@PublishedへVC用にMapping 変わったところ
63. CONFIDENCIAL KMMを取り入れる　 工夫②
64. CONFIDENCIAL KMMを取り入れるために　工夫2 課題 • VMのテストをする時にKMMをMock化出来なかった アプローチ • Mock用のPresenterを定義 • Mockに必要なもの ◦ 外から初期値を代入できる ◦ 適切なタイミングで状態を更新できる ◦ Presenterに、dispatchが来たことが分かる
65. CONFIDENCIAL @MainActor public protocol PresenterProtocol<State, Action> { associatedtype State associatedtype Action var uiState: CurrentValueSubject<State, Never> { get } func dispatch(action: Action) async } 手順1 Protocol化で抽象化
66. CONFIDENCIAL @MainActor final class BlockHistoryViewModel<Presenter: PresenterProtocol<BlockHistoryUiState, BlockHistoryUiAction>> { private let presenter: Presenter @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: Presenter) { self.presenter = presenter presenter.uiState.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } } 手順2 ViewModelで使う
67. CONFIDENCIAL @MainActor final class BlockHistoryViewModel<Presenter: PresenterProtocol<BlockHistoryUiState, BlockHistoryUiAction>> { private let presenter: Presenter @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: Presenter) { self.presenter = presenter presenter.uiState.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } } 手順2 ViewModelで使う Genericsで定義
68. CONFIDENCIAL @MainActor public final class MockPresenter<S, A>: PresenterProtocol { public private(set) var dispatchedAction: CurrentValueSubject<A, Never>? public let uiState: CurrentValueSubject<S, Never> public init(_ initialState: S) { self.uiState = .init(initialState) } public func changeState(state: S) { self.uiState.value = state } public func dispatch(action: A) { self.dispatchedAction?.value = action } } 手順3 MockPresenter作成
69. CONFIDENCIAL @MainActor public final class MockPresenter<S, A>: PresenterProtocol { public private(set) var dispatchedAction: CurrentValueSubject<A, Never>? public let uiState: CurrentValueSubject<S, Never> public init(_ initialState: S) { self.uiState = .init(initialState) } public func changeState(state: S) { self.uiState.value = state } public func dispatch(action: A) { self.dispatchedAction?.value = action } } 初期値を代入する 手順3 MockPresenter作成
70. CONFIDENCIAL @MainActor public final class MockPresenter<S, A>: PresenterProtocol { public private(set) var dispatchedAction: CurrentValueSubject<A, Never>? public let uiState: CurrentValueSubject<S, Never> public init(_ initialState: S) { self.uiState = .init(initialState) } public func changeState(state: S) { self.uiState.value = state } public func dispatch(action: A) { self.dispatchedAction?.value = action } } 外から状態を更新 手順3 MockPresenter作成
71. CONFIDENCIAL @MainActor public final class MockPresenter<S, A>: PresenterProtocol { public private(set) var dispatchedAction: CurrentValueSubject<A, Never>? public let uiState: CurrentValueSubject<S, Never> public init(_ initialState: S) { self.uiState = .init(initialState) } public func changeState(state: S) { self.uiState.value = state } public func dispatch(action: A) { self.dispatchedAction?.value = action } } dispatchが呼ばれたことをテスト 手順3 MockPresenter作成
72. CONFIDENCIAL final class BlockHistoryTests: XCTestCase { func testChangedUiState() throws { let testTarget = dependency.testTarget let presenter = dependency.presenter let exepect1 = try expect(testTarget.$uiState.collect(2).first()) { presenter.changeState(state: .init(blockedRoom: [], isLoading: true, networkError: nil)) } XCTAssertEqual(exepect1.map(\.isLoading), [false, true]) } struct Dependency { let testTarget: BlockHistorySwiftUiViewModel let presenter: MockPresenter<BlockHistoryUiState, BlockHistoryUiAction> init() { self.presenter = .init(.init(blockedRoom: [], isLoading: false, networkError: nil)) self.testTarget = .init(presenter: presenter) } } } 手順4 Testの書き方
73. CONFIDENCIAL final class BlockHistoryTests: XCTestCase { func testChangedUiState() throws { let testTarget = dependency.testTarget let presenter = dependency.presenter let exepect1 = try expect(testTarget.$uiState.collect(2).first()) { presenter.changeState(state: .init(blockedRoom: [], isLoading: true, networkError: nil)) } XCTAssertEqual(exepect1.map(\.isLoading), [false, true]) } struct Dependency { let testTarget: BlockHistorySwiftUiViewModel let presenter: MockPresenter<BlockHistoryUiState, BlockHistoryUiAction> init() { self.presenter = .init(.init(blockedRoom: [], isLoading: false, networkError: nil)) self.testTarget = .init(presenter: presenter) } } } 手順4 Testの書き方 初期値の設定
74. CONFIDENCIAL final class BlockHistoryTests: XCTestCase { func testChangedUiState() throws { let testTarget = dependency.testTarget let presenter = dependency.presenter let exepect1 = try expect(testTarget.$uiState.collect(2).first()) { presenter.changeState(state: .init(blockedRoom: [], isLoading: true, networkError: nil)) } XCTAssertEqual(exepect1.map(\.isLoading), [false, true]) } struct Dependency { let testTarget: BlockHistorySwiftUiViewModel let presenter: MockPresenter<BlockHistoryUiState, BlockHistoryUiAction> init() { self.presenter = .init(.init(blockedRoom: [], isLoading: false, networkError: nil)) self.testTarget = .init(presenter: presenter) } } } 手順4 Testの書き方 状態更新
75. CONFIDENCIAL KMMを取り入れる　 工夫③
76. CONFIDENCIAL KMMを取り入れるために　工夫3 前提 • Tappleでは、SwiftUI化を一部進めている • 宣言的UIは、各状態に対応するViewを書くことで状態の変更を検知してくれる
77. CONFIDENCIAL KMMを取り入れるために　工夫3 課題 • SwiftUIを使っていて、OS差のない単純な画面では、VMはStateを@Publishedに マッピングのみしている アプローチ • 直接SwiftUI側でKMMを呼び出す
78. CONFIDENCIAL @MainActor final class BlockHistoryViewModel { typealias Presenter = KmmPresenter<BlockHistoryUiState, BlockHistoryUiAction, BlockHistoryStatePresenter> private let presenter: Presenter @Published private(set) var blockHistorySectionModels: [BlockHistorySectionModel] = [] init(presenter: Presenter) { self.presenter = presenter presenter.uiState.map(\.blockedRoom) .sink { [weak self] blockedRoom in self?.blockHistorySectionModels = [.init(items: blockedRoom.map(\.user))] } .store(in: &cancellableSet) } } UIStateからVC用にMapping ViewModel
79. CONFIDENCIAL struct ItemReportView<Presenter: PresenterProtocol<ItemReportUiState, ItemReportUiAction>>: View { @StateObject private var presenter: Presenter @State private var selection = 0 init(presenter: Presenter) { self._presenter = StateObject(wrappedValue: presenter) } var body: some View { ItemReportHistoryListView(list: presenter.uiState.value.historyList) { Task { await presenter.dispatch(action: ItemReportUiActionLoadMoreHistory()) } } } } Presenterを持つSwiftUIのView
80. CONFIDENCIAL struct ItemReportView<Presenter: PresenterProtocol<ItemReportUiState, ItemReportUiAction>>: View { @StateObject private var presenter: Presenter @State private var selection = 0 init(presenter: Presenter) { self._presenter = StateObject(wrappedValue: presenter) } var body: some View { ItemReportHistoryListView(list: presenter.uiState.value.historyList) { Task { await presenter.dispatch(action: ItemReportUiActionLoadMoreHistory()) } } } } Presenterを持つSwiftUIのView Genericsで宣言
81. CONFIDENCIAL struct ItemReportView<Presenter: PresenterProtocol<ItemReportUiState, ItemReportUiAction>>: View { @StateObject private var presenter: Presenter @State private var selection = 0 init(presenter: Presenter) { self._presenter = StateObject(wrappedValue: presenter) } var body: some View { ItemReportHistoryListView(list: presenter.uiState.value.historyList) { Task { await presenter.dispatch(action: ItemReportUiActionLoadMoreHistory()) } } } } Presenterを持つSwiftUIのView UIStateからViewにMapping
82. CONFIDENCIAL 設計のまとめ 工夫① KMMPresenterを使うことで、ロジックを共通化ができた 工夫② Mockを使って、VMでKMMを交えたテストが書けるようになった 工夫③ SwiftUIを使ってViewの構築以外KMM側にロジックを寄せる画面ができた
83. CONFIDENCIAL iOS現状と今後について
84. CONFIDENCIAL iOS現状と今後について 現状 • iOSチームの半分の人がKMMを触ったことがある • 新規施策で、一部KMMを使った施策を行った 今後 • iOS依存やKMMに寄せづらい画面もKMMの設計に合わせる • iOSチームでの導入を引き続き進める • iOSとAndroidで、Global Stateの管理を統一する
85. CONFIDENCIAL KMMのメリット・デメリット (現時点で河野・宇野が感じている点）
86. CONFIDENCIAL デメリット/改善の余地 • ビルドエラー時の対応コスト(Gradleまわり） • ビルド時間への影響 ◦ KMM導入に寄ってiOSのビルド時間が一部長くなっている • コミュニケーションコスト ◦ 協働するケースが増える分発生 ◦ ブランチ戦略など KMMのメリット・デメリット
87. CONFIDENCIAL メリット • iOS/Androidエンジニア間での実装の共通認識を持ちやすい • コードレベルでの共通化が出来るので、両OSの挙動を統一させやすい ◦ 挙動差異が減る • iOS/Androidエンジニアが協働するケースが増えた！ ◦ 設計議論 ◦ UIの作り方など KMMのメリット・デメリット
88. CONFIDENCIAL まとめ
89. CONFIDENCIAL ざっくり以下について話をしました • TappleにおけるKMMの全体像 • iOSエンジニア目線のKMM • KMMメリット・デメリット まとめ
90. CONFIDENCIAL TappleではKMMを使って試行錯誤しながら日々開発をしています！ まだまだやりたいこと・できていないことがたくさんあります。 今回話せなかったお話もたくさんあります。 TappleのKMMや、弊社自体に興味がある方は、 この後の質問コーナー・イベント後アンケートで、 どしどしご質問・ご連絡お待ちしております！ まとめ
91. CONFIDENCIAL KMM導入事例 ~Tapple編~ ご清聴 ありがとうございました！