How to use SwiftUI for rapid development

SwiftUI is a framework for declarative UI structure design across all Apple Platforms. It was introduced during WWDC 2019 and, since then, has been significantly updated both in framework and Swift language side.

It is rapidly becoming the de facto standard for UI development for Apple platforms, including iOS. We will see how we can start using SwiftUI and learn about this remarkable framework during the talk. We will create a working prototype in minutes and see how to use it in large applications.

As with every technology, we need to talk about tradeoffs. SwiftUI is a very opinionated framework and has quite strict guidelines. It is missing a lot of things that we have been using with UIKit. We are going to look at some problems and how to overcome them.

Transcript

1. How to use SwiftUI for rapid development fassko www.kristaps.me
2. rapid adjective moving or acting with great speed; swift
3. About me 17+ years of experience Founder & Swift developer Open source
4. swiftweeklybrief.com
5. Rapid = fast
6. Create app in one month
7. Intro to SwiftUI Rapid development techniques What did I learn? The Plan
8. SwiftUI
9. Create a new SwiftUI project No AppDelegate Everything starts in App struct No SceneDelegate
10. class AppDelegate: NSObject, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool { /// } }
11. @main struct SwiftUIApp: App { @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate var body: some Scene { WindowGroup { ContentView() } } }
12. State
13. @State var pickedApples = 0 var body: some View { NavigationView { VStack(spacing: 30) { Text("🍎 : \(pickedApples)") NavigationLink("Pick apples") { PickApplesView(pickedApples: $pickedApples) } } } } @Binding var pickedApples: Int var body: some View { VStack(spacing: 30) { Text("Picked apples: \(pickedApples)") Button("Pick an apple 🍎") { pickedApples += 1 } } }
14. class FruitBasketViewModel: ObservableObject { @Published var pickedApples = 0 func pickAnApple() { pickedApples += 1 } } @StateObject var fruitBasketViewModel = FruitBasketViewModel()
15. class FruitBasketViewModel: ObservableObject { //@ObservedObject var fruitBasketViewModels: FruitBasketViewModel var body: some View { VStack(spacing: 30) { Text("🍎 : \(fruitBasketViewModel.pickedApples)") Button("Pick an apple", action: fruitBasketViewModel.pickAnApple) } }
16. @EnvironmentObject var fruitBasketViewModel: FruitBasketViewModel var body: some View { VStack(spacing: 30) { Text("🍎 : \(fruitBasketViewModel.pickedApples)") Button("Pick an apple", action: fruitBasketViewModel.pickAnApple) } } FruitBasketWithEnvironmentObject()
17. @EnvironmentObject var fruitBasketViewModel: FruitBasketViewModel .environmentObject(FruitBasketViewModel())
18. Architecture This won’t be an architecture talk 😅
19. Animations
20. struct ContentView: View { @State private var positionX: CGFloat = 70 @State private var positionY: CGFloat = 70 var body: some View { Image("chuck-norris") .resizable() .scaledToFit() .frame(width: 100) .position(x: positionX, y: positionY) .onTapGesture { withAnimation(.easeInOut(duration: 1.5)) { if positionX == 70, positionY == 70 { positionY = UIScreen.height - 120 positionX = UIScreen.width - 100 } else { positionY = 70 positionX = 70 } } } } }
22. Navigation
23. struct ContentView: View { @State private var navigationIsActive = false var body: some View { NavigationView { VStack { NavigationLink(destination: SecondView(), isActive: $navigationIsActive) { EmptyView() } Button("Navigate") { navigationIsActive = true } } .navigationTitle("First View") } } }
24. struct ContentView: View { @State private var navigationIsActive = false var body: some View { NavigationView { VStack { NavigationLink(destination: SecondView(), isActive: $navigationIsActive) { EmptyView() } Button("Navigate") { navigationIsActive = true } } .navigationTitle("First View") } } }
25. struct ContentView: View { @State private var navigationIsActive = false var body: some View { NavigationView { VStack { NavigationLink(destination: SecondView(), isActive: $navigationIsActive) { EmptyView() } Button("Navigate") { navigationIsActive = true } } .navigationTitle("First View") } } }
26. struct ContentView: View { @State private var navigationIsActive = false var body: some View { NavigationView { VStack { NavigationLink(destination: SecondView(), isActive: $navigationIsActive) { EmptyView() } Button("Navigate") { navigationIsActive = true } } .navigationTitle("First View") } } }
27. enum NavigationViews: Hashable { case second case third } struct TagNavigationView: View { @State private var navigationToView: NavigationViews? var body: some View { NavigationView { VStack(spacing: 20) { NavigationLink(destination: SecondView(), tag: .second, selection: $navigationToView) { EmptyView() } NavigationLink(destination: ThirdView(), tag: .third, selection: $navigationToView) { EmptyView() } Button("Navigate to Second View") { navigationToView = .second } Button("Navigate to Third View") { navigationToView = .third } } } .navigationTitle("First View") } }
28. enum NavigationViews: Hashable { case second case third } struct TagNavigationView: View { @State private var navigationToView: NavigationViews? var body: some View { NavigationView { VStack(spacing: 20) { NavigationLink(destination: SecondView(), tag: .second, selection: $navigationToView) { EmptyView() } NavigationLink(destination: ThirdView(), tag: .third, selection: $navigationToView) { EmptyView() } Button("Navigate to Second View") { navigationToView = .second } Button("Navigate to Third View") { navigationToView = .third } } } .navigationTitle("First View") } }
29. enum NavigationViews: Hashable { case second case third } struct TagNavigationView: View { @State private var navigationToView: NavigationViews? var body: some View { NavigationView { VStack(spacing: 20) { NavigationLink(destination: SecondView(), tag: .second, selection: $navigationToView) { EmptyView() } NavigationLink(destination: ThirdView(), tag: .third, selection: $navigationToView) { EmptyView() } Button("Navigate to Second View") { navigationToView = .second } Button("Navigate to Third View") { navigationToView = .third } } } .navigationTitle("First View") } }
30. enum NavigationViews: Hashable { case second case third } struct TagNavigationView: View { @State private var navigationToView: NavigationViews? var body: some View { NavigationView { VStack(spacing: 20) { NavigationLink(destination: SecondView(), tag: .second, selection: $navigationToView) { EmptyView() } NavigationLink(destination: ThirdView(), tag: .third, selection: $navigationToView) { EmptyView() } Button("Navigate to Second View") { navigationToView = .second } Button("Navigate to Third View") { navigationToView = .third } } } .navigationTitle("First View") } }
31. Modal Views - popups Sheets Shows when state changes Passing data back - need to use @Binding
32. struct ShowSheetView: View { @State private var showSheet = false var body: some View { Button("Show Sheet") { showSheet = true } .sheet(isPresented: $showSheet) { Text("Sheet Content") } } }
33. enum Sheet: Identifiable { case info case settings var id: Int { hashValue } }
34. extension Sheet { @ViewBuilder func modalView(with binding: Binding<Sheet?>) -> some View { switch self { case .info: InfoView(activeSheet: binding) case .settings: SettingsView(activeSheet: binding) } } }
35. struct ContentView: View { @State var activeSheet: Sheet? var body: some View { VStack(spacing: 50) { Text("Main View") .font(.largeTitle) Button(action: { activeSheet = .info }, label: { Label("Show Info View", systemImage: "info.circle") }) Button(action: { activeSheet = .settings }, label: { Label("Show Settings View", systemImage: "gear") }) } .sheet(item: $activeSheet) { $0.modalView(with: $activeSheet) } } }
36. struct ContentView: View { @State private var showSheet = false @State private var counter = 0 var body: some View { VStack { Text(counter.description) Button("Show Sheet") { showSheet = true } } .sheet(isPresented: $showSheet) { UpdateCounterView(counter: $counter) } } }
37. struct ContentView: View { @State private var showSheet = false @State private var counter = 0 var body: some View { VStack { Text(counter.description) Button("Show Sheet") { showSheet = true } } .sheet(isPresented: $showSheet) { UpdateCounterView(counter: $counter) } } }
38. struct ContentView: View { @State private var showSheet = false @State private var counter = 0 var body: some View { VStack { Text(counter.description) Button("Show Sheet") { showSheet = true } } .sheet(isPresented: $showSheet) { UpdateCounterView(counter: $counter) } } }
39. struct UpdateCounterView: View { @Environment(\.presentationMode) var presentationMode @Binding var counter: Int var body: some View { NavigationView { VStack { Text(counter.description) Button("Increase counter") { counter += 1 } } .toolbar { ToolbarItem(placement: .navigationBarTrailing) { Button("Close") { presentationMode.wrappedValue.dismiss() } } } } } }
40. struct UpdateCounterView: View { @Environment(\.presentationMode) var presentationMode @Binding var counter: Int var body: some View { NavigationView { VStack { Text(counter.description) Button("Increase counter") { counter += 1 } } .toolbar { ToolbarItem(placement: .navigationBarTrailing) { Button("Close") { presentationMode.wrappedValue.dismiss() } } } } } }
41. struct UpdateCounterView: View { @Environment(\.presentationMode) var presentationMode @Binding var counter: Int var body: some View { NavigationView { VStack { Text(counter.description) Button("Increase counter") { counter += 1 } } .toolbar { ToolbarItem(placement: .navigationBarTrailing) { Button("Close") { presentationMode.wrappedValue.dismiss() } } } } } }
42. TabBar
43. Form
44. struct ContentView: View { @State var name = "" @State var selectedDate = Date() @State var subscribeToNews = false var body: some View { Form { Section(header: Text("Personal info")) { TextField("Name", text: $name) DatePicker("When is your birthday?", selection: $selectedDate, displayedComponents: .date) } Toggle(isOn: $subscribeToNews) { Text("Subscribe to news") } } } }
47. Localization
49. let name = "Uwe" var body: some View { Text("Hello, \(name)!") } "Hello, %@!" = "Hallo, %@!";
50. private let itemsCount = 5 var body: some View { Text("\(itemsCount) items") .font(.largeTitle) } "%lld items" = "%lld Artikel";
51. Custom Views
52. struct CustomButtonModifier: ViewModifier { func body(content: Content) -> some View { content .font(.title) .foregroundColor(.white) .padding() .background(Color.blue) .clipShape(RoundedRectangle(cornerRadius: 20)) } } extension View { func customButton() -> some View { modifier(CustomButtonModifier()) } } Button("Continue", action: {})
53. struct CustomButtonModifier: ViewModifier { .customButton()
54. struct CustomButtonView: View { var title: LocalizedStringKey var body: some View { Text(title) .font(.title) .foregroundColor(.white) .padding() .background(Color.blue) .clipShape(RoundedRectangle(cornerRadius: 20)) } }
55. struct CusttomButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .font(.title) .foregroundColor(.white) .padding() .background(Color.blue) .clipShape(RoundedRectangle(cornerRadius: 20)) } } Button("Continue", action: {})
56. struct CusttomButtonStyle: ButtonStyle { .buttonStyle(CusttomButtonStyle())
57. UIKit
58. let presentingViewController = UIApplication.shared.windows.first?.rootViewController
59. How do deal with passing data around? Initializer @Binding or a callback @EnvironmentObject
60. View modi fi ers
61. What did I learn?
62. - Moves very fast UIKit can be a saviour Hard to do something out of bounds Navigation is very tricky
63. + Very fast to prototype ideas Need to shift the mindset Comes with many niceties Developers like shiny new stu ff :)
64. SwiftUI app gotchas Prototype in minutes Hard to integrate 3rd party libs Even Apple don’t support their own things
65. Is SwiftUI production ready?
66. – John Sundell and Gui Rambo “It Depends.”
67. Is SwiftUI production ready? If you can stick with latest iOS If need to go back to UIKit it can be a lot of hassle I would start a new project with SwifUI
68. fassko www.kristaps.me