A talk I prepared for the third edition of the Learn Swift Milan meetup, hosted by Bending Spoons, focusing on the architecture we use to develop all of our iOS apps.

1. What 100M downloads
taught us about
iOS architectures
Francesco Di Lorenzo // @frankdilo
January 23, 2018
Learn Swift Milan — Meetup #3

4. github.com/bendingspoons/katana-swift

5. Motivation
• Our code must manage more state than ever
before: server responses and cached data, as well
as locally created data that has not yet been
persisted to the server
• This complexity is difficult to handle as we're mixing
two concepts that are very hard for the human
mind to reason about: mutation and
asynchronicity.
Courtesy of the Redux docs

6. Mutation + Asynchronicity
Great in separation but together they are like: Mentos + Coke
+

7. Mutation + Asynchronicity
Great in separation but together they are like: Mentos + Coke

8. +-
0

9. // State
struct AppState: State {
var counter = 0
}
// Actions
struct Increment: AppAction {
func updateState(state: inout AppState) {
state.counter += 1
}
}
struct Decrement: AppAction {
func updateState(state: inout AppState) {
state.counter -= 1
}
}

10. +-
0
+-
1
AppState(counter: 0) AppState(counter: 1)
dispatch(Increment())

11. Side Effects
• Handle complex flows that
cannot be described as
synchronous state mutations
(API calls, Image processing,
async tasks, …)

12. class AppDependencies: SideEffectDependencyContainer {
lazy var apiManager = ApiManager()
lazy var analyticsTracker = AnalyticsTracker()
// …
}
struct DownloadFeed: AppAction, AppActionWithSideEffect {
func sideEffect(current: AppState,
previous: AppState,
dispatch: @escaping StoreDispatch,
dependencies: AppDependencies) {
dependencies.apiManager.downloadFeed { feedItems in
dispatch(FeedDownloaded(items: feedItems))
}
}
}

13. What’s cool about
this architecture?

14. • It enforces an unidirectional data flow: this makes
the logic predictable and easier to understand
• It encourages data normalization, so that you don't
end up with multiple, independent copies of the
same data that are unaware of one another
• It allows the creation of powerful debugging tools

15. Powerful Debugging Tools

16. Highly Testable

17. Middleware

18. let myMiddleware: StoreMiddleware = { getState, dispatch in
return { next in
return { action in
let previousState = getState()
next(action)
let currentState = getState()
// do something...
}
}
}

19. • Persist and restore the app state
• Track metrics by detecting when an action is dispatched
or when the state changes
• Debugging: log actions, measure execution time
• …

20. TrackEvent<AppState, ShowColorPage>(
eventName: "open_page",
eventData: { previousState, currentState, action in
let isCompleted = currentState.completed.contains(action.id)
return [
"id": action.id,
"is_user_custom": action.userCustom,
"completed": isCompleted
]
}
)

21. Tempura

22. Available Architectures
MVC MVVMMVP VIPER
Ease of Use
Separation
of Concerns
Testability

23. Available Architectures
MVC MVVMMVP VIPER
Ease of Use
Separation
of Concerns
Testability

24. How it all works together
State
Actions
View
Controller
View Model
View

25. struct AppState: State {
var counter = 0
}
+-
0
struct CounterViewModel: ViewModelWithState {
var counterText = ""
init(state: AppState) {
self.counterText = "(state.counter)"
}
}

26. class CounterView: UIView, ViewControllerModellableView {
// MARK: Subviews
var counterLabel = UILabel()
var incrementButton = UIButton()
var decrementButton = UIButton()
// MARK: Interactions
var userDidTapIncrease: Interaction?
var userDidTapDecrease: Interaction?
// …
+-
0

27. func setup() {
self.addSubview(counterLabel)
self.addSubview(incrementButton)
self.addSubview(decrementButton)
self.incrementButton.on(.touchUpInside) { [weak self] _ in
self?.userDidTapIncrease?()
}
self.decrementButton.on(.touchUpInside) { [weak self] _ in
self?.userDidTapDecrease?()
}
}
+-
0

28. func update(oldModel: CounterViewModel?) {
self.counterLabel.text = self.model.counterText
}
+-
0
+-
1
dispatch(Increment())

29. class CounterViewController: ViewController<CounterView> {
override func setupInteraction() {
self.rootView.userDidTapIncrease = { [weak self] in
self?.dispatch(Increment())
}
self.rootView.userDidTapDecrease = { [weak self] in
self?.dispatch(Decrement())
}
}
}
+-
1

30. Does this scale?

31. View composition
EditorView:
ModellableView
struct EditorViewModel: ViewModel {
var timeline: Timeline
var settings: CompositionSettings
var isPlaying: Bool
var isAddPopupOpen: Bool
...
}
36 properties

32. struct VideoAreaViewModel: ViewModel {
var timeline: Timeline
var settings: CompositionSettings
var isPlaying: Bool
var isAddPopupOpen: Bool
...
}
View composition
EditingArea:
ModellableView
36 20 properties
EditingAreaViewModel(editor: EditorViewModel)

33. View composition
VideoArea:
ModellableView
struct VideoAreaViewModel: ViewModel {
var timeline: Timeline
var settings: CompositionSettings
var isPlaying: Bool
var isAddPopupOpen: Bool
...
}
36 12 properties
VideoAreaViewModel(editor: EditingAreaViewModel)

34. View composition
Switch:
View
var isOn: Bool
36 1 property

35. Navigation
• Navigate by dispatching Actions
• Isolate View Controllers presentation logic
• How do we reconcile navigation state managed by
UIKit and app state managed by Katana? 🤔

36. • Two main navigation actions: Show, Hide
• View Controllers must implement the Routable protocol
dispatch(Show(Screen.mainEditor))
dispatch(Hide())

37. enum Screen: String {
case mainTabbar
case feed
case feedSectionDetail
case createArt
case createArtFromPhoto
}
extension CreateArtStack: Routable {
var routeIdentifier: RouteElementIdentifier {
return Screen.createArt.rawValue
}
...

38. ...
var navigationConfiguration:[NavigationSource: NavigationOption] {
return [
.show(Screen.createArtFromPhoto): .presentModally({
return CreateArtFromPhotoVC(store: self.store)
}),
.hide(Screen.createArtFromPhoto): .pop
]
}

39. References
• Katana — github.com/bendingspoons/katana-swift
• Tempura will be open sourced soon
• Want to know more? bendingspoons.com
Francesco Di Lorenzo // @frankdilo

40. That’s it! Thanks 🙌