Felipe Espinoza. 08/04/2025 SwiftUI at SATS Lessons from our app evolution with SwiftUI 

2021 2025 

Using SwiftUI since 2020 

Users in the nordic countries per month ~550000 

No content

🇳🇴 🇸🇪 🇩🇰 🇫🇮 4 countries 2 Brands 

iPhone 􀟜 􀟠 iPad 􀟤 Apple Watch Available on 🇳🇴 🇸🇪 🇩🇰 🇫🇮 4 countries 2 Brands 

iPhone 􀟜 􀟠 iPad 􀟤 Apple Watch Available on 🇳🇴 🇸🇪 🇩🇰 🇫🇮 4 countries 2 Brands 

No content

Android 

iOS 

PM 

Design 

Backend 

Android iOS PM Backend Design 

Android iOS PM Backend Design 

whoami 🇨🇱🇳🇴 7 years developing for apple platforms Tech lead for the iOS app at SATS Youtuber 

No content

No content

No content

Learnings from the evolution of the SATS app with SwiftUI 

JSON app 

No content

Agenda Snapshot Testing Basic Architecture SPM modularization 

Agenda Snapshot Testing Basic Architecture SPM modularization 

No content

import Foundation import SATSSnapshots import SwiftUI import Testing import SATSCore @testable import Booking @MainActor struct BookingLandingViewTests { @Test( "Danish New Member with no GX, only PT trial", arguments: SnapshotVariant.fixedHeightVariants( height: 900, navigationTitle: "Danish New Member with no GX, only PT trial", backgroundColor: .backgroundSecondaryDefault ) ) func danishNewMemberNoGxOnlyPt(_ variant: SnapshotVariant) async throws { let view = BookingLandingView(viewData: .sampleDanishNewMemberWithoutGxOnlyPtTrial()) expectSnapshot(of: view, on: variant) } } 

No content

How it helps? We can test UI in multiple settings easily 

Device iPhone, iPad (+ Model) Locale En, Nb, … Dynamic Type Large, Extra Large, … Region Norway, Chile, … Interface Style Light, Dark Orientation Portrait, Landscape, … Split screen Full screen, half screen, … Device Con fi guration View states Loading Error Empty Content Normal Content Content Situation #1 Content Situation #2 Content Situation #3 

Combination Count 

How it helps? We can test UI in multiple settings easily Alerts unintentional changes in the UI, useful with design systems We can register and see the full content of scrollable content 

import Foundation import SATSSnapshots import SwiftUI import Testing import SATSCore @testable import Booking @MainActor struct BookingLandingViewTests { @Test( "Danish New Member with no GX, only PT trial", arguments: SnapshotVariant.fixedHeightVariants( height: 900, navigationTitle: "Danish New Member with no GX, only PT trial", backgroundColor: .backgroundSecondaryDefault ) ) func danishNewMemberNoGxOnlyPt(_ variant: SnapshotVariant) async throws { let view = BookingLandingView(viewData: .sampleDanishNewMemberWithoutGxOnlyPtTrial()) expectSnapshot(of: view, on: variant) } } 

No content

No content

No content

No content

How to maintain consistent results between tests runs? what about CI? 

New booking landing page Multiple di ff erent modules Which modules appear depend on user, the same as the content of said modules Polymorphic data structures "Smartness" part of the backend, the clients just render that JSON 

New booking landing page Multiple di ff erent modules Which modules appear depend on user, the same as the content of said modules Polymorphic data structures "Smartness" part of the backend, the clients just render that JSON 

