Tweet
Tweet

Slide 1

Slide 1 text

Kyash TechTalk #3 Mobileチーム - KMM化、宣言的UI、Widget対応 2022/04/21 SwiftUI/Jetpack Composeを採用して よかったこと悪かったこと

Slide 2

Slide 2 text

2 2 iOS

Slide 3

Slide 3 text

自己紹介 ● Ryoya Kobitsu (@nekowen) ● iOS Engineer / Kyash Inc. ● Twitter: @n3k0w3n Kyash: @nekowen

Slide 4

Slide 4 text

4 4 01. SwiftUI導入までの経緯

Slide 5

Slide 5 text

5 ● Kyashには20種類以上の履歴画面が存在していた ○ Visa決済、QUIC Pay決済、Payeasy、クレジットカード 入金 etc… ● 技術的負債となっていたのでリファクタリングを実施 ● 以下の理由でSwiftUIを採用 ○ レイアウト要素が単純で作り直しが容易 ○ 要素の出し分けが多いためif文でレイアウトできた方が 好都合 ● 以降、新規画面は原則、既存画面は順次SwiftUIへ きっかけは履歴画面のリファクタリング

Slide 6

Slide 6 text

6 Kyash iOS アプリの履歴画面を SwiftUI でリファクタリングした話 https://blog.kyash.co/entry/2021/07/21/100307

Slide 7

Slide 7 text

7 7 02. よかったこと

Slide 8

Slide 8 text

8 SwiftUI UIKit

Slide 9

Slide 9 text

9 ● Storyboardを含むレビューはコストが高かった ○ diffが大量に発生する ○ コンフリクトが発生する頻度もそこそこあった ○ レビュワーがローカルでチェックアウトして確認 ■ スクリーンショットが貼ってあればスキップすることも ● SwiftUIを採用して上記の課題を軽減 ○ 変更箇所が明確なためレビューしやすい ○ コンフリクトの発生頻度も減少 コードレビューの敷居が下がった

Slide 10

Slide 10 text

10 Kyashリワードの表示パターン 読み込み中 通信成功 通信失敗

Slide 11

Slide 11 text

11 ● 通信が走る画面は ほぼこの共通Viewが使われて いる ● 中ではDataSourceのstateを みて出し分けているためとて もシンプル Viewの切り替え処理が簡単

Slide 12

Slide 12 text

12 ● cornerRadius, shadowといったModifierが用意されて いる ○ UIKitでは扱いづらかったViewカスタマイズがや りやすい ● アニメーション実装も簡単 ○ Shimmerのようなアニメーションも可能 ○ iOS14以降はmodifierが用意されている ■ .redacted(reason: .placeholder) Viewのカスタマイズも簡単

Slide 13

Slide 13 text

13 ● SwiftUIコードを変更するとサイドのプレ ビュー画面にリアルタイムで反映 ● Preview部分はSwiftでかけるので、画面 にサンプルデータを渡してプレビューす ることも可能 ○ 長い文字列を渡してレイアウトが崩 れないか簡易的に確認することもで きる 強力なXcode Previews

Slide 14

Slide 14 text

14 ● previewDeviceとpreviewDisplayNameを 活用すると、複数のデバイスでまとめて プレビューが可能 ○ 開発中にレイアウト崩れがないか サッと確認できる ○ 最小サイズであるiPhone SE第一世 代と最大サイズであるiPhone 12 Pro Max両方同時にみれるので効率 が良い ● previewDisplayNameはプレビュー端末の 上にタイトルとして表示される 強力なXcode Previews

Slide 15

Slide 15 text

15 15 03. 辛かったこと

Slide 16

Slide 16 text

16 ● UITableViewのrefreshControlに相当する機能がない ● iOS15からrefreshable(action:)が追加された ○ iOS13-14はどうする…？ ● GeometryReaderとUIActivityIndicatorViewをラップしたView を組み合わせて実現 Pull to refreshが簡単にできない😭

