Max Humber's #swift Posts

Updating Sankey

Wed, 04 Dec 2024 00:00:00 -0000

Just released Sankey 2.0, an open-source package for building Sankey diagrams in SwiftUI.

What?

A Sankey diagram visualizes flow: where stuff is coming from, where it's going, and how much stuff is moving. Thick and thin bands represent the volume of flow. Sankey diagrams are perfect for showing money, user behavior, energy usage—basically anything involving inputs, outputs, and the in-between.

Why + What's New?

I originally built Sankey 1.0 in May 2022 for a contract project (no other options existed at the time). Then I forgot about it—until a couple of weeks ago when I needed a Sankey diagram for a new app.

This new project requires offline rendering and Dark Mode support. So, while adding these features to Sankey, I also streamlined the API to make it dead simple to create beautiful charts like this:

With code that is a simple as this:

import Sankey
import SwiftUI

struct ContentView: View {
    let data = SankeyData(
        nodes: [
            SankeyNode("A", color: .blue),
            SankeyNode("B", color: .purple),
            SankeyNode("X", color: .red),
            SankeyNode("Y", color: .yellow),
            SankeyNode("Z", color: .green),
        ],
        links: [
            SankeyLink(5, from: "A", to: "X"),
            SankeyLink(7, from: "A", to: "Y"),
            SankeyLink(6, from: "A", to: "Z"),
            SankeyLink(2, from: "B", to: "X"),
            SankeyLink(9, from: "B", to: "Y"),
            SankeyLink(4, from: "B", to: "Z"),
        ]
    )

    var body: some View {
        SankeyDiagram(data)
            .nodeOpacity(0.9)
            .linkColorMode(.gradient)
            .padding(10)
            .frame(height: 350)
    }
}

#Preview {
    ContentView()
}

All "Old" Code is "Bad" Code

