This document discusses building mobile apps rapidly using SwiftUI and Firebase. It provides an overview of SwiftUI and how to add Firebase to a SwiftUI project. It demonstrates fetching and saving data to Firestore using Codable and without Codable. It also covers anonymous authentication and data flow patterns in SwiftUI like @State, @Binding, @ObservedObject and @EnvironmentObject. The document concludes that SwiftUI and Firebase work well together with some gaps that can be filled using UIViewControllerRepresentable.

1. Rapid Application Development
with SwiftUI and Firebase
Peter Friese, Developer Advocate, Google
@peterfriese
🔥

3. Demo 1
Kaffeinated - A coffee tracking app

6. SwiftUI
• A declarative way to build your UI
• Everything is a view
• Every SwiftUI view is a struct
• You build UIs by composing views
• Views are a function of their state
Better state management!

7. struct ContentView: View {
var body: some View {
Text("Hello, World!")
}
}
SwiftUI Views

8. Demo 2
Building a List From Scratch

12. Improve app quality
Crashlytics
Performance
Monitoring
Test Lab
App Distribution
Grow your app
Analytics
Predictions
Cloud
Messaging
Remote
Config
A/B Testing
Dynamic
Links
In-app
Messaging
Build better apps
Auth
Cloud
Functions
Cloud
Firestore
Hosting
ML Kit
Realtime
Database
Cloud
Storage
bit.ly/what-is-firebase

14. Mobile Databases - The Hard Way
Database MongoDB, Postgres, MySQL, etc
API Server REST API on top of database
Auth Service Protects the API server
Sync Logic REST API calls, caches, etc
SQLite Store data offline

15. Cross-platform?
You're going to have to write the
same code multiple times!

16. App DatabaseServer

18. One-Time FetchesOffline ModeEffortless Syncing

