SwiftUI For Production | try! Swift 2019

SwiftUI for Production
try! Swift 2019 | Lea Marolt Sonnenschein | @hellosunschein

🥰 Like SwiftUI?

🛠 Used SwiftUI?

🥳

🥰
+

SwiftUI
🤔🤩😑

SwiftUI/
Where the compiler thinks the problem is.
Where the problem actually is.

SwiftUI/

List {
ForEach(contents, id: .id) { partialContent in
NavigationLink(destination: ContentListingView() {
CardView(model: CardViewModel.transform(partialContent))
.listRowBackground(self.bgColor)
.background(self.bgColor)
}
.background(self.bgColor)
}
.background(self.bgColor) ???
How to !@#$ change the BG color
of a table view?!

private func filtersView() -> some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top, spacing: .filterSpacing) {
ForEach(filters.appliedFilters, id: .self) { filter in
AppliedFilterView(filter: filter, type: .default) {
self.contentsMC.updateFilters(newFilters: self.filters)
}
}
}
}
.padding([.top], .filtersPaddingTop)
}

private func filtersView() -> some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top, spacing: .filterSpacing) {
ForEach(filters.appliedFilters, id: .self) { filter in
AppliedFilterView(filter: filter, type: .default) {
self.contentsMC.updateFilters(newFilters: self.filters)
}
}
}
}
.padding([.top], .filtersPaddingTop)
}
🤯

Content List Filters
SwiftUI/

Declarative UI framework.
SwiftUI/

“View is a function of state, not a
sequence of events.”
SwiftUI/

Off
On
SwiftUI/

SwiftUI/
class CheckmarkBox: UIView {
private var isOn: Bool
init(isOn: Bool) {
self.isOn = isOn
super.init(frame: .zero)
setupViews()
}
}
1. Create

Off
On
init(isOn: Bool) {
self.isOn = isOn
setupViews()
}
}
1. Create 2. Configure
SwiftUI/

Off
On
init(isOn: Bool) {
self.isOn = isOn
setupViews()
}
}
1. Create 2. Configure
SwiftUI/
3. Respond
Parent
Child
1: Tap
2: Change
3: Inform

UIKit
SwiftUI/
Parent
Child
1: Tap
2: Change
3: Inform
😩
Multidirectional
data flow.

1. Create 2. Configure 3. Respond
SwiftUI/
struct CheckmarkView: View {
@State var isOn: Bool = false
var body: some View {
Button(action: {
self.isOn.toggle()
}) {
if isOn { onView()
} else { offView()
}
}
}
}
?Off
On

UIKit
SwiftUI/
SwiftUI
Parent
Child
2: Inform
1: Tap
3: Change
Parent
Child
1: Tap
2: Change
3: Inform

SwiftUI/
SwiftUI
Parent
Child
2: Inform
1: Tap
3: Change
🥳
Unidirectional
data flow.

Data Flow~
👑👑👑

a View is a struct
is a value type
is immutable
Data Flow/

Data Flow/
@ObservedObject
@State
@EnvironmentObject

1. @State, to manage own state
Data Flow/

Checkbox
Data Flow/

onView()
if isOn { onView() }
}
}
Data Flow/

onView()
offView()
else { offView() }
}
}
Data Flow/

else { offView() }
}
}
onView()
offView()
Button(action: {
//toggle between on/off
}) {
else { offView() }
}
}
Data Flow/

Button(action: {
self.isOn.toggle()
}) {
else { offView() }
}
}
onView()
offView()
Data Flow/

Checkbox
= state; source of truth
describes View
mutates State
Data Flow/

Data Flow/

= state owner; source of truth
Checkmark
Data Flow/

= state owner; source of truth
Event
Data Flow/

New State
Data Flow/

1. @State, to manage your own state
2. @State <> @Binding, to communicate between views
Data Flow/

struct Lamp: View {
var isOn: Bool
}
struct Room: View {
var isLampOn: Bool
Lamp(isOn: isLampOn)
}
}
Data Flow/

struct Lamp: View {
var isOn: Bool
}
struct Room: View {
@State var isLampOn: Bool
}
}
Data Flow/

