Tweet
Tweet

Slide 1

Slide 1 text

How to use SwiftUI for rapid development fassko www.kristaps.me

Slide 2

Slide 2 text

rapid adjective moving or acting with great speed; swift

Slide 3

Slide 3 text

About me 17+ years of experience Founder & Swift developer Open source

Slide 4

Slide 4 text

swiftweeklybrief.com

Slide 5

Slide 5 text

Rapid = fast

Slide 6

Slide 6 text

Create app in one month

Slide 7

Slide 7 text

Intro to SwiftUI Rapid development techniques What did I learn? The Plan

Slide 8

Slide 8 text

SwiftUI

Slide 9

Slide 9 text

Create a new SwiftUI project No AppDelegate Everything starts in App struct No SceneDelegate

Slide 10

Slide 10 text

class AppDelegate: NSObject, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool { /// } }

Slide 11

Slide 11 text

@main struct SwiftUIApp: App { @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate var body: some Scene { WindowGroup { ContentView() } } }

Slide 12

Slide 12 text

State

Slide 13

Slide 13 text

@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 } } }

Slide 14

Slide 14 text

class FruitBasketViewModel: ObservableObject { @Published var pickedApples = 0 func pickAnApple() { pickedApples += 1 } } @StateObject var fruitBasketViewModel = FruitBasketViewModel()

Slide 15

Slide 15 text

class FruitBasketViewModel: ObservableObject { //@ObservedObject var fruitBasketViewModels: FruitBasketViewModel var body: some View { VStack(spacing: 30) { Text("🍎 : \(fruitBasketViewModel.pickedApples)") Button("Pick an apple", action: fruitBasketViewModel.pickAnApple) } }

Slide 16

Slide 16 text

@EnvironmentObject var fruitBasketViewModel: FruitBasketViewModel var body: some View { VStack(spacing: 30) { Text("🍎 : \(fruitBasketViewModel.pickedApples)") Button("Pick an apple", action: fruitBasketViewModel.pickAnApple) } } FruitBasketWithEnvironmentObject()

Slide 17

Slide 17 text

@EnvironmentObject var fruitBasketViewModel: FruitBasketViewModel .environmentObject(FruitBasketViewModel())

Slide 18

Slide 18 text

Architecture This won’t be an architecture talk πŸ˜…

Slide 19

Slide 19 text

Animations

Slide 20

Slide 20 text

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 } } } } }

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Navigation

Slide 23

Slide 23 text

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") } } }

Slide 24

Slide 24 text

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") } } }

Slide 25

Slide 25 text

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") } } }

Slide 26

Slide 26 text

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") } } }

Slide 27

Slide 27 text

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") } }

Slide 28

Slide 28 text

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") } }

Slide 29

Slide 29 text

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") } }

Slide 30

Slide 30 text

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") } }

Slide 31

Slide 31 text

Modal Views - popups Sheets Shows when state changes Passing data back - need to use @Binding

Slide 32

Slide 32 text

struct ShowSheetView: View { @State private var showSheet = false var body: some View { Button("Show Sheet") { showSheet = true } .sheet(isPresented: $showSheet) { Text("Sheet Content") } } }

Slide 33

Slide 33 text

enum Sheet: Identifiable { case info case settings var id: Int { hashValue } }

Slide 34

Slide 34 text

extension Sheet { @ViewBuilder func modalView(with binding: Binding) -> some View { switch self { case .info: InfoView(activeSheet: binding) case .settings: SettingsView(activeSheet: binding) } } }

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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() } } } } } }

Slide 40

Slide 40 text

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() } } } } } }

Slide 41

Slide 41 text

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() } } } } } }

Slide 42

Slide 42 text

TabBar

Slide 43

Slide 43 text

Form

Slide 44

Slide 44 text

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") } } } }

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Localization

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

let name = "Uwe" var body: some View { Text("Hello, \(name)!") } "Hello, %@!" = "Hallo, %@!";

Slide 50

Slide 50 text

private let itemsCount = 5 var body: some View { Text("\(itemsCount) items") .font(.largeTitle) } "%lld items" = "%lld Artikel";

Slide 51

Slide 51 text

Custom Views

Slide 52

Slide 52 text

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: {})

Slide 53

Slide 53 text

struct CustomButtonModifier: ViewModifier { .customButton()

Slide 54

Slide 54 text

struct CustomButtonView: View { var title: LocalizedStringKey var body: some View { Text(title) .font(.title) .foregroundColor(.white) .padding() .background(Color.blue) .clipShape(RoundedRectangle(cornerRadius: 20)) } }

Slide 55

Slide 55 text

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: {})

Slide 56

Slide 56 text

struct CusttomButtonStyle: ButtonStyle { .buttonStyle(CusttomButtonStyle())

Slide 57

Slide 57 text

UIKit

Slide 58

Slide 58 text

let presentingViewController = UIApplication.shared.windows.first?.rootViewController

Slide 59

Slide 59 text

How do deal with passing data around? Initializer @Binding or a callback @EnvironmentObject

Slide 60

Slide 60 text

View modi fi ers

Slide 61

Slide 61 text

What did I learn?

Slide 62

Slide 62 text

- Moves very fast UIKit can be a saviour Hard to do something out of bounds Navigation is very tricky

Slide 63

Slide 63 text

+ Very fast to prototype ideas Need to shift the mindset Comes with many niceties Developers like shiny new stu ff :)

Slide 64

Slide 64 text

SwiftUI app gotchas Prototype in minutes Hard to integrate 3rd party libs Even Apple don’t support their own things

Slide 65

Slide 65 text

Is SwiftUI production ready?

Slide 66

Slide 66 text

– John Sundell and Gui Rambo β€œIt Depends.”

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

fassko www.kristaps.me