This document discusses the application of The Composable Architecture (TCA) to build scalable SwiftUI projects with a focus on modularization. It outlines three main steps: transforming SwiftUI views into TCA reducers, modularizing TCA components, and performing refactoring with dependency injection and unit testing. The ultimate goal is to enhance project organization, testability, and maintainability through effective modular design principles.

1. スケーラブル SwiftUI プロジェクトのための
実⽤的な TCA 適用及びモジュール化
Principles of building robust module
KyuYoung Heo
@bbvch13531
iOS Developer

2. 目次
• デモ
• Declarative UI and SwiftUI
• The Composable Architecture
• モジュラー化の目的
• ステップ 1: SwiftUI to TCA
• ステップ 2: TCA モジュール化
• ステップ 3: Refactoring
• 結論

3. デモを実行しましょう

4. Declarative UI and SwiftUI

5. struct CounterView: View {
@State var count = 0
var body: some View {
HStack {
Button("-") { count -= 1 }
Text("(count)")
Button("+") { count += 1 }
}
}
}

6. Data Flow in SwiftUI
Declarative UI
UI = f( state )
The layout
on screen
Builder
methods
The application state
docs.
fl
utter.dev

7. Data Flow in SwiftUI
Data
fl
ow
Action View
State
👨💻
User Interaction Render
Update
Mutate
WWDC19: Data
fl
ow through SwiftUI

8. The Composable Architecture

9. TCA
• TCA は pointfree によって導入されます
• Unidirectional data
fl
ow architecture
• ex) elm, Redux, MVI, ReactorKit
Introduction

10. TCA
Architecture Diagram
Reducer
State
Action
View
Update
Mutate
Send Handle
Store

11. TCA
Architecture Diagram
"タップ"
Reducer
State
Action
View
Update
Send Handle
Store
Increment
Mutate

12. TCA
Architecture Diagram
Reducer
State
Action
View
Update
Mutate
Send Handle
Store
Increment
count=0

13. TCA
Architecture Diagram
Reducer
State
Action
View
Update
Send Handle
Store
count+=1
Mutate

14. TCA
Architecture Diagram
Reducer
State
Action
View
Update
Send Handle
Store
count+=1
Mutate
1

15. TCA
State Management
Reducer
State
Action
View
Update
Mutate
Send Handle
Store

16. TCA
State Management
Reducer
State
Action
View
Update
Mutate
Send Handle
Store
E
ff
ect Dependency

17. TCA
• Better State Management
• Easy to debug
• Enhance Testability
• Modularization(Composability)
Bene
fi
ts

18. Purpose of Modularization

19. Modularization
• The size of project grows,
the complexity increases exponentially
• Control this complexity is key of
Software Engineering
Purpose
Feature
Complexity
Time
Cost

20. • High Cohesion, Low Coupling
• Open to Extend, Close to modify
• Dependency Inversion
• Testability
Modularization
SOLID Principle

21. Modularization
• Composing Modules by Separating of Concerns
• Do Use Access Control(public, internal, private)
• Do access by protocol not by Implementation
• Use Dependencies by DI
• Write Unit Test
Principles for Robust Module

22. Modularization
• (Reducer + View) could be one component in TCA
• Composing Reducers to build a App
TCA

23. ステップ 1: SwiftUI to TCA

24. github.com/bbvch13531/githubsearch

25. Workshop1
• Change ViewModel to Reducer
• De
fi
ne State, Action
• Handling Action
• Implement GithubAPIClient
SwiftUI to TCA

26. ステップ 2: TCA モジュラー化

27. Workshop2
• Add Local Swift Package
• Create Modules according to Directories
• Add Access Control (public, internal, private)
• Inversion of Dependency
TCA Modularization

28. Workshop2
TCA Modularization
Core
RepoSearch
RepoDetail
Starring
Stargazer
App
Module Structure

29. ステップ 3: Refactoring

30. Workshop3
• Inject Dependency using DI Container
• Writing Unit Test
Refactoring

31. 結 論
けつ ろん

32. Conclusion
• Migrate SwiftUI to TCA
• Seperate project into Modules
• Inject Dependency
• Writing Unit Test
What we've done

33. Conclusion
• How to compose module with high cohesion and low coupling
What we've learn

34. ありがとうございます。
KyuYoung Heo
@bbvch13531
iOS Developer