The Composable Architecture: A great (and OPINIONATED) architecture to build scalable apps

The Composable Architecture (or TCA for short), is an architecture/library for building large, robust, and scalable applications. It’s built on a foundation of ideas popularized by Elm and Redux, but made to feel at home in the Swift language and on Apple's platforms. Further, it’s strongly opinionated about how to manage side effects and build end-to-end tests that guarantee your business logic is doing what is expected. In this talk, we are going to describe the benefits vs other architectures and build a demo on SwiftUI applying the main concepts.

Transcript

1. The Composable Architecture: A great (and OPINIONATED) architecture to build scalable apps! iOS Developers
 Global Summit'22 By Pedro Rojas (aka Pitt)
2. About me
3. About me 👪 Father of two kids
4. About me 👪 Father of two kids 👨💻 SWE at Meta
5. About me 👪 Father of two kids 👨💻 SWE at Meta 📺 Youtube @swiftandtips 🌎
6. About me 👪 Father of two kids 👨💻 SWE at Meta 📺 Youtube @swiftandtips 🎙 Podcast @letswiftpodcast 🌎 🇲🇽🇪🇸🇨🇴🇦🇷🇨🇱🇪🇨
7. HE OMPOSABLE RCHITECTURE T C A
8. HE OMPOSABLE RCHITECTURE T C A
9. T C A
10. T C A
11. T C A Brandon Williams Stephen Celis Created by pointfree.co
12. Redux Elm
13. 📱 💻 ⌚
14. SIDE EFFECTS
15. State Domain
16. External Change State Domain
17. External Change State Domain Notification
18. External Change State Domain Notification Timer
19. External Change State Domain Notification Timer Any code executed as a secondary step
21. func receiveItems(data: [Item]) { items = data // ... more work }
22. func receiveItems(data: [Item]) { items = data // ... more work } . . .
23. func receiveItems(data: [Item]) { items = data // ... more work } // Something invoked this... func restoreItems() { items = [] } . . . Unexpected!
24. OPINIONATED
25. TCA
27. View (Presenter)
28. View Action sends (Presenter) (Enum)
29. View Action Reducer sends received by (Presenter) (Enum) (Function)
30. View Action Reducer Store sends received by (Presenter) (Enum) (Function)
31. View Action Reducer State Store sends received by mutates (Presenter) (Enum) (Function) (Struct)
32. View Action Reducer State Store sends received by mutates triggers update (Presenter) (Enum) (Function) (Struct)
33. View Action Reducer State Effect Store sends received by returns mutates triggers update (Presenter) (Enum) (Function) (Struct) (Outside World)
34. View Action Reducer State Effect Store sends sends received by returns mutates triggers update (Presenter) (Enum) (Function) (Struct) (Outside World)
35. View Action Reducer State Environment Effect Store sends sends received by returns interacts with mutates triggers update (Presenter) (Enum) (Function) (Struct) (Dependencies) (Outside World)
37. Composition Environment Side Effects Testing The basics
38. The basics
41. struct State: Equatable { var counter = 0 } State
42. enum Action: Equatable { case increaseCounter case decreaseCounter } Action
43. struct Environment { // Future Dependencies... } Environment
44. let reducer = Reducer< State, Action, Environment > { state, action, environment in switch action { case .increaseCounter: state.counter += 1 return Effect.none case .decreaseCounter: state.counter -= 1 return Effect.none } } Reducer
45. struct ContentView: View { let store: Store<State, Action> var body: some View { WithViewStore(self.store) { viewStore in // SwiftUI View . . . } } } View
46. Button { viewStore.send(.decreaseCounter) } label: { // Button Layout. . . } .buttonStyle(.plain) View
47. ContentView( store: Store( initialState: State(), reducer: reducer, environment: Environment() ) ) Store
48. Demo
54. { fetch products Open Cart Add item to cart Select Products tab Select Profile tab Increase/decrease 
 product qty
55. Composition
60. View Action Reducer State Environment Effect Store sends sends received by returns interacts with mutates triggers update (Presenter) (Enum) (Function) (Struct) (Dependencies) (Outside World)
61. View Action Reducer State Environment Effect Store sends sends received by returns interacts with mutates triggers update (Presenter) (Enum) (Function) (Struct) (Dependencies) (Outside World)
62. AddToCart
63. AddToCart
64. AddToCart Product Product List
65. AddToCart
66. struct AddToCartDomain { struct State: Equatable { var count = 0 } enum Action: Equatable { case didTapPlusButton case didTapMinusButton } struct Environment {} static let reducer = Reducer< State, Action, Environment > { state, action, environment in // ... } } Domain
67. View struct AddToCartButton: View { let store: Store<AddToCartDomain.State, AddToCartDomain.Action> var body: some View { WithViewStore(self.store) { viewStore in // SwiftUI View . . . } } } }
68. View if viewStore.count > 0 { PlusMinusButton(store: self.store) } else { Button { viewStore.send(.didTapPlusButton) } label: { Text("Add to Cart") .padding(10) .background(.blue) .foregroundColor(.white) .cornerRadius(10) } .buttonStyle(.plain) }
69. View if viewStore.count > 0 { PlusMinusButton(store: self.store) } else { Button { viewStore.send(.didTapPlusButton) } label: { Text("Add to Cart") .padding(10) .background(.blue) .foregroundColor(.white) .cornerRadius(10) } .buttonStyle(.plain) }
70. AddToCart
71. AddToCart Product
72. struct ProductDomain { struct State: Equatable, Identifiable { let id: UUID let product: Product var count: Int = 0 var addToCartState = AddToCartDomain.State() } //. . . } State
73. struct ProductDomain { struct State: Equatable, Identifiable { let id: UUID let product: Product var count: Int = 0 var addToCartState = AddToCartDomain.State() } //. . . } State
74. enum Action: Equatable { case addToCart(AddToCartDomain.Action) } Action
75. static let reducer = Reducer< State, Action, Environment > Reducer .init { state, action, environment in switch action { case .addToCart(.didTapPlusButton): state.count += 1 return .none case .addToCart(.didTapMinusButton): state.count = max(0, state.count - 1) return .none } }
76. static let reducer = Reducer< State, Action, Environment > Reducer .init { state, action, environment in switch action { case .addToCart(.didTapPlusButton): state.count += 1 return .none case .addToCart(.didTapMinusButton): state.count = max(0, state.count - 1) return .none } }
77. static let reducer = Reducer< State, Action, Environment > Reducer .init { state, action, environment in switch action { case .addToCart(.didTapPlusButton): state.count += 1 return .none case .addToCart(.didTapMinusButton): state.count = max(0, state.count - 1) return .none } } .combine( )
78. static let reducer = Reducer< State, Action, Environment > Reducer .init { state, action, environment in switch action { case .addToCart(.didTapPlusButton): state.count += 1 return .none case .addToCart(.didTapMinusButton): state.count = max(0, state.count - 1) return .none } } .combine( ) AddToCartDomain.reducer .pullback( state: \.addToCartState, action: /ProductDomain.Action.addToCart, environment: { _ in AddToCartDomain.Environment() } ),
79. AddToCart Product
80. AddToCart Product Product List
81. State struct ProductListDomain { struct State: Equatable { var productListState: IdentifiedArrayOf<ProductDomain.State> = [] // . . . } // . . . }
82. State struct ProductListDomain { struct State: Equatable { var productListState: IdentifiedArrayOf<ProductDomain.State> = [] // . . . } // . . . }
83. enum Action: Equatable { case fetchProducts case product( id: ProductDomain.State.ID, action: ProductDomain.Action ) // . . . } Action
84. Environment struct Environment { var fetchProducts: () -> [Product] var uuid: () -> UUID }
85. Reducer static let reducer = Reducer< State, Action, Environment >.combine( .init { state, action, environment in switch action { case .fetchProducts: return .none case .product(let id, let action): return .none // . . . } )
86. Reducer static let reducer = Reducer< State, Action, Environment >.combine( .init { state, action, environment in switch action { case .fetchProducts: return .none case .product(let id, let action): return .none // . . . } ) ProductDomain.reducer.forEach( state: \.productListState, action: /ProductListDomain.Action.product(id:action:), environment: { _ in ProductDomain.Environment() } ),
87. Reducer static let reducer = Reducer< State, Action, Environment >.combine( .init { state, action, environment in switch action { case .fetchProducts: return .none case .product(let id, let action): return .none // . . . } ) ProductDomain.reducer.forEach( state: \.productListState, action: /ProductListDomain.Action.product(id:action:), environment: { _ in ProductDomain.Environment() } ), state.productListState = IdentifiedArrayOf( uniqueElements: environment.fetchProducts().map { ProductDomain.State( id: environment.uuid(), product: $0 ) } )
88. View struct ProductListView: View { let store: Store<ProductListDomain.State,ProductListDomain.Action> var body: some View { WithViewStore(self.store) { viewStore in NavigationView { List { ForEachStore( self.store.scope( state: \.productListState, action: ProductListDomain.Action .product(id: action:) ) ) { ProductCell(store: $0) } } .onAppear { viewStore.send(.fetchProducts) } // . . .
89. View struct ProductListView: View { let store: Store<ProductListDomain.State,ProductListDomain.Action> var body: some View { WithViewStore(self.store) { viewStore in NavigationView { List { ForEachStore( self.store.scope( state: \.productListState, action: ProductListDomain.Action .product(id: action:) ) ) { ProductCell(store: $0) } } .onAppear { viewStore.send(.fetchProducts) } // . . .
90. Store ProductListView( store: Store( initialState: ProductListDomain.State(), reducer: ProductListDomain.reducer, environment: ProductListDomain.Environment( fetchProducts: { Product.sample }, uuid: { UUID() } ) ) )
91. Demo
92. Effects
93. AddToCart Product Product List
94. AddToCart Product Product List CartItem Cart List
95. struct Environment { var fetchProducts: @Sendable () async throws -> [Product] var sendOrder: @Sendable ([CartItem]) async throws -> String var uuid: @Sendable () -> UUID } Environment
96. enum Action: Equatable { case fetchProducts case fetchProductsResponse(TaskResult<[Product]>) // . . . } Action
97. Reducer .init { state, action, environment in switch action { case .fetchProducts: return .task { await .fetchProductsResponse( TaskResult { try await environment.fetchProducts() } ) } case .fetchProductsResponse(.success(let products)): state.productListState = IdentifiedArrayOf( uniqueElements: products.map { ProductDomain.State( id: environment.uuid(), product: $0 ) } ) return .none case .fetchProductsResponse(.failure(let error)): print("Error getting products, try again later.") return .none // . . .
98. Reducer .init { state, action, environment in switch action { case .fetchProducts: return .task { await .fetchProductsResponse( TaskResult { try await environment.fetchProducts() } ) } case .fetchProductsResponse(.success(let products)): state.productListState = IdentifiedArrayOf( uniqueElements: products.map { ProductDomain.State( id: environment.uuid(), product: $0 ) } ) return .none case .fetchProductsResponse(.failure(let error)): print("Error getting products, try again later.") return .none // . . .
99. Reducer // . . . case .cart(let action): switch action { // . . . case .cartItem(_, let action): switch action { case .deleteCartItem(let product): return .task { .resetProduct(product: product) } } default: return .none } // . . .
100. Demo
101. Testing
103. func testFetchProductsSuccess() async { let products: [Product] = […] let store = TestStore( initialState: ProductListDomain.State(), reducer: ProductListDomain.reducer, environment: ProductListDomain.Environment( fetchProducts: { products }, sendOrder: { _ in fatalError("unimplemented") }, uuid: { UUID.newUUIDForTest } ) ) // . . .
104. func testFetchProductsSuccess() async { let products: [Product] = […] let store = TestStore( initialState: ProductListDomain.State(), reducer: ProductListDomain.reducer, environment: ProductListDomain.Environment( fetchProducts: { products }, sendOrder: { _ in fatalError("unimplemented") }, uuid: { UUID.newUUIDForTest } ) ) // . . . await store.send(.fetchProducts) { $0.dataLoadingStatus = .loading } await store.receive(.fetchProductsResponse(.success(products))) { $0.productListState = identifiedArray $0.dataLoadingStatus = .success } }
105. Demo
106. My Experience with TCA
107. My Experience with TCA
108. My Experience with TCA Great for large teams!
109. Things to consider
110. Things to consider Learning curve
111. Things to consider Learning curve Exhaustive testing
112. Things to consider Learning curve Exhaustive testing “Domain Ceremony”*
113. struct FeatureState { … } enum FeatureAction { … } struct FeatureEnvironment { var client: Client; … } let featureReducer = Reducer< FeatureState, FeatureAction, FeatureEnvironment > { state, action, environment in … }
114. struct FeatureState { … } enum FeatureAction { … } struct FeatureEnvironment { var client: Client; … } let featureReducer = Reducer< FeatureState, FeatureAction, FeatureEnvironment > { state, action, environment in … } struct Feature: ReducerProtocol { struct State { … } enum Action { … } let client: Client func reduce(into state: inout State, action: Action) -> Effect<Action, Never> { … } }
115. “Almost everything we know about good software architecture has to do with making software easy to change.” - Mary Poppendieck
116. Contact Thank you, have a great day! ☺ 📺 Youtube @swiftandtips 🎙 Podcast @letswiftpodcast Twitter @swiftandtips Demo