ADDC 2019 - Daniel Steinberg - Bringing SwiftUI to your App

Slide 1

Slide 1 text

The Changes Coming in SwiftUI ADDC 2019 Barcelona Daniel H Steinberg dimsumthinking.com *

Slide 2

Slide 2 text

* I have worked with SwiftUI for twenty years

Slide 3

Slide 3 text

* I have worked with SwiftUI for twenty years

Slide 4

Slide 4 text

* I have worked with SwiftUI for twenty years three weeks

Slide 5

Slide 5 text

* I have worked with SwiftUI for twenty years three weeks almost

Slide 6

Slide 6 text

* I have worked with SwiftUI for three weeks * The syntax will change

Slide 7

Slide 7 text

* I have worked with SwiftUI for three weeks * The syntax will change * SwiftUI is how we will code for Apple platforms

Slide 8

Slide 8 text

The Changes Coming in SwiftUI ADDC 2019 Barcelona Daniel H Steinberg dimsumthinking.com

Slide 9

Slide 9 text

The Old Days

Slide 10

Slide 10 text

The Old Days very

Slide 11

Slide 11 text

I'm a label

Slide 12

Slide 12 text

let label = UILabel(frame: CGRect(x: 0, y: 100, width: 380, height: 40))

Slide 13

Slide 13 text

let label = UILabel(frame: CGRect(x: 0, y: 100, width: 380, height: 40))

Slide 14

Slide 14 text

let label = UILabel(frame: CGRect(x: 0, y: 101, width: 380, height: 40))

Slide 15

Slide 15 text

I'm a label

Slide 16

Slide 16 text

I'm a label

Slide 17

Slide 17 text

Conditional Code

Slide 18

Slide 18 text

I'm a label

Slide 19

Slide 19 text

I'm a label

Slide 20

Slide 20 text

Pixels -> Points

Slide 21

Slide 21 text

I'm a label

Slide 22

Slide 22 text

I'm a label

Slide 23

Slide 23 text

I'm a label

Slide 24

Slide 24 text

I'm a label

Slide 25

Slide 25 text

Autolayout

Slide 26

Slide 26 text

Gained ﬂexibility for diﬀerent size classes

Slide 27

Slide 27 text

Lost pixel-perfect design

Slide 28

Slide 28 text

The Old Days

Slide 29

Slide 29 text

cell.text = "Hello, World!"

Slide 30

Slide 30 text

cell.textLabel.text = "Hello, World!"

Slide 31

Slide 31 text

private func setUpLabel() { label.textColor = .white label.textAlignment = .center label.text = "0" view.addSubview(label) }

Slide 32

Slide 32 text

private func setUpLabel() { label.textColor = .white label.textAlignment = .center label.text = "0" view.addSubview(label) }

Slide 33

Slide 33 text

private func setUpLabel() { label.textColor = .white label.textAlignment = .center label.text = "0" view.addSubview(label) }

Slide 34

Slide 34 text

private func setUpLabel() { label.textColor = .white label.textAlignment = .center label.text = "0" view.addSubview(label) }

Slide 35

Slide 35 text

private func setUpLabel() { label.textColor = .white label.textAlignment = .center label.text = "0" view.addSubview(label) }

Slide 36

Slide 36 text