Revisiting old code is always a fun (and humbling) exercise. Because the code in 1.0 was bad! (If you're not embarrassed by your past work, are you even learning?)

While the core feature of Sankey—connecting source nodes to target nodes— remains 90% of the code in 2.0 is new. Mostly, this is a consequence of replacing the Google Charts rendering engine with D3.js. But also because I removed a lot of the over-engineered "organization", limited excessive configuration options, and fixed a lot of color handling mistakes.

Despite these major changes, I was able to maintain a good bit of backwards compatibility (the original Quickstart still works)!

Too Much Structure!

The Sankey package should be simple. It's just a SankeyDiagram SwiftUI component. And a few other structs that help in its construction. In 1.0, I went overboard trying to organize everything for "future extensibility", creating this convoluted mess:

--Package.swift
--Sources
----Sankey/
------Options/
--------Tooltip/
----------TextStyle/
------------SankeyOptions.Tooltip.TextStyle.swift
----------SankeyOptions.Tooltip.swift
--------Sankey/
----------SankeyOptions.Sankey.swift
----------Link/
------------Color/
--------------SankeyOptions.Sankey.Link.Color.swift
------------SankeyOptions.Sankey.Link.swift
------------ColorMode/
--------------SankeyOptions.Sankey.Link.ColorMode.swift
----------Node/
------------Label/
--------------SankeyOptions.Sankey.Node.Label.swift
------------ColorMode/
--------------SankeyOptions.Sankey.Node.ColorMode.swift
------------SankeyOptions.Sankey.Node.swift
--------SankeyOptions.swift
--------SankeyOptions+CustomStringConvertible.swift
--------SankeyOptions+init.swift
------Diagram/
--------SankeyDiagram.swift
--------SankeyDiagram+init.swift
------Link/
--------SankeyLink.swift
--------SankeyLink+ExpressibleByArrayLiteral.swift
--------SankeyLink+CustomStringConvertible.swift
------Node/
--------SankeyNode.swift

Now that we're in "the future" I can say that all this "organization" wasn't just unhelpful—it actively hindered my ability add to and update the package! For 2.0, I streamlined as much as possible:

--Package.swift
--Sources/
----Deprecated/
------SankeyDiagram+deprecated.swift
------SankeyLink+deprecated.swift
----Helpers/
------Color+.swift
------HexColor.swift
----Resources/
------d3.min.js
------d3-sankey.min.js
----SankeyData.swift
----SankeyDiagram.swift
----SankeyLink.swift
----SankeyNode.swift
----SankeyOptions.swift
----SankeyResources.swift

Easier to work with. But more importantly, easier to delete! Because, let's be honest—future me will probably throw it all out in another two years!

"WWAD"

While the original "structure" slowed me down, exposing too many configuration options to users was an even bigger mistake. Look at this old init signature:

SankeyDiagram(
    _ data: [SankeyLink],
    nodeColors: [String]? = nil,
    nodeColorMode: SankeyOptions.Sankey.Node.ColorMode = .unique,
    nodeWidth: Double? = nil,
    nodePadding: Double? = nil,
    nodeLabelColor: String = "black",
    nodeLabelFontSize: Double = 24,
    nodeLabelFontName: String? = nil,
    nodeLabelBold: Bool = false,
    nodeLabelItalic: Bool = false,
    nodeLabelPadding: Double? = nil,
    nodeInteractivity: Bool = false,
    linkColors: [String]? = nil,
    linkColorMode: SankeyOptions.Sankey.Link.ColorMode? = nil,
    linkColorFill: String? = nil,
    linkColorFillOpacity: Double? = nil,
    linkColorStroke: String? = nil,
    linkColorStrokeWidth: Double = 0,
    tooltipValueLabel: String = "",
    tooltipTextColor: String = "black",
    tooltipTextFontSize: Double = 24,
    tooltipTextFontName: String? = nil,
    tooltipTextBold: Bool = false,
    tooltipTextItalic: Bool = false,
    layoutIterations: Int = 32
)

Can you tell I was just blindly trying to recreating someone else's API?

Now when I build for SwiftUI I typically ask myself: "What Would Apple Do?" (WWAD). If this piece of code were native Apple component, what would it look and feel like? I must say, I think I nailed it in 2.0:

SankeyDiagram(data)
    .nodeAlignment(.justify)
    .nodeWidth(15)
    .nodePadding(20)
    .nodeDefaultColor(.gray)
    .nodeOpacity(0.8)
    .linkDefaultColor(.gray)
    .linkOpacity(0.7)
    .linkColorMode(nil)
    .labelPadding(8)
    .labelColor(.primary)
    .labelOpacity(0.9)
    .labelFontSize(14)
    .labelFontFamily("Times")

All customization options are now exposed as "Modifiers" on the SankeyDiagram object itself. This is enabled by hiding the SankeyOptions struct from the user and exposing modifiers that look like this:

// ...
public func nodeOpacity(_ value: Double) -> SankeyDiagram {
    var new = self
    new.options.nodeOpacity = value
    return new
}
// ...

I also replaced all externally facing hex codes with native SwiftUI colors. While implementing this was complex, I thought it was better to handle the complexity myself than burden users with it. Now Dark Mode and using a "color" like Color.primary will just work!

Conclusion

The code in Sankey 2.0 is easier to read, use, and built to be thrown away! While it's not perfect—future me will probably laugh at it in the future—it works well today. And that's all that matters. If you need to visualize flows in any of your apps I hope you give it a try!

The Case Against TCA

Wed, 27 Nov 2024 00:00:00 -0000

The Composable Architecture (TCA) is an iOS app development framework that promises "better state management", "modular design", and "testable side effects". After doing some consulting with a startup looking to adopt the framework, I can confidently say: TCA creates more problems than it solves.

Pain.

TCA is packed with unnecessary complexity, redundant abstractions, and frustrating quirks. The startup I worked with ultimately abandoned the framework for the following reasons:

Steep Learning Curve: Requires mastering "reducers" and "stores" making onboarding difficult.
Excessive Boilerplate: Even simple features require excessive code, slowing development.
Performance Problems: Slow builds, indexing, and crashing Xcode previews waste time.
Compiler Issues: Reducers often break the compiler with hard-to-diagnose errors.
Maintenance Burden: Frequent updates break code and demand costly refactoring.
Hard to Remove: Hard to rip out once adopted.
Third-Party Risk: Maintained by essentially two people with no long-term guarantee.
Outpaced by SwiftUI: SwiftUI now handles most problems TCA was built to solve.

I contend that the only good idea in TCA is the DependencyClient pattern. But you don't actually need TCA to implement the pattern, you can do it with just a few lines of swift (see my post on the Client Pattern).

Obnoxious Dependencies

Importing TCA brings in 16 additional dependencies, most of which are other Point-Free libraries. While these libraries might have the swift- prefix, only swift-collections and swift-syntax are actually from Apple:

swift-composable-architecture 1.16.1
  ├── combine-schedulers 1.0.2
  ├── swift-case-paths 1.5.5
  ├── swift-clocks 1.0.5
  ├── swift-collections 1.1.3
  ├── swift-concurrency-extras 1.2.0
  ├── swift-custom-dump 1.3.3
  ├── swift-dependencies 1.4.0
  ├── swift-identified-collections 1.1.0
  ├── swift-macro-testing 0.5.2
  ├── swift-navigation 2.2.2
  ├── swift-perception 1.3.5
  ├── swift-snapshot-testing 1.17.5
  ├── swift-syntax 600.0.0-prerelease-2024-09-04
  ├── SwiftDocCPlugin 1.4.3
  ├── SymbolKit 1.0.0
  └── xctest-dynamic-overlay 1.4.0

This level of bloat is overkill for what TCA claims to solve, and the naming convention (swift-navigation instead of point-free-navigation) feels super obnoxious and deliberately disingenuous.

Online Sentiment

Looking through reddit (and elsewhere online) it seems that my frustrations are widely shared:

Reddit: Have you used TCA in production?

"TCA is basically an extra layer of complexity in order to do what SwiftUI already does under the hood."
"Watch the first three [TCA] videos on how to make a checklist… The solution is sooooo complicated."
"[TCA] seems needlessly complex to jump through 5+ files just to figure out what’s happening on one simple screen."

Reddit: I hate the Composable Architecture

"[TCA] adds unnecessary complexity and a central dependency."
"Everything [in TCA] is so tightly connected, any change leads to changes everywhere else."
"Working two years with that [TCA] shit was one of the reasons I quit the project."

Rod Schmidt: Composable Architecture Experience

"TCA is a 3rd party framework. This means Apple doesn’t support it or care about it."
"You have to constantly re-learn things as the [TCA] framework gets updated."
"You can be much more productive with MVVM and get the same benefits [as TCA]."

Survey Results

Despite the criticism TCA is pretty popular. So who actually uses the framework? And why do they like it? To find out, I put up a survey in a few iOS/Swift subreddits and got 100 responses:

| TCA Opinion                                        | SwiftUI-first | UIKit-first |
| -------------------------------------------------- | ------------- | ----------- |
| I dont like it and avoid using it                  | 8             | 18          |
| I like it a lot and prefer it for app architecture | 5             | 19          |
| Its acceptable but not my preferred choice         | 1             | 19          |
| Not applicable (I havent used TCA)                 | 3             | 27          |

Key insights:

83% of survey respondents started with UIKit, while only 17% started with SwiftUI.
47% of SwiftUI-first developers avoid TCA, compared to only 22% of UIKit-first developers.

TCA's appeal seems rooted in its familiarity to UIKit-first developers, offering a structured, UIKit-like experience. For SwiftUI-first developers, TCA likely feels unnecessary and redundant, solving problems that SwiftUI already natively solves.

Vanilla

So what's the alternative? Honestly, just vanilla SwiftUI! Frustrated with TCA, I decided to recreate the SpeechRecognition example to prove that the framework is unnecessary.

Check out my vanilla implementation. Most of the code is in a single file (just for ease of comparison) and works seamlessly with Xcode 16, Swift 6, and iOS 18. Here are the important benchmarks:

| Metric                      | Vanilla    | TCA             |
| --------------------------- | ---------- | --------------- |
| Dependencies                | 0          | 16              |
| "Cold" Build Time (seconds) | 1.1        | 32.4            |
| "Warm" Build Time (seconds) | 0.1        | 0.4             |
| Indexing Time               | Negligible | Several minutes |
| Lines of Code               | 319        | 579             |

Given that the vanilla version delivers the same functionality and testing capabilities without the complexity, boilerplate, or quirks, I just don't see the advantage of using TCA.

TL;DR:

The Composable Architecture might have been useful in 2019 when SwiftUI was still immature, but Apple's yearly updates have rendered it obsolete for most apps. TCA is a perfect example of over-engineering that actively makes code worse while claiming to make it better. If you're transitioning to SwiftUI, focus on mastering its native tools in lieu of adopting TCA just because it feels familiar.

SwiftUI Data Flow

Tue, 26 Nov 2024 00:00:00 -0000

SwiftUI is over 5 years old. While a lot has changed since its introduction at WWDC19, the fundamentals— especially with respect to data flow—remain pretty much the same. Sure, there's some new Observation framework syntax to learn, but Apple has done a great job at "simplifying" and "unifying" APIs while maintaining backwards compatibility.

This post is meant to serve as a reference guide for modern (iOS 17/18+) SwiftUI data flow. It ought to be particularly useful for working with LLMs that might crank out outdated code.

Data Flow

By "data flow" I mean: how data moves through an app and updates the UI. Data flow in SwiftUI is actually quite simple... as long as you keep two principles in mind: views automatically update when their data changes, and every piece of data needs a single source of truth.

Since its release Apple has produced hundreds of hours of WWDC videos on SwiftUI. If you just watch these three videos you'll be like 90% up to speed:

Value vs Reference

I don't want to get too in the weeds, but in order to see and understand how data flow has changed we have to differentiate between value types (📦) and reference types (🔗).

Value types like Strings and Ints and Doubles and Bools and structs and enums, create independent copies when assigned. In contrast, reference types, like classes, share the same instance.

Apple strongly recommends using value types for most cases. If we followed this advice more often I wouldn't have even need to write this post as most of the data flow changes in SwiftUI (from iOS 13/14 to iOS 17/18+) are related to reference types!

Timeline

Legend: ✅ = current, ⛔ = avoid, 📦 = value, 🔗 = reference

iOS 13 / WWDC19

✅ 📦 @State
✅ 📦 @Binding
⛔ 🔗 ObservableObject replaced with @Observable in iOS 17+
⛔ 🔗 @Published redundant when using @Observable in iOS 17+
⛔ 🔗 @ObservedObject replaced with @Bindable in iOS 17+
⛔ 🔗 @EnvironmentObject replaced with @Environment in iOS 17+
✅ 📦 @Environment
⛔ 📦 EnvironmentKey replaced with @Entry in iOS 18+
⛔ PreviewProvider replaced with #Preview in iOS 17+

iOS 14 / WWDC20

⛔ 🔗 @StateObject replaced with @State in iOS 17+

iOS 15 / WWDC21

No significant data flow changes

iOS 16 / WWDC22

No significant data flow changes

iOS 17 / WWDC23

✅ 🔗 @Observable replaces ObservableObject
✅ 🔗 @State replaces @StateObject
✅ 🔗 @Bindable† replaces @ObservedObject
✅ 🔗 @Environment replaces @EnvironmentObject
✅ #Preview replaces PreviewProvider

iOS 18 / WWDC24

✅ 📦 @Entry replaces EnvironmentKey

Rosetta Code

Here's a simple, but practical, example of modern data flow in SwiftUI (I'd encourage you to copy-and-paste this block of code into Xcode to experiment with the syntax for yourself):

