SwiftUI and Combine All the Things

SwiftUI and Combine
All The Things
Scott Gardner
Download starter: bit.ly/combineswiftuiatt

SwiftUI and Combine
All The Things
@scotteg
scotteg
scotteg.com

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
Convert UIKit app

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

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

U
Update UI in UIKit
OUT OF STOCK
Product: 8’ Gnome
Product: 8’ Gnome
F
D
S
Quantity: 1
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…
Quantity: 1

Update UI in Combine + SwiftUI
Product: 8’ Gnome
Product: 8’ Gnome
F
D
S
Quantity: 1
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…
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 SwiftUI and Combine All The Things - 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 starter:
bit.ly/combineswiftuiatt

Download final:
bit.ly/combineswiftuiatt-final

1401 ./App/AppDelegate.swift
2142 ./App/SceneDelegate.swift
803 ./View Models/GistCellViewModel.swift
1722 ./View Models/GistsViewModel.swift
1680 ./Models/Gist.swift
535 ./Models/Owner.swift
1738 ./Views/GistView.swift
1046 ./Views/SafariView.swift
1034 ./Views/SearchBar.swift
1155 ./Views/ContentView.swift
1077 ./Services/RemoteImageService.swift
14333 total
find . -name *.swift -print0 | xargs -0 wc
UIKit + Traditional SwiftUI + Combine
1281 ./App/AppDelegate.swift
2354 ./App/SceneDelegate.swift
615 ./View Models/GistCellViewModel.swift
1926 ./View Models/GistsViewModel.swift
1646 ./Models/Gist.swift
535 ./Models/Owner.swift
5135 ./Views/GistCell.swift
3446 ./Views/GistsViewController.swift
1269 ./Services/RemoteImageService.swift
18207 total

14333 total
18207 total

bit.ly/combinebook bit.ly/swiftuibook

What property wrapper creates
a Publisher?

What View type triggers a
navigation when pressed?

Thanks!
@scotteg
scotteg
scotteg.com
$scotteg

SwiftUI and Combine All the Things

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to SwiftUI and Combine All the Things

Similar to SwiftUI and Combine All the Things (20)

Recently uploaded

Recently uploaded (20)

SwiftUI and Combine All the Things