Upgrade to Pro — share decks privately, control downloads, hide ads and more …

モジュール分割した開発での知見とテーマ切り替えやUICatalogについて

 モジュール分割した開発での知見とテーマ切り替えやUICatalogについて

「モジュール分割した開発での知見とテーマ切り替えやUICatalogについて」by 小幡 十矛(Obata Tomu)
2021/05/19 CA.swift #14 発表資料

【イベントページ】https://cyberagent.connpass.com/event/211541/

本スライドで出てきたリンク一覧
【Composable Architecture in GitHub】https://github.com/pointfreeco/swift-composable-architecture
【Examples】https://github.com/pointfreeco/swift-composable-architecture/tree/main/Examples
【AppClip】https://github.com/pointfreeco/isowords/tree/main/App/AppClip

【isowords in GitHub】https://github.com/pointfreeco/isowords

【A Tour Of the Composable Architecture】https://www.pointfree.co/collections/composable-architecture/a-tour-of-the-composable-architecture/ep100-a-tour-of-the-composable-architecture-part-1

【A Tour Of isowords】https://www.pointfree.co/episodes/ep142-a-tour-of-isowords-part-1

【UICatalog】https://github.com/playbook-ui/playbook-ios

【TCA+Feature単位でのモジュール分割テンプレートリポジトリ in GitHub】https://github.com/tomu28/tca-swiftui-template

3371c1da192435d33a2843abf7c13287?s=128

Tomu Obata

May 19, 2021
Tweet