// iOS 17/18+
import SwiftUI

extension EnvironmentValues {
    // ✅ 📦 replaces `EnvironmentKey`
    @Entry var lastRefresh: Date = .now
}

// ✅ 🔗 replaces `ObservableObject`
@Observable
class UserStore {
    var username = "max" // ✅ 🔗 replaces @Published
    var hasPremium = false // ✅ 🔗 replaces @Published

    func randomize() {
        username = String((0..<3).map { _ in "abcdefghijklmnopqrstuvwxyz".randomElement()! })
    }
}

// ✅ 🔗 replaces `ObservableObject`
@Observable
class EmojiStore {
    var emoji = "😀" // ✅ 🔗 replaces @Published

    func update() {
        emoji = String(UnicodeScalar(Int.random(in: 0x1F600...0x1F64F))!)
    }
}

struct ParentView: View {
    @State var lastRefresh: Date = .now // ✅ 📦 unchanged
    @State var userStore = UserStore() // ✅ 🔗 replaces `StateObject`
    @State var emojiStore = EmojiStore() // ✅ 🔗 replaces `StateObject`
    @State var count: Int = 0 // ✅ 📦 unchanged

    var body: some View {
        VStack(spacing: 15) {
            HStack {
                Text("Last Refresh: \(lastRefresh.formatted(date: .omitted, time: .complete))")
                Button("Refresh") { lastRefresh = .now }
            }
            HStack {
                Text("Username: \(userStore.username)")
                Button("Randomize") { userStore.randomize() }
            }
            HStack {
                Text("Has premium: \(userStore.hasPremium ? "Yes" : "No!")")
                Button("Toggle") { userStore.hasPremium.toggle() }
            }
            HStack {
                Text("Emoji: \(emojiStore.emoji)")
                Button("Update") { emojiStore.update() }
            }
            HStack {
                Text("Count: \(count)")
                Button("+1") { count += 1 }
                Button("-1") { count -= 1 }
            }
            ChildView(
                emojiStore: emojiStore, // ✅ 🔗 unchanged
                count: $count // ✅ 📦 unchanged
            )
        }
        .padding()
        .background(Rectangle().stroke(.purple, lineWidth: 1))
        .environment(\.lastRefresh, lastRefresh) // ✅ 📦 unchanged
        .environment(userStore) // ✅ 🔗 replaces `.environmentObject`
    }
}

