Using SwiftUI's declarative syntax, building user interfaces for any of Apple's platforms is fast and exceptionally simple. Firebase makes developing the backend for your app a lot easier by providing BaaS features such as a NoSQL database, a flexible authentication solution, as well as a serverless environment to extend you app with custom backend code. Both SwiftUI and Firebase make developing apps a lot easier, but how do you bring both together? In this talk, I'm going to build a simple, data-driven SwiftUI application that uses Cloud Firestore to store data. You will learn: * How to architect your SwiftUI app so both its local and remote state stay in sync in real time. * How to use Firebase Authentication to give users a great out-of-the-box experience without having to sign in first. * How to implement Sign in with Apple in less than 5 minutes using FirebaseUI!

1. Building SwiftUI Apps with
Firebase
Peter Friese, Developer Advocate, Google
@peterfriese

2. 🎉 JewelCase app demo
🤯 SwiftUI concepts
😅 Live coding: implementing a list in SwiftUI
🚰 Data Flow & Source of Truth
🔥 Firebase & Firestore Overview
🚶 Walk-through: Fetching data in real time from Firestore
Agenda

3. Demo 1
JewelCase - A movie 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. struct ContentView: View {
var body: some View {
Text("Hello, World!")
}
}
SwiftUI Views

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

10. Data Flow & Source of Truth

11. Source of Truth
Data Model

12. Source of Truth
Data ModelUser Interface
?

13. Source of Truth
Data ModelUser Interface
1: update model
2: trigger update
3: redraw UI

14. Data Flow
• Properties
• @State
• @Binding
• @ObservedObject
• @StateObject (✨ new in SwiftUI 2)
• @EnvironmentObject
• Sarah Reichelt: SwiftUI Data Flow
(bit.ly/SwiftUIDataFlow)

15. Unsure which one to use?

16. struct DetailsView: View {
let movie: Movie
var body: some View {
ScrollView(.vertical) {
VStack(alignment: .leading) {
Text(movie.title).font(.title)
Text(movie.description).font(.body)
}
.padding()
}
.edgesIgnoringSafeArea(.all)
.background(Color(UIColor.secondarySystemBackground)
.edgesIgnoringSafeArea(.all))
}
}
Data Flow - Property

17. struct DetailsView: View {
let movie: Movie
var body: some View {
ScrollView(.vertical) {
VStack(alignment: .leading) {
Text(movie.title).font(.title)
Text(movie.description).font(.body)
}
.padding()
}
.edgesIgnoringSafeArea(.all)
.background(Color(UIColor.secondarySystemBackground)
.edgesIgnoringSafeArea(.all))
}
}
Data Flow - Property
Use for data thatdoesn’t change