Slide 17

Slide 17 text

17 ● iOS13ではUICollectionViewに代わるコンポー ネントがない ● iOS14以降ではLazyVGrid/LazyHGridが用意 された ● iOS13のサポートを切るまではVStackと HStackで表現することに Gridの実装が手間😭

Slide 18

Slide 18 text

18 ● iOS13と14でコンポーネントにキーボードが被ったときの挙動が異なる ○ iOS13だとそのまま ○ iOS14だと自動的に位置を調整してくれる ● iOS13はNotificationCenterを使うように分岐している キーボードの挙動が変わる😭

Slide 19

Slide 19 text

19 19 03. まとめ

Slide 20

Slide 20 text

20 まとめ ● SwiftUI導入によって、チーム全体の生産性が向上した ● OSバージョンごとにAPIの対応未対応の差が激しい ○ これから導入する場合は、iOS14以降から利用することをオススメします。

Slide 21

Slide 21 text

21 21 Android

Slide 22

Slide 22 text

22 22 01. Jetpack Compose 導入までの経緯

Slide 23

Slide 23 text

23 ● 決済や入出金を行うと履歴データが作られる。 ○ 履歴の種類は20種類以上... ● Fragmentとxmlがそれぞれ用意されていた ○ 履歴を追加/改修するのが大変！ ○ QAコストも爆上がり ● リファクタリングと同時にJetpack Composeに置き換える作戦に。 きっかけは履歴画面のリファクタリング

Slide 24

Slide 24 text

24 24 01. よかったこと

Slide 25

Slide 25 text

25 ● 普段書いてるKotlinで書けるのでxml脳に切り替えなくて良い ● 簡単に意味のあるグループに分割して、かつ名前が付けられる (xmlだとファイル分けて includeするしかなかった) ○ レビューがしやすくなった Kotlinで書ける

Slide 26

Slide 26 text

26 xml Jetpack Compose

Slide 27

Slide 27 text

27 ● リストの実装が非常に楽になった ○ KyashはGroupieを使っていたが、セルの種類だけBindableItemを 継承したクラスを作る必要があった ● themeのカスタマイズが定義に飛ぶだけで一覧を見れるので扱いやすい ● すぐ調べられるようになった ○ 以前はandroid codesearchとか使っていた ● Webでも同じコードでUIが作れる ○ Webで試したら普通に使えそうだった 扱いやすい

Slide 28

Slide 28 text

28 ● View内に状態をもたないため自分でstateを管理する必要はあるが、想 定外なバグなどは出ない分安心できる ● 冪等性最高 ○ 副作用が分かれているので状態を意識しなくていい UIとロジックを分けられる

Slide 29

Slide 29 text

29 ● めっちゃ生産性向上した ● 新しくComposable作る際にある程度コストはかかるが、体感40%くら いは生産性向上してる ● Compose最高！ 結果

Slide 30

Slide 30 text

30 30 02. 辛かったこと

Slide 31

Slide 31 text

31 ● Pager ○ animateToScrollPageで最後のページから最初のペー ジに飛ぶ時にアニメーションしてくれない ○ https://issuetracker.google.com/issues/198753 885 ● Placeholder ○ 複数のplaceholderのImagePainter#Stateを監視す るとクラッシュする(Android6だけ) accompanist

Slide 32

Slide 32 text

32 MotionLayout

Slide 33

Slide 33 text

33 ● 現状MotionSceneがjsonでしか書けない ● そのうちKotlinで書けるらしい ○ https://github.com/androidx/constraintlay out/wiki/Compose-MotionLayout-JSON-S yntax MotionLayout

Slide 34

Slide 34 text

34

Slide 35

Slide 35 text

35 ● かなり生産性が上がるのでどんどん導入していきたい ● もちろんまだまだ足りない機能はたくさんある ● もっとComposeが便利になっていくのが楽しみ まとめ

Slide 36

Slide 36 text

Thank you 36