private func setUpButton() { button.setTitle("Increase", for: .normal) button.frame = CGRect(x: 0, y: 300, width: 380, height: 40) button.addTarget(self, action: #selector(increaseValue), for: .touchUpInside) view.addSubview(button) }

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

@objc private func increaseValue(){ value += 1 label.text = value.description }

Slide 44

Slide 44 text

@objc private func increaseValue(){ value += 1 label.text = value.description }

Slide 45

Slide 45 text

@objc private func increaseValue(){ value += 1 label.text = value.description }

Slide 46

Slide 46 text

@objc private func increaseValue(){ value += 1 label.text = value.description } Classic Controller Code

Slide 47

Slide 47 text

SwiftUI

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

SwiftUI

Slide 50

Slide 50 text

struct ContentView: View { var body: some View { Text("0") } }

Slide 51

Slide 51 text

struct ContentView: View { var body: some View { Text("0") } }

Slide 52

Slide 52 text

struct ContentView: View { var body: some View { Text("0") } }

Slide 53

Slide 53 text

struct ContentView: View { var body: some View { return Text("0") } }

Slide 54

Slide 54 text

struct ContentView: View { var body: some View { Text("0") } }

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

struct ContentView: View { var body: some View { VStack { Text("0") Button(action: {}) { Text("Increase") } } } }

Slide 57

Slide 57 text

struct ContentView: View { var body: some View { VStack { Text("0") Button(action: {}) { Text("Increase") } } } }

Slide 58

Slide 58 text

struct ContentView: View { var body: some View { VStack { Text("0") Button(action: {}) { Text("Increase") } } } }

Slide 59

Slide 59 text

struct ContentView: View { var body: some View { VStack { Text("0") Button(action: {}) { Text("Increase") } } } } cell.textLabel.text

Slide 60

Slide 60 text

struct ContentView: View { var body: some View { VStack { Text("0") Button(action: {}) { Text("Increase") } } } }

Slide 61

Slide 61 text

struct ContentView: View { var body: some View { VStack { Text("0") Button(action: {}) { Text("Increase") } } } }

Slide 62

Slide 62 text

struct ContentView: View { var body: some View { VStack { Text("0") Button(action: {}) { Text("Increase") } } } }

Slide 63

Slide 63 text

struct ContentView: View { var body: some View { VStack { Text("0") Button(action: {}) { Text("Increase") } } } }

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

struct ContentView: View { var body: some View { VStack { Text("0") .padding() Button(action: {}) { Text("Increase") } } } }

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

struct ContentView: View { var body: some View { VStack { Text("0") .padding() Button(action: {}) { Text("Increase") } } } }

Slide 68

Slide 68 text

@objc private func increaseValue(){ value += 1 label.text = value.description } Flashback

Slide 69

Slide 69 text

struct ContentView: View { var body: some View { VStack { Text("0") .padding() Button(action: {}) { Text("Increase") } } } }

Slide 70

Slide 70 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 71

Slide 71 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 72

Slide 72 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 73

Slide 73 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 74

Slide 74 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 75

Slide 75 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 76

Slide 76 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 77

Slide 77 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 78

Slide 78 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 79

Slide 79 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 80

Slide 80 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 81

Slide 81 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 82

Slide 82 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 85

Slide 85 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } } Layout/Content/Behavior

Slide 86

Slide 86 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } } Layout/Content/Behavior

Slide 87

Slide 87 text

struct ValueDisplay: View { @Binding var value: Int var body: some View { Text("\(value)") } } Extract the Text

Slide 88

Slide 88 text

struct ValueDisplay: View { @Binding var value: Int var body: some View { Text("\(value)") } }

Slide 89

Slide 89 text

struct ValueDisplay: View { @Binding var value: Int var body: some View { Text("\(value)") } } Extract the Text

Slide 90

Slide 90 text

struct ValueDisplay: View { @Binding var value: Int var body: some View { Text("\(value)") } } Extract the Text

Slide 91

Slide 91 text

struct ValueDisplay: View { @Binding var value: Int var body: some View { Text("\(value)") } } Extract the Text

Slide 92

Slide 92 text

struct ValueDisplay: View { @Binding var value: Int var body: some View { Text("\(value)") } } Extract the Text

Slide 93

Slide 93 text

struct ValueDisplay: View { @Binding var value: Int var body: some View { Text("\(value)") } } Extract the Text

Slide 94

Slide 94 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 95

Slide 95 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 96

Slide 96 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { ValueDisplay(value: $value) .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 97

Slide 97 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { ValueDisplay(value: $value) .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 98

Slide 98 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { ValueDisplay(value: $value) .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 99

Slide 99 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { ValueDisplay(value: $value) .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 100

Slide 100 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 101

Slide 101 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 102

Slide 102 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 103

Slide 103 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 104

Slide 104 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 105

Slide 105 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 106

Slide 106 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 107

Slide 107 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 108

Slide 108 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { ValueDisplay(value: $value) .padding() IncreaseButton(value: $value) } } }

Slide 109

Slide 109 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { ValueDisplay(value: $value) .padding() IncreaseButton(value: $value) } } }

Slide 110

Slide 110 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 111

Slide 111 text

struct IncreaseButton: View { var body: some View { Button() { Text("Increase") } } } struct ValueDisplay: View { var body: some View { Text("\(value)") } }

Slide 112

Slide 112 text

SwiftUI

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

Note to developers

Slide 115

Slide 115 text

Note to developers Hire a designer

Slide 116

Slide 116 text

The example has: •Components: Text, TextField, Slider, Buttons, Drawing •Containers: VStack, HStack, ZStack, Geometry •Navigation: Tabs, Nav, Detail View •Data: State, Binding, Object Binding

Slide 117

Slide 117 text

