SwiftUI + Kotlin Multiplatform 開発で見えた長所と短所

by swiftty

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

今日話すこと前提 ● iOS エンジニアで Kotlin Multiplatform (KMP) には触れたことがない ● 過去のプロダクトは基本 UIKit で SwiftUI は部分的な導入程度話すこと ● KMP や SwiftUI での開発の際にどのような取り組みがあったかを紹介 ○ プロフィールリニューアルについて ○ SwiftUI 事例 ○ KMP と Swift/SwiftUI の組み合わせ © 2023 Wantedly, Inc.

Slide 4

Slide 4 text

Slide 5

Slide 5 text

プロフィールリニューアルプロジェクト ● 各プラットフォームでのプロフィール体験を揃える ● ウォンテッドリーではもともと KMP を採用してマルチプラットフォームでの開発を行っていた ○ Android が先行していたため KMP 側の実装は完了していた 🎉 ● SwiftUI の採用 🎉 © 2023 Wantedly, Inc. 引用: https://www.wantedly.com/companies/wantedly/post_articles/489565

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

ビジネスロジックの共通化 Reactor ● 単方向データフローアーキテクチャを採用 ○ View → Action → (Mutation) → State → View → … ○ アプリケーション全体でひとつの状態管理ではなく集約されたビュー単位で状態管理 ● Kotlin で定義されたクラスなので ObservableObject に適合していない ○ 後付けで ObservableObject が要求する objectWillChange を実装するのは大変 © 2023 Wantedly, Inc.

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

プロフィールヘッダー SwiftUI ではどうする？ ● contentInset が調整できない → 空のビューでヘッダー分コンテンツの開始位置をずらす？ ● オフセットを監視できない → 子要素を GeometryReader で監視？ ● オフセットを変更できない → ScrollViewReader を使って scroll ならできる？ ● 最終的にオフセットをもとにヘッダービューの高さを変更すれば当初のレイアウトを実現できそう 💭 © 2023 Wantedly, Inc.

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

プロフィールヘッダー良かった点 ● 複雑なレイアウトを SwiftUI でシンプルに実現 ○ UIKit なら数百行↑ 悪かった点 ● ScrollView と List で挙動が変わる ○ scrollTo の対象（ビュー単位、セル単位） ● OS バージョンでの挙動の違いやパフォーマンスの観点でリリース間際まで格闘 ○ 検証時は GeometryReader/onPreferenceChange を利用 ○ safeAreaInset なども試したがその領域の奥へのインタラクションが反応しないなど問題あり © 2023 Wantedly, Inc.

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Xcode Previews Wantedly Visit アプリ ● Preview を積極的に活用して開発 ○ 動作確認しやすいのでチームで自然とそうなった ● Feature Modules + KMP 構成（に移行中） ○ ビジネスロジック（KMP）がビルド済みの XCFramework ○ 依存の少ない新規 Profile モジュール ● Preview 時は AnySwiftUIReactor に任意の State を設定してパターンを用意 © 2023 Wantedly, Inc.