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