struct ChildView: View {
    @Environment(\.lastRefresh) private var lastRefresh: Date // ✅ 📦 unchanged
    @Environment(UserStore.self) private var userStore: UserStore // ✅ 🔗 replaces `@EnvironmentObject`
    @Bindable var emojiStore: EmojiStore // ✅ 🔗 replaces `@ObservedObject`
    @Binding var count: Int // ✅ 📦 unchanged

    var body: some View {
        VStack(spacing: 15) {
            HStack {
                Text("Last Refresh: \(lastRefresh.formatted(date: .omitted, time: .complete))")
            }
            HStack {
                Text("Edit username:")
                @Bindable var userStore = userStore // ⚠️ 🔗 FRUSTRATING!
                TextField("", text: $userStore.username)
                    .textInputAutocapitalization(.never)
                    .fixedSize()
            }
            HStack {
                Text("Has premium: \(userStore.hasPremium ? "Yes" : "No!")")
                Button("Toggle") { userStore.hasPremium.toggle() }
            }
            HStack {
                Text("Emoji: \(emojiStore.emoji)")
                Button("Update") { emojiStore.update() }
            }
            HStack {
                Text("Count: \(count)")
                Button("+1") { count += 1 }
                Button("-1") { count -= 1 }
            }
        }
        .padding()
        .background(Rectangle().stroke(.mint, lineWidth: 1))
    }
}

// ✅ replaces `PreviewProvider`
#Preview("Parent") {
    ParentView()
}

// ✅ replaces `PreviewProvider`
#Preview("Child") {
    @Previewable @State var userStore = UserStore() // ✅ 🔗 replaces `StateObject`
    @Previewable @State var emojiStore = EmojiStore() // ✅ 🔗 replaces `StateObject`
    @Previewable @State var count = 10 // ✅ 📦 unchanged
    ChildView(emojiStore: emojiStore, count: $count)
        .environment(\.lastRefresh, .now) // ✅ 📦 unchanged
        .environment(userStore) // ✅ 🔗 replaces `.environmentObject`
}

And here's the same example as above, just painted with the old, outdated syntax:

// iOS 13/14/15/16
import SwiftUI

// ⛔️ 📦 replaced with `@Entry`
private struct LastRefreshKey: EnvironmentKey {
    static let defaultValue: Date = .now
}

extension EnvironmentValues {
    // ⛔️ 📦 replaced with `@Entry`
    var lastRefresh: Date {
        get { self[LastRefreshKey.self] }
        set { self[LastRefreshKey.self] = newValue }
    }
}

// ⛔️ 🔗 replaced by `@Observable`
class UserStore: ObservableObject {
    @Published var username = "max" // ⛔️ 🔗 redundant when using `@Observable`
    @Published var hasPremium = false // ⛔️ 🔗 redundant when using `@Observable`

    func randomize() {
        username = String((0..<3).map { _ in "abcdefghijklmnopqrstuvwxyz".randomElement()! })
    }
}

// ⛔️ 🔗 replaced by `@Observable`
class EmojiStore: ObservableObject {
    @Published var emoji = "😀" // ⛔️ 🔗 redundant when using `@Observable`

    func update() {
        emoji = String(UnicodeScalar(Int.random(in: 0x1F600...0x1F64F))!)
    }
}

struct ParentView: View {
    @State private var lastRefresh: Date = .now // ✅ 📦 unchanged
    @StateObject private var userStore = UserStore() // ⛔️ 🔗 replaced with `@State`
    @StateObject private var emojiStore = EmojiStore() // ⛔️ 🔗 replaced with `@State`
    @State private var count: Int = 0 // ✅ 📦 unchanged

    var body: some View {
        VStack(spacing: 15) {
            HStack {
                Text("Last Refresh: \(lastRefresh.formatted(date: .omitted, time: .complete))")
                Button("Refresh") { lastRefresh = .now }
            }
            HStack {
                Text("Username: \(userStore.username)")
                Button("Randomize") { userStore.randomize() }
            }
            HStack {
                Text("Has premium: \(userStore.hasPremium ? "Yes" : "No!")")
                Button("Toggle") { userStore.hasPremium.toggle() }
            }
            HStack {
                Text("Emoji: \(emojiStore.emoji)")
                Button("Update") { emojiStore.update() }
            }
            HStack {
                Text("Count: \(count)")
                Button("+1") { count += 1 }
                Button("-1") { count -= 1 }
            }
            ChildView(
                emojiStore: emojiStore, // ✅ 📦 unchanged
                count: $count // ✅ 📦 unchanged
            )
        }
        .padding()
        .background(Rectangle().stroke(Color.purple, lineWidth: 1))
        .environment(\.lastRefresh, lastRefresh) // ✅ 📦 unchanged
        .environmentObject(userStore) // ⛔️ 🔗 replaced with `.environment`
    }
}

struct ChildView: View {
    @Environment(\.lastRefresh) private var lastRefresh: Date // ✅ 📦 unchanged
    @EnvironmentObject private var userStore: UserStore // ⛔️ 🔗 replaced with `@Environment`
    @ObservedObject var emojiStore: EmojiStore // ⛔️ 🔗 replaced with `@Bindable`
    @Binding var count: Int // ✅ 📦 unchanged

    var body: some View {
        VStack(spacing: 15) {
            HStack {
                Text("Last Refresh: \(lastRefresh.formatted(date: .omitted, time: .complete))")
            }
            HStack {
                Text("Edit username:")
                TextField("", text: $userStore.username)
                    .textInputAutocapitalization(.never)
                    .fixedSize()
            }
            HStack {
                Text("Has premium: \(userStore.hasPremium ? "Yes" : "No!")")
                Button("Toggle") { userStore.hasPremium.toggle() }
            }
            HStack {
                Text("Emoji: \(emojiStore.emoji)")
                Button("Update") { emojiStore.update() }
            }
            HStack {
                Text("Count: \(count)")
                Button("+1") { count += 1 }
                Button("-1") { count -= 1 }
            }
        }
        .padding()
        .background(Rectangle().stroke(Color.mint, lineWidth: 1))
    }
}

