Firebase is Google's mobile development platform for Android, iOS, and the web. SwiftUI is Apple's user interface toolkit that lets developers design apps in a declarative way. In this session, we will bring the two together and take a look at how easy it is to develop a new application from scratch. Slides for my talk at CocoaHeads Berlin (https://www.meetup.com/Cocoaheads-Berlin/events/266764473/)

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. Sign in with Apple

37. let authUI = FUIAuth.defaultAuthUI()
authUI.shouldAutoUpgradeAnonymousUsers = true
authUI.providers = [
FUIGoogleAuth(),
FUIOAuth.appleAuthProvider()
]
return authUI.authViewController()
Sign in with Apple

38. Data Flow

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

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

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

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

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

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

45. Demo 3
The Final App, Using Firebase

48. Conclusion

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

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

51. ❤

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