MVVM with SwiftUI and Combine

MVVM with SwiftUI
and Combine
Tai-Lun Tseng

2019.11.15, Apple Taiwan

Agenda
• SwiftUI

• Combine

• MVVM

SwiftUI
import SwiftUI
struct ChecklistView: View {
@Binding var checklist: [CheckItem]
var body: some View {
List(checklist.indices) { index in
Toggle(isOn: self.$checklist[index].done) {
VStack(alignment: .leading) {
Text(self.checklist[index].title)
.bold()
Text(self.checklist[index].createdAt)
.foregroundColor(.gray)
}
}
}
}
}

SwiftUI
• Declarative

• Merges code and visual design, instead of separation (like
storyboard)

• Prevents complex UIViewController codes

Traditional Wayimport UIKit
class ChecklistCell: UITableViewCell {
@IBOutlet var doneSwitch: UISwitch!
@IBOutlet var titleLabel: UILabel!
@IBOutlet var createdAtLabel: UILabel!
func configure(for item: CheckItem) {
self.titleLabel.text = item.title
self.createdAtLabel.text = item.createdAt
self.doneSwitch.isOn = item.done
}
}
class ChecklistTableViewController : UIViewController,
UITableViewDataSource {
private var checklist = sampleChecklist
func tableView(_ tableView: UITableView, numberOfRowsInSection
section: Int) -> Int {
checklist.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath:
IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier:
"checklist_cell", for: indexPath)
if let checklistCell = cell as? ChecklistCell {
checklistCell.configure(for: checklist[indexPath.row])
}
return cell
}
// ...
}
import SwiftUI
.bold()
}
}
}
}
}

}
}
checklist.count
}
}
return cell
}
// ...
}
import SwiftUI
.bold()
}
}
}
}
}
• 40+ lines of code
• Requires Storyboard setup
and linking
• Adjust layout in both codes
and Storyboard/Nibs
• Supports all iOS versions

}
}
checklist.count
}
}
return cell
}
// ...
}
import SwiftUI
.bold()
}
}
}
}
}
• 15 lines of code
• No Nib or Storyboard
• Design layout in code directly,
with the support of Canvas
• Supports iOS 13+

New Syntax?
import SwiftUI
.bold()
}
}
}
}
}

import SwiftUI
.bold()
}
}
}
}
}
Property Wrapper
• "Wraps" original property with
power-ups
• Work on class/struct properties

import SwiftUI
.bold()
}
}
}
}
}
Property Wrapper
Type: [CheckItem]
Type: Binding<[CheckItem]>

import SwiftUI
.bold()
}
}
}
}
}
Opaque Type
• Reversed generics
• See associatedtype and
typealias
https://docs.swift.org/swift-book/LanguageGuide/OpaqueTypes.html

import SwiftUI
.bold()
}
}
}
}
}
Function Builder
What is the return value of
the closure?

import SwiftUI
.bold()
}
}
}
}
}
Function Builder
let view1 = Text(self.checklist[index].title)
.bold()
let view2 = Text(self.checklist[index].createdAt)
return ContentBuilder.buildBlock(view1, view2)
}

Function Builder
public struct VStack<Content> : View where Content : View {
@inlinable public init(alignment: HorizontalAlignment = .center,
spacing: CGFloat? = nil, @ViewBuilder content: () -> Content)
// ...
}
https://developer.apple.com/documentation/swiftui/viewbuilder

Styling
struct ContentView: View {
@State var text = "Hello World!"
VStack(alignment: .trailing, spacing: nil) {
TextField("Enter text", text: $text)
.border(Color.black)
.multilineTextAlignment(.trailing)
.padding()
Text(text.uppercased())
.foregroundColor(.white)
.bold()
.padding()
}.background(Rectangle().foregroundColor(.blue))
}
}

@State
@State var text = "Hello World!"
VStack(alignment: .trailing, spacing: nil) {
TextField("Enter text", text: $text)
.border(Color.black)
.multilineTextAlignment(.trailing)
.padding()
Text(text.uppercased())
.foregroundColor(.white)
.bold()
.padding()
}.background(Rectangle().foregroundColor(.blue))
}
}
• When state is updated, view is invalidated automatically

• @State values are managed by the view

class SearchViewModel: ObservableObject {
@Published var searchResult: [SearchResultItem] = []
@Published var searchText: String = ""
}
ObservableObject
• Present a single state by combining multiple state values

• Use @Published instead of @State

@Published var searchResult: [SearchResultItem] =
[]
}
@ObservedObject var model = SearchViewModel()
}
ObservableObject and
@ObservedObject

Single Source of Truth?
struct BadgeView: View {
@State var unreadCount = 0
// ...
}
struct UnreadListView: View {
@State var unreadList: [String] = []
// ...
}
struct SocialMediaView: View {
VStack {
BadgeView()
UnreadListView()
}
}
}
SocialMediaView
BadgeView UnreadListView
unreadCount unreadList