"type": "Recommendations", "content": { "title": "What are you looking for?", "tabs": [ { "name": "For you", "items": [ { "type": "GroupExerciseClass", "content": { "id": "1234", "durationInMinutes": 45, "startTime": { "dateTime": "2025-08-21T00:00:00+00:00", "timeZone": "Europe/Oslo" }, "club": { "id": "1234566", "name": "Nydalen", "fullName": "SATS Nydalen" }, "instructorName": "Sandshrew", "classType": { "id": "123", "name": "Indoor Running", "description": "This is a class where you box things", "imageUrl": "https://images.ctfassets.net/bton54gi9dnn/1RLKjJn5thgmg6Jri7Orvn/09962b5059f4c218d23a9f2b51378eb0/Yoga_General.jpg? "fitnessScore": [ { "name": "Strength", "score": 1 } ] }, "bookingInfo": { "capacity": 10, "bookedCount": 15, "waitingListCount": 5, "bookingState": { "type": "BookedOnWaitingList", "content": { "waitingListPosition": 3, "participationProbability": "Low" } 

"id": "123", "name": "Indoor Running", "description": "This is a class where you box things", "imageUrl": "https://images.ctfassets.net/bton54gi9dnn/1RLKjJn5thgmg6Jri7Orvn/09962b5059f4c218d23a9f2b51378eb0/Yoga_General.jpg? "fitnessScore": [ { "name": "Strength", "score": 1 } ] }, "bookingInfo": { "capacity": 10, "bookedCount": 15, "waitingListCount": 5, "bookingState": { "type": "BookedOnWaitingList", "content": { "waitingListPosition": 3, "participationProbability": "Low" } } }, "friendBookings": [ { "member": { "id": "1234", "firstName": "Cezinando", "lastName": "Scicily", "imageUrl": "https://picsum.photos/512" }, "bookingState": { "type": "BookedOnWaitingList", "content": { "waitingListPosition": 3, "participationProbability": "Low" } } } ] } }, 

Simple Data tailored for the view ViewData 

No content

struct RecommendationGxCardViewData: Identifiable { let id: GX.GroupExerciseID let name: String let startTime: String let clubName: String let durationInMinutes: String let image: ImageViewData? let friendsJoining: FriendJoiningViewData? let tag: TagViewData? let destination: Destination } 

struct RecommendationGxCardViewData: Identifiable { let id: GX.GroupExerciseID let name: String let startTime: String let clubName: String let durationInMinutes: String let image: ImageViewData? let friendsJoining: FriendJoiningViewData? let tag: TagViewData? let destination: Destination } public enum ImageViewData: Equatable { case empty case remote(url: URL) case image(_ image: Image) } 

extension RecommendationGxCardViewData { static func previewValue( name: String = "Indoor Running", startTime: String = "Tomorrow 08:00", clubName: String = "Nydalen", durationInMinutes: String = "45 min", image: ImageViewData? = .image(Image("gxClass1", bundle: .module)), friendsJoining: FriendJoiningViewData? = .previewValue(), tag: TagViewData? = nil ) -> Self { .init( id: .randomPreviewId(), name: name, startTime: startTime, clubName: clubName, durationInMinutes: durationInMinutes, image: image, friendsJoining: friendsJoining, tag: tag, destination: .booking ) } } 

Making UI easy to test, makes it easy to preview 

Then it will be tested in more configurations 

No content

import Foundation import SATSSnapshots import SwiftUI import Testing import SATSCore @testable import Booking @MainActor struct BookingLandingViewTests { @Test( "Landing page with all components", arguments: SnapshotVariant.fixedHeightVariants( height: 2400, navigationTitle: "Booking", backgroundColor: .backgroundSecondaryDefault ) ) func landingPageWithAllComponents(_ variant: SnapshotVariant) { let view = BookingLandingView(viewData: .previewValue()) expectSnapshot(of: view, on: variant) } } 

import Foundation import SATSSnapshots import SwiftUI import Testing import SATSCore @testable import Booking @MainActor struct BookingLandingViewTests { @Test( "Landing page with all components", arguments: SnapshotVariant.fixedHeightVariants( height: 2400, navigationTitle: "Booking", backgroundColor: .backgroundSecondaryDefault ) ) func landingPageWithAllComponents(_ variant: SnapshotVariant) { let view = BookingLandingView(viewData: .previewValue()) expectSnapshot(of: view, on: variant) } } 

Agenda Snapshot Testing Basic Architecture SPM modularization 

Data Loading States Idle Loading Data Loaded Error Input Same fl ow for load of any kind of data The request fi res Received data Encountered an error Reloading Retry 

When the data is loaded… DTO ViewData Map to Highly testable function 

FeatureScreen FeatureView Basic Architecture #0 FeatureViewData ActionsProtocol Stateful Stateless 

FeatureScreen FeatureView Basic Architecture #1 FeatureViewModel FeatureViewData ActionsProtocol Handles Networking Business Logic Orchestrate Render 

Basic Architecture #1 FeatureScreen FeatureView FeatureViewModel FeatureViewData ActionsProtocol Unidirectional data fl ow Split between stateful and stateless views Mutations will trigger a new view data value that will update the view We don’t use this pattern when it doesn’t fi t the problem 

Agenda Snapshot Testing Basic Architecture SPM modularization 

Modularizing with SPM packages We use local packages, then we don’t pay integration costs Help code reuse across targets Faster compilation/iteration Explicit boundaries in code, less global sharing 

No content

Base Infrastructure Features Targets • Models • Design Constants • Tracking Events • Networking • Design System • Navigation • Booking • Friends • Member Pro fi le • iOS • watchOS • Widgets Low High Complexity 

Base Infrastructure Features Targets • Models • Design Constants • Tracking Events • Networking • Design System • Navigation • Booking • Friends • Member Pro fi le • iOS • watchOS • Widgets Extracted from Figma Need dependency injection 

Base Infrastructure Features Targets • Models • Design Constants • Tracking Events • Networking • Design System • Navigation • Booking • Friends • Member Pro fi le • iOS • watchOS • Widgets 

Each package has* * Or can have Assets 􀏅 Localizations 􀆪 Tests 􁁛 Docs 􀦋 

Conclusion SwiftUI is excellent to render content and make multiple components Snapshot testing drives you to build better UI SwiftUI is quite fl exible when it comes to the choice of architecture Dividing code in SPM packages has multiple bene fi ts 

Building UI that is easy to Preview and Test with SwiftUI 17:30 Advanced Navigation for SwiftUI apps 12:24 Snapshot testing for iOS apps in Xcode Cloud 14:00 Recommended videos More details related to this talk 

THANKS!