18. struct GridView: View {
let movies: [Movie]
@State private var selection: Movie? = nil
var body: some View {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(movies) { movie in
if (movie.id "!= selection"?.id) {
CardView(movie: movie)
.onTapGesture { select(movie) }
.matchedGeometryEffect(id: movie.id, in: ns)
}
else {
CardView(movie: movie)
.opacity(0)
}
Data Flow - @State

19. struct GridView: View {
let movies: [Movie]
@State private var selection: Movie? = nil
var body: some View {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(movies) { movie in
if (movie.id "!= selection"?.id) {
CardView(movie: movie)
.onTapGesture { select(movie) }
.matchedGeometryEffect(id: movie.id, in: ns)
}
else {
CardView(movie: movie)
.opacity(0)
}
Data Flow - @State

20. struct GridView: View {
let movies: [Movie]
@State private var selection: Movie? = nil
var body: some View {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(movies) { movie in
if (movie.id "!= selection"?.id) {
CardView(movie: movie)
.onTapGesture { select(movie) }
.matchedGeometryEffect(id: movie.id, in: ns)
}
else {
CardView(movie: movie)
.opacity(0)
}
Data Flow - @State
Use for UI state

21. struct DiscoverMoviesView: View {
@StateObject var viewModel = DiscoverViewModel()
@Environment(.presentationMode) var presentationMode
@EnvironmentObject var movieStore: MovieStore
var body: some View {
NavigationView {
VStack {
SearchBar(text: $viewModel.searchText)
List {
ForEach(viewModel.tmdbMovies) { item in
Data Flow - @StateObject

22. struct DiscoverMoviesView: View {
@StateObject var viewModel = DiscoverViewModel()
@Environment(.presentationMode) var presentationMode
@EnvironmentObject var movieStore: MovieStore
var body: some View {
NavigationView {
VStack {
SearchBar(text: $viewModel.searchText)
List {
ForEach(viewModel.tmdbMovies) { item in
Data Flow - @StateObject
Use for viewmodels

23. struct DiscoverMoviesView: View {
@EnvironmentObject var movieStore: MovieStore
func addMovie(movie: TMDBMovie) {
print("Adding (movie.title)")
let newMovie = Movie(from: movie)
movieStore.addMovie(newMovie)
dismiss()
}
}
Data Flow - @EnvironmentObject

24. struct DiscoverMoviesView: View {
@EnvironmentObject var movieStore: MovieStore
func addMovie(movie: TMDBMovie) {
print("Adding (movie.title)")
let newMovie = Movie(from: movie)
movieStore.addMovie(newMovie)
dismiss()
}
}
Data Flow - @EnvironmentObject
Use for passingstuff down

25. Demo 2
Building a List From Scratch

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

32. One-Time FetchesOffline ModeEffortless Syncing

33. 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]

34. Collection

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

36. Setting up Firebase for SwiftUI 2

37. import SwiftUI
import Firebase
@main
struct JewelCaseApp: App {
@StateObject var movieStore = MovieStore()
init() {
FirebaseApp.configure()
}
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(movieStore)
}
}
}
Setting up Firebase for SwiftUI 2
😱 No more
AppDelegate

38. import SwiftUI
import Firebase
@main
struct JewelCaseApp: App {
@StateObject var movieStore = MovieStore()
init() {
FirebaseApp.configure()
}
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(movieStore)
}
}
}
Setting up Firebase for SwiftUI 2
Let’s use theinitialiser

39. import SwiftUI
import Firebase
@main
struct JewelCaseApp: App {
@StateObject var movieStore = MovieStore()
init() {
FirebaseApp.configure()
}
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(movieStore)
}
}
}
Setting up Firebase for SwiftUI 2

40. Fetching Data from Firestore

41. // Model
struct Movie: Codable, Identifiable {
@DocumentID var id: String?
var title: String
var releaseDate: Date
var rating: Double
}
// Elsewhere, fetch our data:
db.collection("movies").addSnapshotListener { (querySnapshot, error) in
guard let documents = querySnapshot"?.documents else { return }
self.movies = documents.compactMap { queryDocumentSnapshot in
try? queryDocumentSnapshot.data(as: Movie.self)
}
}
Fetching Data from Firestore

42. // Model
struct Movie: Codable, Identifiable {
@DocumentID var id: String?
var title: String
var releaseDate: Date
var rating: Double
}
// Elsewhere, fetch our data:
db.collection("movies").addSnapshotListener { (querySnapshot, error) in
guard let documents = querySnapshot"?.documents else { return }
self.movies = documents.compactMap { queryDocumentSnapshot in
try? queryDocumentSnapshot.data(as: Movie.self)
}
}
Fetching Data from Firestore

43. // Model
struct Movie: Codable, Identifiable {
@DocumentID var id: String?
var title: String
var releaseDate: Date
var rating: Double
}
// Elsewhere, fetch our data:
db.collection("movies").addSnapshotListener { (querySnapshot, error) in
guard let documents = querySnapshot"?.documents else { return }
self.movies = documents.compactMap { queryDocumentSnapshot in
try? queryDocumentSnapshot.data(as: Movie.self)
}
}
Fetching Data from Firestore

44. // Model
struct Movie: Codable, Identifiable {
@DocumentID var id: String?
var title: String
var releaseDate: Date
var rating: Double
}
// Elsewhere, fetch our data:
db.collection("movies").addSnapshotListener { (querySnapshot, error) in
guard let documents = querySnapshot"?.documents else { return }
self.movies = documents.compactMap { queryDocumentSnapshot in
try? queryDocumentSnapshot.data(as: Movie.self)
}
}
Fetching Data from Firestore

45. // Model
struct Movie: Codable, Identifiable {
@DocumentID var id: String?
var title: String
var releaseDate: Date
var rating: Double
}
// Elsewhere, fetch our data:
db.collection("movies").addSnapshotListener { (querySnapshot, error) in
guard let documents = querySnapshot"?.documents else { return }
self.movies = documents.compactMap { queryDocumentSnapshot in
try? queryDocumentSnapshot.data(as: Movie.self)
}
}
Fetching Data from Firestore

46. // Model
struct Movie: Codable, Identifiable {
@DocumentID var id: String?
var title: String
var releaseDate: Date
var rating: Double
}
// Elsewhere, fetch our data:
db.collection("movies").addSnapshotListener { (querySnapshot, error) in
guard let documents = querySnapshot"?.documents else { return }
self.movies = documents.compactMap { queryDocumentSnapshot in
try? queryDocumentSnapshot.data(as: Movie.self)
}
}
Fetching Data from Firestore

47. Saving Data to Firestore

48. let db = Firestore.firestore()
do {
_ = try db.collection(“movies")
.addDocument(from: movie)
}
catch {
print(“Error: (error.localizedDescription).")
}
Saving Data to Firestore

49. let db = Firestore.firestore()
do {
_ = try db.collection(“movies")
.addDocument(from: movie)
}
catch {
print(“Error: (error.localizedDescription).")
}
Saving Data to Firestore

50. ❤

51. Thanks! Peter Friese, Developer Advocate, Google
@peterfriese
https://peterfriese.dev
https://medium.com/@peterfriese
https://github.com/@peterfriese
https://medium.com/firebase-developers
https://stackoverflow.com/questions/tagged/swiftui+firebase
https://github.com/firebase/firebase-ios-sdk

52. The End.