// ⛔️ replaced with `#Preview`
struct ParentView_Previews: PreviewProvider {
    static var previews: some View {
        ParentView()
    }
}

// ⛔️ replaced with `#Preview`
struct ChildView_Previews: PreviewProvider {
    static var previews: some View {
        Preview()
    }

    struct Preview: View {
        @StateObject var userStore = UserStore() // ⛔️ 🔗 replaced with `@State`
        @StateObject var emojiStore = EmojiStore() // ⛔️ 🔗 replaced with `@State`
        @State var count: Int = 10 // ✅ 📦 unchanged

        var body: some View {
            ChildView(emojiStore: emojiStore, count: $count)
                .environment(\.lastRefresh, .now) // ✅ 📦 unchanged
                .environmentObject(userStore) // ⛔️ 🔗 replaced with `.environment`
        }
    }
}

Between the Lines

As you can see, the two blocks of code are largely the same. The only real differences are in the reference type data flow. Thanks to Observation and @Observable things are a little more simple and a little better aligned with how value types have been handled since iOS 13:

1. Source of Truth

📦 @State
🔗 @State replacing @StateObject

2. Read/Write Access

📦 @Binding
🔗 @Bindable replacing @ObservedObject

3. Global Access

📦 @Environment
🔗 @Environment replacing @EnvironmentObject

Rough Edges

Observation framework is a great improvement to data flow in SwiftUI, but there are still some awkward parts. The most notable is that we need two different two-way read-write binding mechanisms (@Binding and @Bindable) instead of one unified approach. Even more frustrating is the explicit "rebinding" requirement for working with environment objects:

@Environment(UserStore.self) private var userStore
// ...
@Bindable var userStore = userStore // Required "rebinding"

Hopefully Apple unifies these binding mechanisms in the future, similar to how they've deftly consolidated State and Environment handling!

The Client Pattern

Wed, 20 Nov 2024 00:00:00 -0000

I recently wrapped up some work on a client project that used TCA. While I didn't love the framework, I'm thankful for the opportunity because it introduced me to something brilliant: the Client Pattern.

The Client Pattern

The thing that I'm calling the Client Pattern is really just a simplified version of Point-Free's DependencyClient from their swift-dependencies library. While the benefits are well articulated in this blog post, you can get most of the value with just a few lines of Swift:

import Foundation

struct MyClient {
    var fetch: @Sendable (_ value: Int) async throws -> String
}

extension MyClient {
    static let live = Self(
        fetch: { value in
            // Implementation here...
            return "Fetched value: \(value)"
        }
    )
}

func fetch(with client: MyClient = .live) async throws {
    let result = try await client.fetch(1)
    print(result)
}

No protocols. No abstractions. No third-party dependencies to manage... dependencies. Just structs and closures to make testing downstream dead simple.

A "Real" Example

To demonstrate the real power of the Client Pattern, let's build a client for the Sunrise-Sunset API.

First, define the response type:

import Foundation

struct SuntimesResponse: Decodable {
    let results: Results

    struct Results: Decodable {
        let sunrise: Date
        let sunset: Date

        enum CodingKeys: String, CodingKey {
            case sunrise
            case sunset
        }
    }
}

Then create the client interface:

struct SuntimesClient {
    var fetchSunrise: @Sendable (_ latitude: Double, _ longitude: Double) async throws -> Date
    var fetchSunset: @Sendable (_ latitude: Double, _ longitude: Double) async throws -> Date
}

Extend the client with a .live implementation (to do the actual networking):

extension SuntimesClient {
    static let live = Self(
        fetchSunrise: { latitude, longitude in
            let result = try await Self.fetchSuntimes(latitude: latitude, longitude: longitude)
            return result.sunrise
        },
        fetchSunset: { latitude, longitude in
            let result = try await Self.fetchSuntimes(latitude: latitude, longitude: longitude)
            return result.sunset
        }
    )

    private static func fetchSuntimes(latitude: Double, longitude: Double) async throws -> SuntimesResponse.Results {
        var components = URLComponents(string: "https://api.sunrise-sunset.org/json")
        components?.queryItems = [
            URLQueryItem(name: "lat", value: "\(latitude)"),
            URLQueryItem(name: "lng", value: "\(longitude)"),
            URLQueryItem(name: "formatted", value: "0")
        ]
        guard let url = components?.url else { throw URLError(.badURL) }
        let (data, _) = try await URLSession.shared.data(from: url)
        let decoder = JSONDecoder()
        decoder.dateDecodingStrategy = .iso8601
        let response = try decoder.decode(SuntimesResponse.self, from: data)
        return response.results
    }
}

Use the @Entry macro to inject the .live implementation into the SwiftUI environment:

import SwiftUI

extension EnvironmentValues {
    @Entry var suntimesClient: SuntimesClient = .live
}

And create a view that picks up the injected client:

struct SuntimesClientView: View {
    @Environment(\.suntimesClient) var client: SuntimesClient
    @State var sunset: Date?

    var body: some View {
        VStack {
            Text(sunset?.formatted() ?? "")
            Button("Fetch Sunset") {
                Task { await fetchSunset() }
            }
        }
    }

    private func fetchSunset() async {
        do {
            sunset = try await client.fetchSunset(43.6532, -79.3832)
        } catch {
            print(error)
        }
    }
}

#Preview {
    SuntimesClientView()
}

With the Client Pattern in place, testing and previews become incredibly simple. Just define a mock client:

extension SuntimesClient {
    static let preview = Self(
        fetchSunrise: { _, _ in throw URLError(.badServerResponse) }, // Simulates an error
        fetchSunset: { _, _ in .now } // Returns the current time for sunset
    )
}

And inject it into previews:

#Preview("Client Pattern (Mock)") {
    SuntimesClientView()
        .environment(\.suntimesClient, .preview) // Injects mock client
}

Copy-and-paste

Here's all of the code in a single block that you can copy-and-paste directly into Xcode to try out the Client Pattern for yourself:

import SwiftUI

struct SuntimesResponse: Decodable {
    let results: Results