Single Source of Truth
struct BadgeView: View {
var unreadCount: Int
// ...
}
struct UnreadListView: View {
@Binding var unreadList: [String]
// ...
}
struct SocialMediaView: View {
@State var unreadList: [String] = []
VStack {
BadgeView(unreadCount: unreadList.count)
UnreadListView(unreadList: $unreadList)
}
}
}
SocialMediaView
BadgeView UnreadListView
unreadList.count unreadList
unreadList
• Use @Binding to pass down states

View
State and ObservedObject
@State
ObservableObject
View View View View
• Use @Binding to pass down states

• Use @ObservedObject instead of @State
@ObservedObject

View
EnvironmentObject
ObservableObject
View View View View
.environmentObject()
• Use @EnvironmentObject instead of @State

• Indirectly pass values for more ﬂexibility
@EnvironmentObject @EnvironmentObject

Add SwiftUI to UIKit
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
var window: UIWindow?
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions:
UIScene.ConnectionOptions) {
// Create the SwiftUI view that provides the window contents.
let contentView = ContentView()
// Use a UIHostingController as window root view controller.
if let windowScene = scene as? UIWindowScene {
let window = UIWindow(windowScene: windowScene)
window.rootViewController = UIHostingController(rootView: contentView)
self.window = window
window.makeKeyAndVisible()
}
}
// ...
}

In Playground...
let contentView = ContentView()
let host = UIHostingController(rootView: contentView)
host.preferredContentSize = CGSize(width: 320, height: 480)
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = host

Preview and Test Data
Design and write
component here

Preview and Test Data
Provide test data to the
preview component

Combine
• Process asynchronous events easily

• Swift's oﬃcial reactive programming library

• 3rd libraries:

• ReactiveCocoa

• RxSwift

Basic Concepts
• Publisher

• Subscriber

• Transformations

Publisher: Data Source
• Publishers create a series of data over time

• Think as an event stream
3 4 20 6 0-32
Type: Int
time

Publisher Examples
Just<Int>(1)
1
• Creates an event stream with only 1 value, and then
ﬁnishes immediately

Timer.publish(every: 1, on: .main, in: .common)
14:20:
36
14:20:
37
14:20:
38
14:20:
39
14:20:
40
Publisher Examples
• Creates an event stream that emits a Date object every
second

NotificationCenter.default.publisher(for: NSControl.textDidChangeNotification,
object: textField)
HelloH He Hel Hell
Publisher Examples
• Listens to text changes on a NSTextField with
Notiﬁcation Center

• Whenever text changes, it emits an event whose value is
the NSTextField object

Subscriber: event listener
struct TimerView : View {
@ObservedObject var timerState: TimerState
Text(timerState.timeText)
}
}
Timer
.publish(every: 1, on: .main, in: .common)
.autoconnect()
.sink { date in
timerState.timeText = df.string(from: date)
}
Timer.publish(every: 1, on: .main, in: .common)
14:20:
36
14:20:
37
14:20:
38
14:20:
39
14:20:
40

Transformations
NotificationCenter.default
.publisher(for: NSControl.textDidChangeNotification, object: textField)
.map { ($0 as! NSTextField).stringValue }
.filter { $0.count > 2 }
HelloH He Hel Hell
"Hello""" "H" "He" "Hel" "Hell"
"Hello""Hel" "Hell"
map
filter

Showcase: Search
• Requirements

• Send network request
after user stopped key in
for 1 second

• Don't send request for
same search texts

@Published var searchResult: [SearchResultItem] =
[]
init(searchRepository: SearchRepository) {
$searchText
.dropFirst(1)
// ...
.sink { result in
self.searchResult = result
}
}
}
@Published as Publisher

Transformations
$searchText
.dropFirst(1)
.debounce(for: 1, scheduler: RunLoop.main)
.removeDuplicates()
.compactMap { $0.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed) }
.flatMap { searchText in
URLSession.DataTaskPublisher(request: URLRequest(url: URL(string: "https://
en.wikipedia.org/w/api.php?action=opensearch&search=(searchText)&limit=
(self.limit)&namespace=0&format=json")!), session: .shared)
.map { $0.data }
.catch { err -> Just<Data?> in
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.compactMap { self.parseSearchResult(data: $0) }
.receive(on: RunLoop.main)
.sink { result in
}
.store(in: &cancellable)

dropFirst
$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}

dropFirst
$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}
"G "Gu" "Gun" "Gund" "Gunda" "Gundam"
"" "G "Gu" "Gun" "Gund" "Gunda" "Gundam"
dropFirst(1)

debounce
$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}

debounce
$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}
"Gun" "Gundam"
"G" "Gu" "Gun" "Gund" "Gunda" "Gundam"
debounce(for: 1, scheduler: RunLoop.main)

removeDuplicates & ﬁlter
$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}

$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}
removeDuplicates & ﬁlter
"G "Gun" "Gun" ""
removeDuplicates()
"G "Gun" ""
"G "Gun"
filter { $0.count > 0 }