struct Lamp: View {
@Binding var isOn: Bool
}
struct Room: View {
}
}
Data Flow/

struct Lamp: View {
}
struct Room: View {
Lamp(isOn: $isLampOn)
}
}
Data Flow/

@EnvironmentObject
@ObservedObject
Data Flow/

@EnvironmentObject
@ObservedObject
@State
Dynamic View Properties
<> @Binding
Data Flow/

Filters
Data Flow/

TitleCheckbox
Checkbox
Data Flow/

TitleCheckbox
Checkbox
struct TitleCheckbox: View {
@State var isOn: Bool
var name: String
}
Data Flow/

TitleCheckbox
Checkbox
var name: String
}
struct Checkbox: View {
}
Data Flow/

TitleCheckbox
Checkbox
}
var name: String
CheckboxView(isOn: $isOn)
}
}
Data Flow/

TitleCheckbox
Checkbox
Data Flow/

Parent
TitleCheckbox
Checkbox
Data Flow/

@State @Binding @Binding @Binding<> <> <> <>
Data Flow/

@State @Binding @Binding @Binding<> <> <> <>
@Binding @Binding @Binding<> <> <> <>
@Binding @Binding @Binding<> <> <> <>
@Binding<> <>
@Binding<>
@Binding<>
<>
Data Flow/

Custom controls shouldn’t be using @State.
Data Flow Through SwiftUI
Data Flow/

Custom controls shouldn’t be using @State. *
(* or very, very sparingly)
Data Flow Through SwiftUI
Data Flow/

FiltersLibrary
Data Flow/

Library Filters
Data Flow/

Library Filters
FiltersState
Data Flow/

Library Filters
FiltersState
applied
Data Flow/

Library Filters
FiltersState
editable
applied
Data Flow/

Library Filters
Close/Apply
areFiltersSame
FiltersState
editable
applied
Data Flow/

@ObservedObject
@State
@EnvironmentObject
Data Flow/

1. @State, to manage a View’s own state
2. @State <> @Binding, to communicate between Views
3. @ObservedObject
@EnvironmentObject
to communicate between a View and its model
<> @ObservableObject
Data Flow/

class FiltersState {
var applied: [Filter] = []
var all: [Filter] = [] {
var editable: [Filter]
var areFiltersSame: Bool {
return all.elementsEqual(editable)
}
func clearAll() {...}
func update(filter: Filter) {...}
}
Data Flow/

class FiltersState: ObservableObject {
var applied: [Filter] = []
var all: [Filter] = []
var editable: [Filter]
}
}
Data Flow/

@Published var applied: [Filter] = []
@Published var all: [Filter] = []
@Published var editable: [Filter]
}
}
Data Flow/

private(set) var objectWillChange = PassthroughSubject<Void, Never>()
}
}
Data Flow/

private(set) var objectWillChange = PassthroughSubject<Void, Never>()
}
func clearAll () {
objectWillChange.send(())
}
}
Data Flow/

TitleCheckbox
var name: String
CheckboxBindingView(isOn: $isOn)
}
}
var body: some View {…}
}
Checkbox
Data Flow/

Heading
Filters List
Close/Apply
Data Flow/

Heading
FiltersList
FiltersView
FiltersState
Close/Apply
Data Flow/

FiltersView().environmentObject(state)
FiltersView(state: state)
@ObservedObject
@EnvironmentObject
Data Flow/

FiltersView().environmentObject(state)
FiltersView(state: state)
@ObservedObject
@EnvironmentObject
🤔
Singleton!?
Data Flow/

struct FiltersView: View {
@EnvironmentObject var state: FiltersState
return VStack {
Heading()
filters()
button()
}
}
func button() -> ButtonView {...}
func filters() -> some View {...}
}
Heading
FiltersList
Button
Data Flow/

TitleCheckbox
Checkbox
Data Flow/
var name: String
var body: some View {...}
}

TitleCheckbox
Checkbox
Data Flow/
var name: String
}

var name: String
}
struct FiltersView: View {
}
Data Flow/

TitleCheckbox(name: name)
TitleCheckbox(isOn: $isOn, name: name)
Data Flow/