Transcript

  1. モジュール分割した開発での知見と テーマ切り替えやUICatalogについて 2021/05/19 CA.swift #14

  2. Introduction 小幡 十矛(Obata Tomu) iOSエンジニア@CyberAgent 2 @tomu28 @tomu28_jp https://tomu28.jp/tech-blog/

  3. Agenda 1. The Composable Architecture とは 2. Feature単位でのモジュール分割 ▫ 概要

    ▫ テーマ切り替え ▫ UICatalog 3. まとめ 3
  4. 今回伝えたいこと・ゴール: ◦ The Composable Architecture + Feature単位のモジュール分割 で の開発イメージが湧くこと 4

  5. The Composable Architecture とは 1 5

  6. The Composable Architecture とは ◦ State ◦ Action ◦ Environment

    ◦ Reducer ◦ Store 6
  7. The Composable Architecture とは ◦ State ◦ Action ◦ Environment

    ◦ Reducer ◦ Store 7
  8. The Composable Architecture とは ◦ State ▫ UI表示に関する状態を管理する 8

  9. The Composable Architecture とは ◦ State ◦ Action ◦ Environment

    ◦ Reducer ◦ Store 9
  10. The Composable Architecture とは ◦ Action ▫ ボタンタップ, APIリクエストからレスポンスを 受け取っ

    た時 などのアクションを定義 10
  11. The Composable Architecture とは ◦ State ◦ Action ◦ Environment

    ◦ Reducer ◦ Store 11
  12. The Composable Architecture とは ◦ Environment ▫ 依存関係(ex: スケジューラーやRepository層の   データなど)を定義

    12
  13. The Composable Architecture とは ◦ State ◦ Action ◦ Environment

    ◦ Reducer ◦ Store 13
  14. The Composable Architecture とは ◦ Reducer ▫ Stateの更新, 作用はEffect型で返却 14

  15. The Composable Architecture とは ◦ State ◦ Action ◦ Environment

    ◦ Reducer ◦ Store 15
  16. ◦ Store ▫ State, Reducer, Environmentを用いてViewを定義 The Composable Architecture とは

    16
  17. Composition コンポーネントを小さく 分解できる ↓ 分離されたモジュール に抽出可能 State management アプリケーションの状 態は多くの画面で共有

    される。 ↓ 状態の変更をすぐに他 の画面にも反映可能 The Composable Architecture とは Testing State, Actionが Equatableに準拠 ↓ 機能テストが容易 17
  18. Composition コンポーネントを小さく 分解できる ↓ 分離されたモジュール に抽出可能 State management アプリケーションの状 態は多くの画面で共有

    される。 ↓ 状態の変更をすぐに他 の画面にも反映可能 The Composable Architecture とは Testing State, Actionが Equatableに準拠 ↓ 機能テストが容易 18
  19. Composition コンポーネントを小さく 分解できる ↓ 分離されたモジュール に抽出可能 State management アプリケーションの状 態は多くの画面で共有

    される。 ↓ 状態の変更をすぐに他 の画面にも反映可能 The Composable Architecture とは Testing State, Actionが Equatableに準拠 ↓ 機能テストが容易 19
  20. “ ◦ Examples in GitHub ▫ https://github.com/pointfreeco/swift-compos able-architecture/tree/main/Examples ◦ A

    Tour of the Composable Architecture ▫ https://www.pointfree.co/collections/compos able-architecture/a-tour-of-the-composable-ar chitecture/ep100-a-tour-of-the-composable-ar chitecture-part-1 20
  21. Feature単位でのモジュール分割 2 21

  22. Feature単位でのモジュール分割 2 22 概要

  23. 1機能単位ごとにモジュールを切る ex) OnboardingFeature.swift State, Action, Environment ,Reducerを持つ Feature単位でのモジュール分割【概要】 23

  24. App Xcode Projectはエントリーポイントとして機能し アプリケーションを起動するためのViewを構築するだけが責務 Feature単位でのモジュール分割【概要】 24

  25. メリット: ◦ 一部の機能だけを修正した時、差分ビルドが行われ 実行速度が早い ◦ 機能間の依存が分かりやすい ◦ Package.swift で読み込み、importする必要があるため Feature単位でのモジュール分割【概要】

    25
  26. デメリット: ◦ Package.swiftを編集するたびプロジェクト構造が読み込まれる → その間ビルドしたり出来ない Feature単位でのモジュール分割【概要】 26

  27. Widget, AppClipに関して ◦ どちらも使用可能なバイナリサイズが決まっている ◦ メインコードの実装と同じUIを組む場合 → それに対応するモジュールを読み込み使用する流れになる ◦ メインコードの実装を異なるUIを組む場合

    → 既に作ってあるモジュールをそのまま使えない... しかし Feature単位でのモジュール分割【概要】 27
  28. モジュールを追加する時は、 Feature単位でのモジュール分割【概要】 28

  29. モジュールを追加する時は、 1. まずSources直下にFeatureディレクトリを切る Feature単位でのモジュール分割【概要】 29

  30. モジュールを追加する時は、 1. まずSources直下にFeatureディレクトリを切る 2. Package.swiftに追記する Feature単位でのモジュール分割【概要】 30

  31. Feature単位でのモジュール分割 2 31 テーマ切り替え

  32. Feature単位でのモジュール分割【テーマ切り替え】 32 ◦ Styleguideモジュール内のColors.swift でカラー定義

  33. Feature単位でのモジュール分割【テーマ切り替え】 33

  34. Feature単位でのモジュール分割【テーマ切り替え】 34 Styleguideモジュールに切り出す利点 ◦ UIcatalogより一覧で カラーコードやフォントなどを みることが可能に

  35. Feature単位でのモジュール分割【テーマ切り替え】 35 Assets.xcassetsを用いてカラー定義していない理由 ◦ App ProjectからApp Package内へ アクセスすることになってしまうため

  36. Feature単位でのモジュール分割 2 36 UICatalog

  37. Feature単位でのモジュール分割【UICatalog】 UICatalogとは ◦ https://github.com/playbook-ui/playbook-ios 導入メリット: ◦ Visual Regression Testingが行えるように ◦

    ビルド時間短く、新規ComponentのUI確認が可能に 37
  38. Feature単位でのモジュール分割【UICatalog】 38 Feature単位でモジュール分割した際のメリット: ◦ パーツごとのUI, 挙動を確認しやすい ◦ 対応するmockを差し込みやすい → 複数パターンのUI確認が行いやすい

  39. “ 39 ◦ AppClip in GitHub ▫ https://github.com/pointfreeco/isowords/tree /main/App/AppClip ◦

    A Tour of isowords ▫ https://www.pointfree.co/episodes/ep142-a-t our-of-isowords-part-1
  40. まとめ 3 40

  41. まとめ ◦ UICatalog, Widget, AppClipなどでモジュール内のUI, ロジックを使用する新規開発 → Feature単位でモジュール分割する利点はある 41

  42. 今回紹介した設計のテンプレートリポジトリ ◦ https://github.com/tomu28/tca-swiftui-template 42

  43. 参考になれば 😄 43

  44. ◦ https://github.com/pointfreeco/swift-composable-architecture ◦ https://github.com/pointfreeco/isowords ◦ https://www.pointfree.co/collections/composable-architecture/a-tou r-of-the-composable-architecture/ep100-a-tour-of-the-composable-ar chitecture-part-1 ◦ https://www.pointfree.co/episodes/ep142-a-tour-of-isowords-part-1

    ◦ https://github.com/playbook-ui/playbook-ios ◦ https://github.com/tomu28/tca-swiftui-template Appendix 44
  45. Thanks! 45 2021/05/19 CA.swift #14