$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}
URLSession.DataTaskPublisher

URLSession.DataTaskPublisher
URLSession.DataTaskPublisher(request: URLRequest(url: URL(string:
"https://en.wikipedia.org/w/api.php?action=opensearch&search=
(searchText)&limit=(self.limit)&namespace=0&format=json")!),
session: .shared)
(Data, Response)
.map { $0.data }
<5b, 22, 4b, 61, ...>

$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}
ﬂatMap

ﬂatMap
"Gun" "Gundam"
<5b, 22, 4b, 61, ...>
[SearchResultItem]
<5b, 22, 4b, 61, ...>
[SearchResultItem]
compactMap compactMap
URLSession.DataTaskPublisher URLSession.DataTaskPublisher

ﬂatMap
"Gun" "Gundam"
[SearchResultItem] [SearchResultItem]
URLSession.DataTaskPublisher(...
}

$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}
compactMap

Optional([SearchResultItem])
compactMap
<5b, 22, 4b, 61, ...> <00, 00, 00, ...>
Optional([SearchResultItem]) nil
.map { self.parseSearchResult(data: $0) }
[SearchResultItem]
.filter( $0 != nil )
.map { $0! }

compactMap
<5b, 22, 4b, 61, ...> <00, 00, 00, ...>
[SearchResultItem]

$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}
sink

$searchText
.dropFirst(1)
.removeDuplicates()
.map { $0.data }
print(err)
return Just(nil)
}
.compactMap { $0 }
}
.sink { result in
}
sink
[SearchResultItem]

store
• .sink() returns a subscription which conforms to Cancellable

• Call cancellable.cancel() to cancel the subscription

• Use .store() to manage subscriptions
let cancellable = $searchText
.dropFirst(1)
...
.sink { result in
}
cancellable.store(in: &cancellableSet)
$searchText
.dropFirst(1)
...
.sink { result in
}
.store(in: &cancellableSet)

Model-View-ViewModel
(MVVM)
• Variation of model-view-presenter (MVP)

• More concise codes and data ﬂow

• View knows existence of ViewModel, but not vise-versa

• ViewModel sends data to View via subscription

• Same as ViewModel and Model

• Non-UI logics and data layers sit in Models

Model-View-ViewModel
(MVVM)
View
• Subscribe and present data
from view model
• Handle user actions (e.g.
two-way binding)
Model
• Handle data and business
logic
• Talk to network / storage
ViewModel
• Bind data between model
and view
• Manage "UI states"
• Subscribe states
• Forward user actions
• Read / store data
• Subscribe changes

MVVM in iOS 13
• View: SwiftUI

• ViewModel: Bindable Object and Combine

• Model: existing SDK features (URLSession, Core Model,
etc.)

• Communication: subscription via Combine

SwiftUI as View
struct SearchView: View {
@EnvironmentObject var model: SearchViewModel
VStack {
TextField("Search Wiki...", text: $model.searchText)
if model.searchResult.count > 0 {
List(model.searchResult) { result in
NavigationLink(destination: SearchResultDetail(searchResult: result)) {
Text(result.name)
}
}
} else {
Spacer()
Text("No Results")
}
}
}
}

ObservableObject as ViewModel
private let searchRepository: SearchRepository
@Published var searchResult: [SearchResultItem] = []
// ...
init(searchRepository: SearchRepository) {
self.searchRepository = searchRepository
$searchText
.dropFirst(1)
// ...
self.searchRepository.search(by: searchText, limit: self.limit)
}
// ...
.sink { result in
}
}
}

MVVM Flow Example
SearchView SearchViewModel
SearchRepository
(model)
User keys
in texts
TextField changes
searchText value
(via binding)
Transforms
searchText into
search keyword
Fetches Wikipedia
search data with
keyword
Parses search
results
Sets result to
searchResult
Invalidate view

Conclusion
• Adapt SwiftUI for declarative view structure

• Use Combine to handle asynchronous ﬂows and event
streams

• Implement MVVM with SwiftUI and Combine

• Write less codes, but more concise and predictable

WWDC 2019 References
• 204 - Introducing SwiftUI: Building Your First App

• 216 - SwiftUI Essentials

• 226 - Data Flow Through SwiftUI

• 721 - Combine in Practice

• 722 - Introducing Combine
* Some APIs have been renamed since between WWDC and oﬃcial release

References
• https://developer.apple.com/documentation/swiftui

• https://developer.apple.com/documentation/combine

• https://github.com/teaualune/swiftui_example_wiki_search

• https://github.com/heckj/swiftui-notes

• https://www.raywenderlich.com/4161005-mvvm-with-
combine-tutorial-for-ios

MVVM with SwiftUI and Combine

More Related Content

What's hot (20)

Similar to MVVM with SwiftUI and Combine (20)

Recently uploaded (20)

MVVM with SwiftUI and Combine