19. Document
bird_type:
airspeed:
coconut_capacity:
isNative:
icon:
vector:
distances_traveled:
"swallow"
42.733
0.62
false
<binary data>
{x: 36.4255,
y: 25.1442,
z: 18.8816
[42, 39, 12,
42]

20. Collection

21. collection("restaurants").
where("city", " ==", "Cairo").
orderBy(“rating”, "desc").limit(10)
Here ya go!

22. Add Firebase to Your iOS Project
1. Create a new Firebase project
2. Register your iOS app
3. Download configuration file
4. Install the Firebase Cocoapod
5. Call FirebaseApp.configure()

23. Kaffeinated Data Model

24. Fetching Data from Firestore

25. db.collection("coffees").addSnapshotListener { (querySnapshot, error) in
var coffees = [Coffee]()
querySnapshot ?.documents.forEach { document in
let coffeeName = document.data()["name"] as? String ?? ""
let shortDescription = document.data()["shortDescription"] as? String ?? ""
let description = document.data()["description"] as? String ?? ""
let caffeineAmount = document.data()["caffeineAmount"] as? Int ?? 0
let coffee = Coffee(name: coffeeName,
shortDescription: shortDescription,
description: description,
caffeineAmount: caffeineAmount)
coffees.append(coffee)
}
self.coffees = coffees
}
Fetching Data from Firestore

27. Firestore & Codable
• One of our most-requested and
longest-running feature requests
• Released on October 22nd, 2019
• Makes fetching and writing much
easier

28. db.collection("coffees").addSnapshotListener { (querySnapshot, error) in
var coffees = [Coffee]()
querySnapshot ?.documents.forEach { document in
let coffeeName = document.data()["name"] as? String ?? ""
let shortDescription = document.data()["shortDescription"] as? String ?? ""
let description = document.data()["description"] as? String ?? ""
let caffeineAmount = document.data()["caffeineAmount"] as? Int ?? 0
let coffee = Coffee(name: coffeeName,
shortDescription: shortDescription,
description: description,
caffeineAmount: caffeineAmount)
coffees.append(coffee)
}
self.coffees = coffees
}
Fetching Data - w/o Codable

29. // Model
struct Coffee: Codable, Identifiable {
@DocumentID var id: String?
var name: String
var shortDescription: String
var description: String
}
// Elsewhere, fetch our data:
db.collection("coffees").addSnapshotListener { (querySnapshot, error) in
if let querySnapshot = querySnapshot {
self.coffees = querySnapshot.documents.compactMap { document -> Coffee? in
try? document.data(as: Coffee.self)
}
}
}
Fetching Data - w/ Codable

30. Saving Data to Firestore

31. let db = Firestore.firestore()
do {
_ = try db.collection(“users/(user.uid)/consumption/")
.addDocument(from: consumption)
}
catch {
print(“Error: (error.localizedDescription).")
}
Saving Data to Firestore

32. let db = Firestore.firestore()
do {
_ = try db.collection(“users/(user.uid)/consumption/")
.addDocument(from: consumption)
}
catch {
print(“Error: (error.localizedDescription).")
}
Saving Data to Firestore
We didn’t sign in, so what’s
this kind of magic?

33. Anonymous Auth

34. Auth.auth().signInAnonymously() { (authResult, error) in
guard let user = authResult ?.user else { return }
let isAnonymous = user.isAnonymous // true
let uid = user.uid
}
Anonymous Auth

35. let db = Firestore.firestore()
do {
_ = try db.collection(“users/(user.uid)/consumption/")
.addDocument(from: consumption)
}
catch {
print(“Error: (error.localizedDescription).")
}
Saving Data to Firestore

36. Data Flow

37. Data Flow
• Property
• @State
• @Binding
• @ObservedObject
• @EnvironmentObject
• Sarah Reichelt: SwiftUI Data Flow
(bit.ly/SwiftUIDataFlow)

38. struct BarsView: View {
let bars: [Bar]
let max: Double
init(bars: [Bar]) {
self.bars = bars
self.max = bars.map { $0.value }.max() ?? 0
}
var body: some View {
GeometryReader { geometry in
HStack(alignment: .bottom, spacing: 0) {
ForEach(self.bars) { bar in
Rectangle()
.fill(bar.color)
.frame(width: 10,
height: CGFloat(bar.value) /
CGFloat(self.max) * geometry.size.height)
Data Flow - Property

39. struct MainView: View {
@State var selectedTab = 0
@EnvironmentObject var appState: AppState
var body: some View {
TabView(selection: $selectedTab) {
}
}
}
Data Flow - @State

40. class CoffeeListViewModel: ObservableObject {
@Published var coffees: [Coffee]
}
struct CoffeeListView: View {
@ObservedObject var viewModel: CoffeeListViewModel
var body: some View {
NavigationView {
List(viewModel.coffees) { coffee in
CoffeeCell(coffee: coffee)
}
.navigationBarTitle("Coffees")
}
}
}
Data Flow - @ObservableObject

41. class AppState: ObservableObject {
@Published var coffees = [Coffee]()
@Published var consumptions = [Consumption]()
}
let appState = AppState()
let contentView = MainView()
window.rootViewController =
UIHostingController(rootView: contentView.environmentObject(appState))
struct MainView: View {
@EnvironmentObject var appState: AppState
var body: some View {
HistoryView(viewModel: HistoryViewModel(consumption: appState.consumptions))
.tabItem { Image(systemName: “chart.bar.fill”)) }
}
}
Data Flow - @EnvironmentObject

42. Data Flow for Firebase Apps
MainViewAppState
[Coffee]
[Consumption]
User
...
Environment
CoffeeListView
CoffeeListVM
[Coffee]
Firestore

43. Demo 3
The Final App, Using Firebase

46. Conclusion

47. Conclusion
• Achieve great results in a short amount of time
• Documentation a bit lacking
• Great contributions from the community
• A number of things don’t work (yet)
• Fill the gaps with UIViewControllerRepresentable

48. Conclusion
• Work together well
• No critical issues so far
• Firebase team eager to hear from the community
+

49. ❤

50. Thanks! Peter Friese, Developer Advocate, Google
@peterfriese
https://peterfriese.dev
https://medium.com/@peterfriese
https://medium.com/firebase-developers