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

Introduction of The Composable Architecture - CyberAgent21卒内定者iOS輪読会

Introduction of The Composable Architecture - CyberAgent21卒内定者iOS輪読会

CyberAgent21卒内定者iOS輪読会の番外編で行ったThe Composable Architectureの説明スライドです

Takuma Osada

May 09, 2021
Tweet

More Decks by Takuma Osada

Other Decks in Technology

Transcript

  1. 第11回 CyberAgent21卒内定者iOS輪読会
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 1

    View full-size slide

  2. 今回は番外編です
    The Composable Architecture について⾏います
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 2

    View full-size slide

  3. 今回の話では The Composable Architectureは⻑いので
    本家でもよく出てくるTCAとして記すこととします
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 3

    View full-size slide

  4. 発表者はTCAについてプロジェクトととしての運⽤経験はないのでマサカリをする際
    には⼗分に配慮した上で⾏っていただけると助かります
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 4

    View full-size slide

  5. 今回話すこと
    理解する上で必要な知識
    主な概要や誕⽣経緯
    5つの特徴
    登場するClassの役割
    導⼊することのメリット・デメリット
    サンプルコードを⾒る
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 5

    View full-size slide

  6. 今回話さないこと
    ⻑期的に使うことのメリデメ
    細かい圏論的な話
    僕の経験はry-ittoとハッカソンの時に使ったことがあるぐらいです
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 6

    View full-size slide

  7. 理解する上で必要な知識
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 7

    View full-size slide

  8. 必要な知識
    Combine(UIKit+RxSwiftもある⼀応ある)
    DI
    iOSで⽤いる設計ほぼ全て
    特にReduxやFlux
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 8

    View full-size slide

  9. あると理解がはやいもの
    Elm Architecture
    Vuex
    ⽐較的考えが似ている、または開発者がそれにinspireされて作ってる
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 9

    View full-size slide

  10. 主な概要
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 10

    View full-size slide

  11. ⼆⼈の有名な開発者によって作られた
    Brandon Williams
    Stephen Celis
    どちらもKick Starterのmain contributerとして有名。snapshot testingとかも作ってる。
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 11

    View full-size slide

  12. 動画が多数存在するのでとりあえず⾒てない⼈は⾒た⽅がいいかも
    https://www.pointfree.co/collections/composable-architecture/a-tour-of-the-
    composable-architecture/ep100-a-tour-of-the-composable-architecture-part-1
    TCAの理解以外にも⾊々考え⽅を学べそうなコンテンツ(英語レベル⾼め)
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 12

    View full-size slide

  13. 5つの特徴
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 13

    View full-size slide

  14. State Management
    Composition
    Side Effect
    Testable
    Ergonomics
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 14

    View full-size slide

  15. State Management
    状態管理をReduxやFluxのように⾏う
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 15

    View full-size slide

  16. Composition
    コンポーネント思考
    FatなReducerが作成されない(Reducerの分割)
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 16

    View full-size slide

  17. Side Effect
    サービスにおける副作⽤に耐えうる設計になってる
    副作⽤(apiのfetch, 遅延処理とか)
    (PublisheのPublisherが内部で作成されてる)
    CombineのPublisherに準拠してるため実現できてる
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 17

    View full-size slide

  18. Testable
    書くべきテストコードの明確化
    Action -> Reducerをテストすることがメインになる
    サンプルコードも豊富
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 18

    View full-size slide

  19. Ergonomics
    簡略化(?)
    僕はまだこれを実感できてない
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 19

    View full-size slide

  20. 登場するClassの役割
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 20

    View full-size slide

  21. Action
    enumで定義されたユーザーのアクション
    Reducer
    Actionを受け取りEffectを呼び出すorStateに流す役割
    Effect
    CombineのPublisher
    Actionへ接続する
    State
    受け取った値をViewに反映させる
    Store
    Action, Reducer, Effect, Stateの集合体
    Environment
    Dependencyを保持する
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 21

    View full-size slide

  22. CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 22

    View full-size slide

  23. 導⼊することのメリット・デメリット
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 23

    View full-size slide

  24. メリット
    状態管理の明確な責務の切り分け
    設計に関する議論がチームで⾏いやすくなる
    modular architectureの適⽤のしやすさ
    採⽤につながる
    Combine理解してなくてもなんとなくで書き始められる
    テストを書くことの難易度が下がる
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 24

    View full-size slide

  25. デメリット
    設計として制約が多い
    ライブラリとしての依存をしないといけない(⾃作でも問題ない)
    CombineをラップしてるのでCombineへの理解とiOS13以上ではないと使えない
    UIKitのサンプルも存在する
    実務でやるのであればCombineの理解(ソースコードの理解)は必須
    別の設計への乗り換えはそこそこしんどそう
    ⻑期プロジェクトになることが決まってないサービス
    チームのレベル感次第では崩壊する
    特性を理解せずに導⼊するにはむしろマイナスが発⽣する可能性も
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 25

    View full-size slide

  26. サンプルコードを⾒る
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 26

    View full-size slide

  27. Basic Usage
    https://github.com/pointfreeco/swift-composable-architecture#basic-usage
    Effectがどんな感じか理解しやすい
    TestStoreも⾒てみると良さそう
    Todos
    https://github.com/pointfreeco/swift-composable-
    architecture/tree/main/Examples/Todos
    親コンポーネントと⼦コンポーネントの関係性が⾒れるので良さそう
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 27

    View full-size slide

  28. WithViewStore
    SwiftUIのView
    storeを初期値に持ち、viewStoreに変換する
    ViewStore
    Observed Object
    ViewStoreを購読してViewを変更できる
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 28

    View full-size slide

  29. その他
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 29

    View full-size slide

  30. 結構他にも似たような設計を提唱しているものはある
    Harvest
    bow-arch
    VueFlux
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 30

    View full-size slide

  31. 質問 & 議論
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 31

    View full-size slide

  32. 次回は 第13章 & CAの設計 です!
    CyberAgent21卒内定者iOS輪読会 - iOSアプリ設計パターン⼊⾨
    by @ostk0069 32

    View full-size slide