Getting Started with Combine And SwiftUI

Getting Started with
Combine and SwiftUI in iOS
Scott Gardner

About Me
iOS app architect & developer since 2010
iOS Architect at Wayfair
Author of video courses & books on
Swift & iOS app development
Apple Certified Trainer for Swift and iOS

What’s In Store
Combine basics
UIKit vs. SwiftUI + Combine
Anatomy of a SwiftUI View
Create Crosstalk app

What’s In Store
Combine basics
UIKit vs. SwiftUI + Combine
Create Crosstalk app
Wrap up
Want more?

Download resources:
bit.ly/gscsresources

What is Combine?
Reactive framework for asynchronous operations
Declarative vs. imperative
Unified approach

Data
Notification
Center
Grand Central
Dispatch
Delegates
ClosuresOperations
Timers
Why Combine?

Data
Combine
SwiftUI
Why Combine?

Combine
SwiftUI
Foundation Core Data
@FetchRequest
NSManagedObject
URLSession
NotificationCenter
Why Combine?
ObservableObject
@Published
@ObservedObject
(@State / @Binding)

Combine Basics
Publisher Subscriber
subscribes
gives subscription
requests values
sends values
sends completion

Combine Basics
Publisher Subscriber
subscribes
gives subscription
requests values
sends values
sends completion
cancels

Combine Operators
1 2 3
map { $0 * 2 }
2 4 6
Publisher
Subscriber

UIKit + Traditional
Fetch data
Decode
Update state
Update UI

UIKit + Traditional
Fetch dataDecodeUpdate stateUpdate UI

SwiftUI + Combine
Fetch data
Decode
Update state

SwiftUI + Combine
Fetch dataDecodeUpdate state

SwiftUI + CombineUIKit + Traditional

Update UI in UIKit
OUT OF STOCK
Product: 8’ Gnome
Quantity: 0
Product: 8’ Gnome
Quantity: 0
If you loved gottfried,
you’ll fall even harder
for his truly giant big
brother who simply
cannot be missed.
Gottfried's big bro
thunders onto the scene
from Schleswig…

U
Update UI in UIKit
OUT OF STOCK
Product: 8’ Gnome
Quantity: 0
Product: 8’ Gnome
F
D
S
Quantity: 1
brother who simply
cannot be missed.
Gottfried's big bro
from Schleswig…

U
Update UI in UIKit
OUT OF STOCK
Product: 8’ Gnome
Product: 8’ Gnome
F
D
S
Quantity: 1
brother who simply
cannot be missed.
Gottfried's big bro
from Schleswig…
Quantity: 1

Update UI in Combine + SwiftUI
OUT OF STOCK
Product: 8’ Gnome
Quantity: 0
Product: 8’ Gnome
Quantity: 0
brother who simply
cannot be missed.
Gottfried's big bro
from Schleswig…

Update UI in Combine + SwiftUI
Product: 8’ Gnome
Product: 8’ Gnome
F
D
S
Quantity: 1
brother who simply
cannot be missed.
Gottfried's big bro
from Schleswig…
Quantity: 1
BUY NOW

struct ContentView: View {
@ObservedObject private var viewModel = GistsViewModel()
@State private var showSettings = false
var body: some View {
NavigationView {
VStack {
SearchBar(text: $viewModel.searchText)
List {
ForEach(viewModel.gists) { gist in
NavigationLink(destination: SafariView(url: gist.htmlURL)
.navigationBarTitle("")
.navigationBarHidden(true)) {
GistView(gist: gist)
}
}
}
.navigationBarTitle(Text("GitHub Gists"))
.navigationBarItems(trailing:
Button(action: { self.showSettings.toggle() }, label: {
Image(systemName: "gear")
.foregroundColor(.primary)
})
)
.edgesIgnoringSafeArea(.bottom)
}
.sheet(isPresented: $showSettings) {
SettingsView()
}
}
}
}

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
Typically a struct, but can also be a final class

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
A protocol that requires a body property

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
Property wrappers that manage observable state

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
Creates a visible navigation hierarchy

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
Creates a vertical stack view

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
A custom view that wraps a UISearchBar

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
Creates a table view

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
Creates views on demand from a collection

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
A button that triggers navigation

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
View modifiers

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
Presents a view as a sheet

NavigationView {
VStack {
List {
}
}
}
})
)
}
SettingsView()
}
}
}
}
A protocol that requires a body property
Typically a struct, but can also be a final class
Property wrappers that manage observable state
From Getting Started with Combine and SwiftUI in iOS - Scott Gardner - scotteg.com @scotteg
Creates a visible navigation hierarchy
Creates a vertical stack view
A custom view that wraps a UISearchBar
Creates a table view
Creates views on demand from a collection
A button that triggers navigation
View modifiers
Presents a view as a sheet

–Bruce Lee
“If you want to learn to swim,
jump into the water.”

Download final:
bit.ly/gscsfinal

bit.ly/combinebook bit.ly/swiftuibook

What property lets you receive a
bindable object from an ancestor?

What property wrapper lets you
connect an @State property to a
child view?

Thanks!
@scotteg
scotteg
scotteg.com
$scotteg

Getting Started with Combine And SwiftUI

More Related Content

What's hot

Similar to Getting Started with Combine And SwiftUI

Recently uploaded

Getting Started with Combine And SwiftUI