The example has: •Components: Text, TextField, Slider, Buttons, Drawing •Containers: VStack, HStack, ZStack, Geometry •Navigation: Tabs, Nav, Detail View •Data: State, Binding, Object Binding

Slide 118

Slide 118 text

The example has: •Components: Text, TextField, Slider, Buttons, Drawing •Containers: VStack, HStack, ZStack, Geometry •Navigation: Tabs, Nav, Detail View •Data: State, Binding, Object Binding

Slide 119

Slide 119 text

The example has: •Components: Text, TextField, Slider, Buttons, Drawing •Containers: VStack, HStack, ZStack, Geometry •Navigation: Tabs, Nav, Detail View •Data: State, Binding, Object Binding

Slide 120

Slide 120 text

The example has: •Components: Text, TextField, Slider, Buttons, Drawing •Containers: VStack, HStack, ZStack, Geometry •Navigation: Tabs, Nav, Detail View •Data: State, Binding, Object Binding

Slide 121

Slide 121 text

struct ContentView: View { var body: some View { TabbedView { MoodEntryView() .tabItemLabel(Text("Face")) .tag(0) HistoryView() .tabItemLabel(Text("History")) .tag(1) } } }

Slide 122

Slide 122 text

struct ContentView: View { var body: some View { TabbedView { MoodEntryView() .tabItemLabel(Text("Face")) .tag(0) HistoryView() .tabItemLabel(Text("History")) .tag(1) } } }

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

var body: some View { VStack { FaceView(mood: $mood) FaceSlider(mood: $mood) TextField($message, placeholder: Text("What's going on")) Button(action: {history.add(mood: Mood(for: self.mood), title: self.message) self.message = "" self.mood = 2 }){ Text("Record Mood") }.disabled(buttonDisabled) } }

Slide 125

Slide 125 text

Slide 126

Slide 126 text

struct FaceView: View { @Binding var mood: Double var body: some View { GeometryReader {geometry in ZStack { Circle().fill(faceColor(mood: self.mood)) Eyes(size: min(for: geometry)) mouth(mood: self.mood, size: min(for: geometry)) .stroke(Color.black, lineWidth: min(for: geometry) / 50 ) }.aspectRatio(1, contentMode: .fit) } } }

Slide 127

Slide 127 text

Slide 128

Slide 128 text

Slide 129

Slide 129 text

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

Slide 132

Slide 132 text

No content

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

Use the geometry

Slide 136

Slide 136 text

Use the geometry Allows us to listen to our designers

Slide 137

Slide 137 text

Slide 138

Slide 138 text

Slide 139

Slide 139 text

Slide 140

Slide 140 text

No content

Slide 141

Slide 141 text

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

No content

Slide 144

Slide 144 text

HStack(alignment: .top) { Image(uiImage: record.image) .resizable() .frame(width: 40, height: 40) .padding([.leading, .trailing]) Text(record.title) .font(.headline) .lineLimit(3) Spacer() VStack(alignment: .trailing){ Text(record.time) .font(.body) Text(record.date) .font(.footnote) }.padding([.leading, .trailing]) }

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

Slide 149

Slide 149 text

No content

Slide 150

Slide 150 text

Slide 151

Slide 151 text

No content

Slide 152

Slide 152 text

Slide 153

Slide 153 text

No content

Slide 154

Slide 154 text

Slide 155

Slide 155 text

No content

Slide 156

Slide 156 text

Slide 157

Slide 157 text

No content

Slide 158

Slide 158 text

View Requires •Image •Text (title) •Text (time) •Text (date)

Slide 159

Slide 159 text

View Requires •Image •Text (title) •Text (time) •Text (date) Model Provides •Mood (enum) •String (title) •Date (timestamp)

Slide 160

Slide 160 text

View Model

Slide 161

Slide 161 text

struct MoodRecordViewModel { let moodRecord: MoodRecord }

Slide 162

Slide 162 text

struct MoodRecordViewModel { let moodRecord: MoodRecord }

Slide 163

Slide 163 text

extension MoodRecordViewModel { public var title: String { return moodRecord.title } public var image: UIImage { guard let image = UIImage(named: moodRecord.mood.description) else {fatalError()} return image } public var time: String { return timeFormatter.string(from: moodRecord.timeStamp) } public var date: String { return dateFormatter.string(from: moodRecord.timeStamp) } }

Slide 164

Slide 164 text

Slide 165

Slide 165 text

Slide 166

Slide 166 text

Slide 167

Slide 167 text

Slide 168

Slide 168 text