    struct Results: Decodable {
        let sunrise: Date
        let sunset: Date

        enum CodingKeys: String, CodingKey {
            case sunrise
            case sunset
        }
    }
}

// MARK: - Client Definition
// Provides async closures for fetching sunrise and sunset data (Swift 6 ready!)
struct SuntimesClient {
    var fetchSunrise: @Sendable (_ latitude: Double, _ longitude: Double) async throws -> Date
    var fetchSunset: @Sendable (_ latitude: Double, _ longitude: Double) async throws -> Date
}

// MARK: - Live Implementation
// Implements live API calls for sunrise and sunset
extension SuntimesClient {
    static let live = Self(
        fetchSunrise: { latitude, longitude in
            let result = try await Self.fetchSuntimes(latitude: latitude, longitude: longitude)
            return result.sunrise
        },
        fetchSunset: { latitude, longitude in
            let result = try await Self.fetchSuntimes(latitude: latitude, longitude: longitude)
            return result.sunset
        }
    )

    // Helper: Makes the API call to retrieve sunrise and sunset data
    private static func fetchSuntimes(latitude: Double, longitude: Double) async throws -> SuntimesResponse.Results {
        var components = URLComponents(string: "https://api.sunrise-sunset.org/json")
        components?.queryItems = [
            URLQueryItem(name: "lat", value: "\(latitude)"),
            URLQueryItem(name: "lng", value: "\(longitude)"),
            URLQueryItem(name: "formatted", value: "0")
        ]
        guard let url = components?.url else { throw URLError(.badURL) }
        let (data, _) = try await URLSession.shared.data(from: url)
        let decoder = JSONDecoder()
        decoder.dateDecodingStrategy = .iso8601
        let response = try decoder.decode(SuntimesResponse.self, from: data)
        return response.results
    }
}

// MARK: - Preview Implementation
// Simulates sunrise and sunset fetching for previews and testing
extension SuntimesClient {
    static let preview = Self(
        fetchSunrise: { _, _ in throw URLError(.badServerResponse) }, // Simulates an error
        fetchSunset: { _, _ in .now } // Returns the current time for sunset
    )
}

// MARK: - Environment Values Extension
// Adds `@Environment(\.suntimesClient) var suntimesClient` to the SwiftUI environment (default to .live)
extension EnvironmentValues {
    @Entry var suntimesClient: SuntimesClient = .live
}

struct SuntimesClientView: View {
    @Environment(\.suntimesClient) var client: SuntimesClient
    @State var sunset: Date?

    var body: some View {
        VStack {
            Text(sunset?.formatted() ?? "")
            Button("Fetch Sunset") {
                Task { await fetchSunset() }
            }
        }
    }

    // Fetches sunset data asynchronously and updates the state
    private func fetchSunset() async {
        do {
            sunset = try await client.fetchSunset(43.6532, -79.3832)
        } catch {
            print(error)
        }
    }
}

// MARK: - Previews
#Preview("Client Pattern (Live)") {
    SuntimesClientView()
}

#Preview("Client Pattern (Mock)") {
    SuntimesClientView()
        .environment(\.suntimesClient, .preview) // Injects mock client
}

The Old Way (Don't Do This)

For comparison, here's the protocol-based Service Pattern I've previously used for app networking:

import SwiftUI
import Foundation

// MARK: - Protocol Definition
// Enables mocking and testing of sunrise/sunset fetching
protocol SuntimesServiceable {
    func fetchSunrise(latitude: Double, longitude: Double) async throws -> Date
    func fetchSunset(latitude: Double, longitude: Double) async throws -> Date
}

// MARK: - Live Service Implementation
// Implements the SuntimesServiceable protocol for actual API calls
struct SuntimesService: SuntimesServiceable {
    func fetchSunrise(latitude: Double, longitude: Double) async throws -> Date {
        let results = try await fetchSuntimes(latitude: latitude, longitude: longitude)
        return results.sunrise
    }

    func fetchSunset(latitude: Double, longitude: Double) async throws -> Date {
        let results = try await fetchSuntimes(latitude: latitude, longitude: longitude)
        return results.sunset
    }

    // Helper: Makes the API call to retrieve sunrise and sunset data
    private func fetchSuntimes(latitude: Double, longitude: Double) async throws -> SuntimesResponse.Results {
        var components = URLComponents(string: "https://api.sunrise-sunset.org/json")
        components?.queryItems = [
            URLQueryItem(name: "lat", value: "\(latitude)"),
            URLQueryItem(name: "lng", value: "\(longitude)"),
            URLQueryItem(name: "formatted", value: "0")
        ]
        guard let url = components?.url else { throw URLError(.badURL) }
        let (data, _) = try await URLSession.shared.data(from: url)
        let decoder = JSONDecoder()
        decoder.dateDecodingStrategy = .iso8601
        let response = try decoder.decode(SuntimesResponse.self, from: data)
        return response.results
    }
}

// MARK: - Mock Service for Testing
// Provides predictable behavior for testing without actual API calls
struct MockSuntimesService: SuntimesServiceable {
    func fetchSunrise(latitude: Double, longitude: Double) async throws -> Date {
        .now // Returns the current time for sunrise
    }

    func fetchSunset(latitude: Double, longitude: Double) async throws -> Date {
        throw URLError(.badServerResponse) // Simulates an error
    }
}

struct SuntimesServiceView: View {
    @State var sunrise: Date?
    private let service: SuntimesServiceable

    // Injects the dependency, defaulting to the live service
    init(service: SuntimesServiceable = SuntimesService()) {
        self.service = service
    }

    var body: some View {
        VStack {
            Text(sunrise?.formatted() ?? "")
            Button("Fetch Sunrise") {
                Task { await fetchSunrise() }
            }
        }
    }

    // Fetches sunrise data asynchronously
    private func fetchSunrise() async {
        do {
            // Warning: Swift 6 Error (Sending 'self.service' risks causing data races)
            // Sending main actor-isolated 'self.service' to nonisolated instance method 'fetchSunrise(latitude:longitude:)' 
            // risks causing data races between nonisolated and main actor-isolated uses
            sunrise = try await service.fetchSunrise(latitude: 43.6532, longitude: -79.3832)
        } catch {
            print(error)
        }
    }
}

// MARK: - Previews
#Preview("Service Pattern (Live)") {
    SuntimesServiceView(service: SuntimesService())
}

