ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly

https://wantedly.connpass.com/event/316051/

Transcript

1. © 2024 Wantedly, Inc. ウォンテッドリーでの KMPワークフロー Mobile勉強会#14 2024/05/21 久保出雅俊
2. © 2024 Wantedly, Inc. wantedly.com/id/kubode @swiz_ard @kubode
3. © 2024 Wantedly, Inc. Agenda • 弊社でのKMPのワークフローを紹介 • チーム構成や現状に至った経緯
4. © 2024 Wantedly, Inc. Kotlin Multiplatform (KMP)
5. © 2024 Wantedly, Inc. Kotlin Multiplatform
6. © 2024 Wantedly, Inc. https://android-developers.googleblog.com/2024/05/android-support-for-kotlin-multiplatform-to-share-business-logic-across-mobile-web-server-desktop.html
7. © 2024 Wantedly, Inc. ウォンテッドリーでのKotlin Multiplatform
8. © 2024 Wantedly, Inc. 導入
9. © 2024 Wantedly, Inc. 共通化レベル
10. © 2024 Wantedly, Inc. Presentation Logic SearchReactor send(Action.Bookmark) state
11. © 2024 Wantedly, Inc. Repository構成 KMP iOS Android SwiftPM Maven Publish Publish
12. © 2024 Wantedly, Inc. Mobile Chapter チーム構成とコミット KMP iOS Android 専門性 iOS Android Commit Commit
13. © 2024 Wantedly, Inc. ワークフロー
14. © 2024 Wantedly, Inc. 開発ワークフロー KMP インターフェー ス 設計・実装 KMP 内部実装 iOS UI実装 Android UI実装 画面仕様 QA リリース 結合
15. © 2024 Wantedly, Inc. 開発ワークフロー KMP インターフェー ス 設計・実装 画面仕様 QA リリース • 仕様を元にStateとActionをモデリング、実装 ◦ KMP/iOS/Android全エンジニアがそれぞれの観点でレビュー • KMPの状態更新などの中身は実装しない KMP 内部実装 iOS UI実装 Android UI実装 結合
16. © 2024 Wantedly, Inc. 開発ワークフロー KMP インターフェー ス 設計・実装 画面仕様 QA リリース • KMPは内部の状態更新を実装していく • iOS/AndroidはStateをもとにPreview駆動開発 • UI実装とStateやActionに乖離があればフィードバック KMP 内部実装 iOS UI実装 Android UI実装 結合
17. © 2024 Wantedly, Inc. 開発ワークフロー KMP インターフェー ス 設計・実装 画面仕様 QA リリース • KMPの内部実装が進んだらiOS/Androidと結合を始める • 実装と結合の工程はきっちり別れずグラデーションで進行 • 結合時の課題はフィードバックして改善 KMP 内部実装 iOS UI実装 Android UI実装 結合
18. © 2024 Wantedly, Inc. 開発ワークフロー KMP インターフェー ス 設計・実装 画面仕様 QA リリース KMPでは、ここの並列化とフィードバック速度が重要 KMP 内部実装 iOS UI実装 Android UI実装 結合
19. © 2024 Wantedly, Inc. 開発ワークフローの重要な工程 KMP インターフェー ス 設計・実装 画面仕様 QA リリース 手戻りを減らす フィードバックを早く回す KMP 内部実装 iOS UI実装 Android UI実装 結合
20. © 2024 Wantedly, Inc. KMPインターフェース設計・実装 KMP インターフェー ス 設計・実装 画面仕様 QA リリース 手戻りを減らす KMP 内部実装 iOS UI実装 Android UI実装 結合
21. © 2024 Wantedly, Inc. • 実装時の手戻りが多い課題があった ◦ KMPに破壊的変更を頻繁に入れる ◦ UI側で不足する状態が実装中に発覚 • → 仕様整理や設計のレベルを上げよう！ KMPインターフェース設計・実装
22. © 2024 Wantedly, Inc. KMPインターフェース設計・実装
23. © 2024 Wantedly, Inc. KMPインターフェース設計・実装 • 手戻りがかなり減った • モデリングの手法も議論が起きて堅牢に ◦ data class (直積) → sealed class (直和)
24. © 2024 Wantedly, Inc. 結合 KMP インターフェー ス 設計・実装 画面仕様 QA リリース フィードバックを早く回す KMP 内部実装 iOS UI実装 Android UI実装 結合
25. © 2024 Wantedly, Inc. 結合 • 以前はKMPに手動でバージョンをつけてパッケージ化 ◦ KMPの結合までが非常に手間、心理的ハードル ◦ 結合のフィードバックが回しづらい
26. © 2024 Wantedly, Inc. 結合 • CI/CDを整備、メインブランチマージで自動的にPR作成 ◦ iOS/Android側のPRをマージするだけに • 朝会での相談などフィードバックの機会を増やす • 設計工程を手厚くしたことで結合時の手戻りも減った
27. © 2024 Wantedly, Inc. まとめ
28. © 2024 Wantedly, Inc. まとめ • 弊社でのKMPのワークフローを紹介 • 当たり前だけど設計は重要な工程 • CI/CDはフィードバックを回すためにも必須 • チーム内のコミュニケーションを活発に
29. © 2024 Wantedly, Inc.