struct FiltersView2: View {
private func filters() -> some View {
VStack() {
ForEach(state.editable, id: .self) { filter in
TitleCheckbox(isOn: Binding<Bool> , name: String )
}
}
}
}
Data Flow/

private func filtersList() -> some View {
VStack() {
ForEach(state.editable, id: .self) { filter in
}
}
}
}
filter
Data Flow/

Data Flow/

VStack() {
}
}
}
ForEach($state.editable, id:.self) { filter in
TitleCheckbox(isOn: filter.isOn, name: filter.name)
}
Data Flow/

VStack() {
}
}
}
ForEach(0..<state.editable.count) { index in
TitleCheckbox(isOn: self.$filters.editable[index].isOn,
name: self.filters.editable[index].name)
}
Data Flow/

Fatal error: Accessing State<Array<Filter>> outside View.body:
file /BuildRoot/Library/Caches/com.apple.xbs/Sources/
Monoceros_Sim/Monoceros-24.4/Core/State.swift, line 44
Data Flow/

TitleCheckbox(isOn: self.$state.editable[index].isOn,
name: self.state.editable[index].name)
}
Data Flow/

Data Flow/
Do not access @State
outride of View.body!
🙅 📵👎

ForEach<Range<Int>, Int, AppliedFilterView> count (2) != its
initial count (0). `ForEach(_:content:)` should only be used
for *constant* data. Instead conform data to `Identifiable` or
use `ForEach(_:id:content:)` and provide an explicit `id`!
TitleCheckbox(isOn: self.$state.editable[index].isOn,
name: self.state.editable[index].name)
}
Data Flow/

🤨
Data Flow/

var name: String
HStack {
TitleText(text: name)
Spacer()
Checkbox(isOn: $isOn)
}
}
}
Button(action: {
self.isOn.toggle()
}) {
if isOn { OnView() }
else { OffView() }
}
}
}
Data Flow/

var name: String
HStack {
Spacer()
}
}
}
Button(action: {
self.isOn.toggle()
}) {
else { OffView() }
}
}
}
😩
Data Flow/

@State var filter: Filter
HStack {
Spacer()
}
}
}
@Binding var filter: Filter
Button(action: {
self.isOn.toggle()
}) {
else { OffView() }
}
}
}
😩
Data Flow/

Composing complex interfaces
Data Flow/

return VStack {
ForEach(state.editable, id:.self) { filter in
TitleCheckbox(filter: filter)
}
}
}
@State var filter: Filter
Checkbox(filter: $filter)
}
}
Data Flow/

TitleCheckbox(filter: filter)
TitleCheckbox(isOn: $isOn, name: name)
Data Flow/

Button(action: {
self.isOn.toggle()
}) {
else { OffView() }
}
}
}
Data Flow/

Button(action: {
self.filter.isOn.toggle()
}) {
else { OffView() }
}
}
}
TitleCheckbox
Checkbox
FiltersView
Data Flow/

Button(action: {
}) {
if filter.isOn { OnView() }
else { OffView() }
}
}
}
TitleCheckbox
Checkbox
FiltersView
Data Flow/

Button(action: {
}) {
else { OffView() }
}
}
}
TitleCheckbox
Checkbox
FiltersView
👿
Data Flow/

FiltersView
FiltersState; @EnvironmentObject
Button(action: {
}) {
else { OffView() }
}
}
}
Data Flow/

List
FiltersView
FiltersState; @EnvironmentObject
Button(action: {
}) {
else { OffView() }
}
}
}
Data Flow/

Button(action: {
}) {
else { OffView() }
}
}
}
Data Flow/

@
Button(action: {
}) {
else { OffView() }
}
}
}
Data Flow/

@
Button(action: {
let index = state.editable.firstIndex(of: filter)!
}) {
else { OffView() }
}
}
}
Data Flow/

@
Button(action: {
self.state.editable[self.index].isOn.toggle()
}) {
else { OffView() }
}
}
}
Data Flow/

@
Button(action: {
}) {
else { OffView() }
}
}
}
self.state.editable[self.index].isOn.toggle() 🤪
Data Flow/

