What 100M downloads taught us about iOS architectures

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

github.com/bendingspoons/katana-swift

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

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

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

// 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
}
}

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

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

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))
}
}
}

What’s cool about
this architecture?

• 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

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

• 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

• …

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
]
}
)

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

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

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

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

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

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

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

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

struct VideoAreaViewModel: ViewModel {
var isPlaying: Bool
...
}
View composition
EditingArea:
ModellableView
36 20 properties
EditingAreaViewModel(editor: EditorViewModel)

View composition
VideoArea:
ModellableView
struct VideoAreaViewModel: ViewModel {
var isPlaying: Bool
...
}
36 12 properties
VideoAreaViewModel(editor: EditingAreaViewModel)

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

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? 🤔

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

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

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

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

What 100M downloads taught us about iOS architectures

More Related Content

What's hot (20)

Similar to What 100M downloads taught us about iOS architectures (20)

Recently uploaded (20)

What 100M downloads taught us about iOS architectures