ADDC 2019 - Daniel Steinberg - Bringing SwiftUI to your App

What changes in the way you design your app with SwiftUI? Everything and nothing. In this fast-paced talk we’ll look at how to get the most out of Apple’s new Swift-friendly declarative UI framework and the impact it has on how you envision and architect your app.

Transcript

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

   View Slide

2. * I have worked with SwiftUI for twenty years
   

   View Slide

3. * I have worked with SwiftUI for twenty years
   

   View Slide

4. * I have worked with SwiftUI for twenty years
   three weeks
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. The Old Days
   

   View Slide

10. The Old Days
    very
    

    View Slide

11. I'm a label
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. I'm a label
    

    View Slide

16. I'm a label
    

    View Slide

17. Conditional Code
    

    View Slide

18. I'm a label
    

    View Slide

19. I'm a label
    

    View Slide

20. Pixels -> Points
    

    View Slide

21. I'm a label
    

    View Slide

22. I'm a label
    

    View Slide

23. I'm a label
    

    View Slide

24. I'm a label
    

    View Slide

25. Autolayout
    

    View Slide

26. Gained flexibility
    for different
    size classes
    

    View Slide

27. Lost
    pixel-perfect
    design
    

    View Slide

28. The Old Days
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. 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)
    }
    

    View Slide

37. 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)
    }
    

    View Slide

38. 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)
    }
    

    View Slide

39. 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)
    }
    

    View Slide

40. 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)
    }
    

    View Slide

41. 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)
    }
    

    View Slide

42. 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)
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. SwiftUI
    

    View Slide

48. View Slide

49. SwiftUI
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

64. View Slide

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

    View Slide

66. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

83. View Slide

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

    View Slide

85. 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
    

    View Slide

86. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

112. SwiftUI
     

     View Slide

113. View Slide

114. Note to developers
     

     View Slide

115. Note to developers
     Hire a designer
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

123. View Slide

124. 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)
     }
     }
     

     View Slide

125. 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)
     }
     }
     

     View Slide

126. 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)
     }
     }
     }
     

     View Slide

127. 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)
     }
     }
     }
     

     View Slide

128. 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)
     }
     }
     }
     

     View Slide

129. 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)
     }
     }
     }
     

     View Slide

130. View Slide

131. 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: 15)
     }.aspectRatio(1, contentMode: .fit)
     }
     }
     }
     

     View Slide

132. View Slide

133. View Slide

134. View Slide

135. Use the geometry
     

     View Slide

136. Use the geometry
     Allows us to listen to our designers
     

     View Slide

137. 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)
     }
     }
     }
     

     View Slide

138. 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)
     }
     }
     }
     

     View Slide

139. 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)
     }
     }
     }
     

     View Slide

140. View Slide

141. 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)
     }
     }
     }
     

     View Slide

142. View Slide

143. View Slide

144. 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])
     }
     

     View Slide

145. View Slide

146. 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])
     }
     

     View Slide

147. View Slide

148. 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])
     }
     

     View Slide

149. View Slide

150. 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])
     }
     

     View Slide

151. View Slide

152. 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])
     }
     

     View Slide

153. View Slide

154. 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])
     }
     

     View Slide

155. View Slide

156. 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])
     }
     

     View Slide

157. View Slide

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

     View Slide

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

     View Slide

160. View Model
     

     View Slide

161. struct MoodRecordViewModel {
     let moodRecord: MoodRecord
     }
     

     View Slide

162. struct MoodRecordViewModel {
     let moodRecord: MoodRecord
     }
     

     View Slide

163. 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)
     }
     }
     

     View Slide

164. 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)
     }
     }
     

     View Slide

165. 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)
     }
     }
     

     View Slide

166. 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)
     }
     }
     

     View Slide

167. 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)
     }
     }
     

     View Slide

168. 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)
     }
     }
     

     View Slide

169. Updates
     

     View Slide

170. View Slide

171. history
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

180. Updates
     

     View Slide

181. @State
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

185. @Binding
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

193. history
     

     View Slide

194. @ObjectBinding
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

202. history
     

     View Slide

203. history
     

     View Slide

204. history
     

     View Slide

205. SwiftUI
     

     View Slide

206. Caution:
     

     View Slide

207. Caution:
     It is early days.
     

     View Slide

208. Caution:
     It is early days.
     Much will change.
     

     View Slide

209. It is our future
     

     View Slide

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

     View Slide

211. View Slide

212. View Slide