struct LandmarkDetail: View {
@EnvironmentObject var userData: UserData
var landmark: Landmark
var landmarkIndex: Int {
userData.landmarks.firstIndex(where: { $0.id == landmark.id })!
}
Button(action: {
self.userData.landmarks[self.landmarkIndex].isFavorite.toggle()
}) {
if self.userData.landmarks[self.landmarkIndex].isFavorite {
Image(systemName: "star.fill")
.foregroundColor(Color.yellow)
} else {
Image(systemName: "star")
.foregroundColor(Color.gray)
}
}
}
Data Flow/

Button(action: {
}) {
else { OffView() }
}
}
}
Data Flow/

Button(action: {
}) {
else { OffView() }
}
}
}
🤯
Data Flow/

Button(action: {
}) {
else { OffView() }
}
}
}
let filtered = state.editable.filter { $0.name == filter.name }.first!
let index = state.editable.firstIndex(of: filtered)!
Data Flow/

Checkbox
Not reusable.
Data Flow/

Checkbox
Not reusable.
Code smells…
🤔
Data Flow/

Checkbox
Not reusable.
Code smells…
🤔
🙅
Data Flow/

1:31
Introduction
1:31
Memory Sizing2
1:31
Optionals & Asserts3
Snapchat
Robinhood
Course Episodes
9:41
Video Playback Speed
1080p
720p
540p
360p
Sign Out
1080pVideo Playback Speed
1080pDownloads Quality
OffSubtitles
Downloads (WiFi only)
Settings
9:41
Data Flow/

var isOn: Bool
var name: String
HStack {
Spacer()
}
}
}
var isOn: Bool
Button(action: {
self.isOn.toggle()
}) {
else { OffView() }
}
}
}
Data Flow/

var isOn: Bool
var onChange: (Bool) -> Void
Button(action: {
self.isOn.toggle()
}) {
else { OffView() }
}
}
}
var isOn: Bool
var name: String
HStack {
Spacer()
}
}
}
Data Flow/

var isOn: Bool
Button(action: {
self.onChange(!self.isOn)
}) {
else { OffView() }
}
}
}
var isOn: Bool
var name: String
HStack {
Spacer()
Checkbox(isOn: isOn, onChange: onChange)
}
}
}
Data Flow/

func filtersList() -> some View {
VStack {
TitleCheckbox(isOn: filter.isOn, name: filter.name) { isOn in
guard let index = self.state.editable.firstIndex(of: filter)
else { return }
self.state.editable[index].isOn = isOn
}
}
}
}
Data Flow/

Recap
🙌

Recap
1. What SwiftUI is

Recap
1. What SwiftUI is
2. SwiftUI VS UIKit

Recap
1. What SwiftUI is
2. SwiftUI VS UIKit
3. Passing data between Views (and Models)

Recap
1. What SwiftUI is
2. SwiftUI VS UIKit
3. Passing data between Views (and Models)
4. Challenges of data-binding for Lists

Recap
1. What SwiftUI is
2. SwiftUI VS UIKit
3. Passing data between Views
4. Challenges of data-binding for Lists
5. Approach the unknown by experimenting

Recap
Views
Data Reusable Specific
Constant Enumerated + Binding Identifiable + Binding
Dynamic Identifiable + Callbacks Identifiable + Binding

Recap
TitleCheckbox(isOn: $filter.isOn, name: filter.name)
}
var name: String
HStack {
Spacer()
}
}
}
Button(action: {
self.isOn.toggle()
}) {
else { OffView() }
}
}
}

What Now?
🙌

1. Conference repo https://github.com/leamars/trySwift2019
2. UIKit translation to SwiftUI https://goshdarnswiftui.com
3. Facebook iOS Components: https://youtu.be/XhXC4SKOGfQ
4. Jetpack Compose: https://youtu.be/VsStyq4Lzxo
5. @hellosunschein on Twitter
What Now

Thank You!
🥳🙏👻

SwiftUI For Production | try! Swift 2019

More Related Content

What's hot

Similar to SwiftUI For Production | try! Swift 2019

Recently uploaded

SwiftUI For Production | try! Swift 2019