Slide 169

Slide 169 text

Updates

Slide 170

Slide 170 text

No content

Slide 171

Slide 171 text

history

Slide 172

Slide 172 text

public class History { lazy var moodRecords = initializeMoodRecords() }

Slide 173

Slide 173 text

public class History { lazy var moodRecords = initializeMoodRecords() }

Slide 174

Slide 174 text

extension History { func add(mood: Mood, title: String) { moodRecords.append(MoodRecord(mood: mood, title: title)) sendUpdate() } func clear() { moodRecords.removeAll() sendUpdate() } }

Slide 175

Slide 175 text

extension History { func add(mood: Mood, title: String) { moodRecords.append(MoodRecord(mood: mood, title: title)) sendUpdate() } func clear() { moodRecords.removeAll() sendUpdate() } }

Slide 176

Slide 176 text

extension History { func add(mood: Mood, title: String) { moodRecords.append(MoodRecord(mood: mood, title: title)) sendUpdate() } func clear() { moodRecords.removeAll() sendUpdate() } }

Slide 177

Slide 177 text

extension History { func add(mood: Mood, title: String) { moodRecords.append(MoodRecord(mood: mood, title: title)) sendUpdate() } func clear() { moodRecords.removeAll() sendUpdate() } }

Slide 178

Slide 178 text

extension History { func add(mood: Mood, title: String) { moodRecords.append(MoodRecord(mood: mood, title: title)) sendUpdate() } func clear() { moodRecords.removeAll() sendUpdate() } }

Slide 179

Slide 179 text

extension History { func add(mood: Mood, title: String) { moodRecords.append(MoodRecord(mood: mood, title: title)) sendUpdate() } func clear() { moodRecords.removeAll() sendUpdate() } }

Slide 180

Slide 180 text

Updates

Slide 181

Slide 181 text

@State

Slide 182

Slide 182 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 183

Slide 183 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 184

Slide 184 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { Text("\(value)") .padding() Button(action: {self.value += 1}) { Text("Increase") } } } }

Slide 185

Slide 185 text

@Binding

Slide 186

Slide 186 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 187

Slide 187 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 188

Slide 188 text

struct IncreaseButton: View { @Binding var value: Int var body: some View { Button(action: increaseValue) { Text("Increase") } } private func increaseValue() { value += 1 } }

Slide 189

Slide 189 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { ValueDisplay(value: $value) .padding() IncreaseButton(value: $value) } } }

Slide 190

Slide 190 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { ValueDisplay(value: $value) .padding() IncreaseButton(value: $value) } } }

Slide 191

Slide 191 text

struct ContentView: View { @State var value: Int = 0 var body: some View { VStack { ValueDisplay(value: $value) .padding() IncreaseButton(value: $value) } } }

Slide 192

Slide 192 text

struct ValueDisplay: View { @Binding var value: Int var body: some View { Text("\(value)") } }

Slide 193

Slide 193 text

history

Slide 194

Slide 194 text

@ObjectBinding

Slide 195

Slide 195 text

public class History: BindableObject { lazy var moodRecords = initializeMoodRecords() let didChange = PassthroughSubject() }

Slide 196

Slide 196 text

public class History: BindableObject { lazy var moodRecords = initializeMoodRecords() let didChange = PassthroughSubject() }

Slide 197

Slide 197 text

public class History: BindableObject { lazy var moodRecords = initializeMoodRecords() let didChange = PassthroughSubject() }

Slide 198

Slide 198 text

extension History { func sendUpdate() { updateMoodRecords() didChange.send(self) } private func updateMoodRecords() {…} }

Slide 199

Slide 199 text

extension History { func sendUpdate() { updateMoodRecords() didChange.send(self) } private func updateMoodRecords() {…} }

Slide 200

Slide 200 text

struct HistoryView: View { @ObjectBinding private var moodHistory = history

Slide 201

Slide 201 text

struct HistoryView: View { @ObjectBinding private var moodHistory = history

Slide 202

Slide 202 text

history

Slide 203

Slide 203 text

history

Slide 204

Slide 204 text

history

Slide 205

Slide 205 text

SwiftUI

Slide 206

Slide 206 text

Caution:

Slide 207

Slide 207 text

Caution: It is early days.

Slide 208

Slide 208 text

Caution: It is early days. Much will change.

Slide 209

Slide 209 text

It is our future

Slide 210

Slide 210 text

The Changes Coming in SwiftUI ADDC 2019 Barcelona Daniel H Steinberg dimsumthinking.com