#Preview("Service Pattern (Preview)") {
    SuntimesServiceView(service: MockSuntimesService())
}

Keeping It Simple

I'm really excited about the Client Pattern going forward as it:

Removes protocol overhead
Makes testing easier with closures
Integrates well with SwiftUI
And requires less code

Grug Brained SwiftUI

Sat, 16 Nov 2024 00:00:00 -0000

A SwiftUI tribute to the timeless wisdom of "The Grug Brained Developer", a guide that shows simplicity is not just a choice but a way of life.

swiftui

one day grug find swiftui

grug like swiftui

swiftui good. swiftui simple. swiftui flow like river

but some dev stack rock in river, make waterfall of sad

grug think "why fight river with rock???"

"why make simple thing complex???"

grug say "stop fight river. let river flow!"

but some dev not listen

some dev throw rock in river again and again

mvvm

grug see dev who fight river also use mvvm

grug not big fan. grug know mvvm not always fit swiftui

but if mvvm there, grug stay quiet, for shared goal

until grug see nested view model

grug think "why nest view model like angry babushka doll??!"

grug say "view model not nest. view model hold state for one thing, not many things!"

nest not just throw rock in river but build dam of despair

llm

grug see dev who fight river also use llm for swiftui

grug think "llm fine. good tool, like sharp axe"

but some dev swing axe bad

use llm code, no check if good

like build boat with bad wood

boat float, then sink

grug say "llm not magic"

"tell llm wrong thing, like help uncle jack off the horse"

"llm give handjob to horse instead"

grug say "llm only good if dev know good llm code from bad"

boat sink if not

complexity

grug know all swiftui struggles come from one thing: complexity

complexity creep in slow

grow like debris in river

at first seem fine

then river clog

water stop

code become swamp

grug only want swiftui stay like river and not turn to swamp

SwiftUI is not UIKit

Thu, 14 Nov 2024 00:00:00 -0000

Programming basically boils down to two things: data flow and naming stuff. Simple in theory. Super easy to complicate in practice. To illustrate the point let's look at some iOS code that updates an emoji on a "parent" view from a "child" view action.

Boilerplate UIKit

In UIKit this relatively simple task becomes a whole sad song and dance:

import UIKit

class ParentViewController: UIViewController {
    var labelText = "🐶" {
        didSet {
            label.text = "Label: \(labelText)"
            childViewController?.updateLabel(with: labelText)
        }
    }

    private let label = UILabel()
    private let childContainer = UIView()
    private var childViewController: ChildViewController?

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    private func setupUI() {
        view.backgroundColor = .white
        view.layer.borderColor = UIColor.orange.cgColor
        view.layer.borderWidth = 1
        view.layoutMargins = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        let parentStack = UIStackView(arrangedSubviews: [
          createParentLabelStack(), childContainer
        ])
        parentStack.axis = .vertical
        parentStack.spacing = 8
        parentStack.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(parentStack)
        NSLayoutConstraint.activate([
            parentStack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            parentStack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            childContainer.heightAnchor.constraint(equalToConstant: 100),
            childContainer.widthAnchor.constraint(equalToConstant: 150)
        ])
        let childVC = ChildViewController()
        childVC.labelText = labelText
        childVC.onUpdateText = { [weak self] newText in
            self?.labelText = newText
        }
        addChild(childVC)
        childContainer.addSubview(childVC.view)
        childVC.view.frame = childContainer.bounds
        childVC.didMove(toParent: self)
        childViewController = childVC
        childContainer.layoutMargins = UIEdgeInsets(
            top: 10, left: 10, bottom: 10, right: 10
        )
    }

    private func createParentLabelStack() -> UIView {
        let parentLabel = UILabel()
        parentLabel.text = "Parent"
        let stack = UIStackView(arrangedSubviews: [parentLabel, label])
        stack.axis = .vertical
        stack.alignment = .center
        stack.spacing = 4
        stack.layer.borderColor = UIColor.red.cgColor
        stack.layer.borderWidth = 1
        stack.layoutMargins = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        stack.isLayoutMarginsRelativeArrangement = true
        label.text = "Label: \(labelText)"
        label.textAlignment = .center
        return stack
    }
}

class ChildViewController: UIViewController {
    var labelText = "🐶" {
        didSet {
            label.text = "Label: \(labelText)"
        }
    }

    var onUpdateText: ((String) -> Void)?
    private let label = UILabel()
    private let updateButton = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    private func setupUI() {
        view.layer.borderColor = UIColor.green.cgColor
        view.layer.borderWidth = 1
        view.layoutMargins = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        label.text = "Label: \(labelText)"
        label.textAlignment = .center
        updateButton.setTitle("Update", for: .normal)
        updateButton.addTarget(self, action: #selector(handleUpdateButtonTap), for: .touchUpInside)
        let childLabel = UILabel()
        childLabel.text = "Child"
        let stack = UIStackView(arrangedSubviews: [childLabel, label, updateButton])
        stack.axis = .vertical
        stack.alignment = .center
        stack.spacing = 4
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.isLayoutMarginsRelativeArrangement = true
        view.addSubview(stack)
        NSLayoutConstraint.activate([
            stack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stack.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }

    @objc private func handleUpdateButtonTap() {
        labelText = "🐈"
        onUpdateText?(labelText)
    }

    func updateLabel(with text: String) {
        labelText = text
    }
}

// Only required for Xcode Previews
import SwiftUI

struct ParentViewControllerWrapper: UIViewControllerRepresentable {
    @Binding var text: String

    func makeUIViewController(context: Context) -> ParentViewController {
        let parentVC = ParentViewController()
        parentVC.labelText = text
        return parentVC
    }

    func updateUIViewController(_ uiViewController: ParentViewController, context: Context) {
        uiViewController.labelText = text
    }
}

#Preview {
    @Previewable @State var text = "🐶"
    ParentViewControllerWrapper(text: $text)
        .frame(width: 200, height: 220)
}

Seriously?! All of that to change an emoji from "🐶" to "🐈"!

"SwiftUIKit"

Many seasoned UIKit developers transitioning to SwiftUI treat the framework as “UIKit with different syntax.” The result? Bloated SwiftUI code that looks like this:

import SwiftUI

// Unnecessary coordinator pattern
class ParentCoordinator {
    // Unneccessary nesting
    weak var parentViewModel: ParentViewModel?
    var childCoordinator: ChildCoordinator?

    init(parentViewModel: ParentViewModel) {
        self.parentViewModel = parentViewModel
        self.childCoordinator = ChildCoordinator(childViewModel: parentViewModel.childViewModel)
        self.childCoordinator?.delegate = self
    }
}

// Unneccessary delegate pattern
extension ParentCoordinator: ChildCoordinatorDelegate {
    func childCoordinatorDidUpdateLabelText(_ newText: String) {
        parentViewModel?.labelText = newText
    }
}

// Unneccessary protocol
protocol ChildCoordinatorDelegate: AnyObject {
    func childCoordinatorDidUpdateLabelText(_ newText: String)
}

// Unneccessary child coordinator
class ChildCoordinator {
    // Unneccessary nesting
    weak var childViewModel: ChildViewModel?
    weak var delegate: ChildCoordinatorDelegate?

    init(childViewModel: ChildViewModel) {
        self.childViewModel = childViewModel
    }

    // Unnecessary @MainActor
    @MainActor func updateText() {
        childViewModel?.updateText()
        delegate?.childCoordinatorDidUpdateLabelText(childViewModel!.labelText)
    }
}

// Unneccessary view model
@Observable
class ParentViewModel {
    var labelText: String
    // Unneccessary nesting
    var childViewModel: ChildViewModel
    var coordinator: ParentCoordinator?

    init(labelText: String = "🐶") {
        self.labelText = labelText
        self.childViewModel = ChildViewModel(labelText: labelText)
        self.coordinator = ParentCoordinator(parentViewModel: self)
    }
}

// Unneccessary view model
@Observable
class ChildViewModel {
    var labelText: String

    init(labelText: String) {
        self.labelText = labelText
    }

    // Unneccessary @MainActor
    @MainActor func updateText() {
        labelText = "🐈"
    }
}

// Overly complex view hierarchy
struct ParentView: View {
    @Bindable var viewModel: ParentViewModel

    init() {
        let viewModel = ParentViewModel()
        self.viewModel = viewModel
    }

    var body: some View {
        VStack {
            VStack {
                Text("Parent")
                Text("Label: \(viewModel.labelText)")
            }
            .padding()
            .background(Rectangle().stroke(Color.red))
            ChildView(viewModel: viewModel.childViewModel, coordinator: viewModel.coordinator!.childCoordinator!)
        }
        .padding()
        .background(Rectangle().stroke(Color.orange))
    }
}

// Child view with direct connection to the coordinator
struct ChildView: View {
    @Bindable var viewModel: ChildViewModel
    var coordinator: ChildCoordinator

    var body: some View {
        VStack {
            Text("Child")
            Text("Label: \(viewModel.labelText)")
            Button(action: {
                coordinator.updateText()
            }) {
                Text("Update")
            }
        }
        .padding()
        .background(Rectangle().stroke(Color.green))
    }
}

#Preview {
    ParentView()
}

Coordinators, delegates, nested view models... and enough boilerplate to sink a ship!

Vanilla SwiftUI

Here's the exact same problem solved with just a few lines of SwiftUI:

import SwiftUI

struct ParentView: View {
    // Single source of truth using @State
    @State private var text = "🐶"

    // Simple, declarative view hierarchy
    var body: some View {
        VStack {
            VStack {
                Text("Parent")
                Text("Label: \(text)")
            }
            .padding()
            .background(Rectangle().stroke(.red))
            ChildView(text: $text)
        }
        .padding()
        .background(Rectangle().stroke(.orange))
    }
}

struct ChildView: View {
    // Direct connection to parent state using @Binding
    @Binding var text: String

    var body: some View {
        VStack {
            Text("Child")
            Text("Label: \(text)")
            Button {
                text = "🐈"
            } label: {
                Text("Update")
            }
        }
        .padding()
        .background(Rectangle().stroke(.green))
    }
}

#Preview {
    ParentView()
}

No coordinators. No delegates. No view models. Just @State and @Binding doing what they were designed to do. SwiftUI is able to handle all of the complexity that had to be manually orchestrated in UIKit.

MVVM

Some might complain, but what about MVVM? Well, if you must (a topic for another time) use MVVM with SwiftUI here's what that might look like:

import SwiftUI

@Observable
class ViewModel {
    // Single source of truth at the model layer
    var text = "🐶"

    func update() {
        text = "🐈"
    }
}

struct ParentView: View {
    // View owns the model instance
    @State var viewModel = ViewModel()

    var body: some View {
        VStack {
            VStack {
                Text("Parent")
                Text("Label: \(viewModel.text)")
            }
            .padding()
            .background(Rectangle().stroke(.red))
            ChildView()
        }
        .padding()
        .background(Rectangle().stroke(.orange))
        .environment(viewModel)
    }
}

struct ChildView: View {
    // Child accesses shared model through environment
    @Environment(ViewModel.self) var viewModel: ViewModel

    var body: some View {
        VStack {
            Text("Child")
            Text("Label: \(viewModel.text)")
            Button {
                viewModel.update()
            } label: {
                Text("Update")
            }
        }
        .padding()
        .background(Rectangle().stroke(.green))
    }
}

#Preview {
    ParentView()
}

At least the thing given the ViewModel name this time is actually a view model!

The Bottom Line

SwiftUI isn’t just a new UI framework—it’s a completely different way of thinking. A brand new way of building. UIKit patterns worked well... in UIKit. Forcing them into SwiftUI only creates complexity.