SwiftUI VS Jetpack Compose

7 min readNov 29, 2023

Introduction

Hey there, fellow tech enthusiasts! 👋

Today I’ve decided to talk about two of the most preferred mobile development frameworks: SwiftUI for iOS and Jetpack Compose for Android. I will be showing some implementation examples, comparisons and talk about both frameworks as overall topics.

Now, you might be wondering, “Why should I care about this comparison?” if you don’t have a direct purpose of clicking on this article.It has a few reasons why someone might need this article such as deciding which app development path to stroll down, itching to add some nifty new skills to your developer toolkit (which was my intention), or just plain curious about what’s buzzing in the tech world.

In the next section, I’d like to mention some of the advantages one has over the other. According to my research and overall experience of course.

Industrial yet? Easily adaptable?.. : SwiftUI vs. Jetpack Compose

Let’s get real about SwiftUI and Jetpack Compose. You know, the stuff they don’t always tell you in the fancy tech blogs.

SwiftUI: Early Bird Gets the Worm, But…

Apple Jumped in Early: Apple dropped SwiftUI in 2019 and was like, “Here, try this.” It gave them a head start, sure, but it also meant we iOS developers had to rewire our brains from UIKit to SwiftUI. And let me tell you, it wasn’t a walk in the park.
The SwiftUI Learning Curve: If you’re an iOS dev, moving to SwiftUI can feel like learning to ride a bike all over again. Sure, it’s cool and sleek, but expect some bumps along the road.
Personal experience: As a guy who was developing apps with UIKit, transition to SwiftUI was a lazy, curvy and challenging to me. I always procrastinated and kept on delaying it. You need to keep in mind changes in development land happens a lot and you need to keep up indeed. However it’s good to know that something is ready for industry or not. SwiftUI was NOT ready in my opinion till about 2021–2022.

Jetpack Compose: Late to the Party, But Dances Better?

Google Playing Catch-Up: Compose popped up officially in 2021, two years after SwiftUI. It’s like Google saw Apple and said, “Hold my beer.”
Kotlin to the Rescue: The good thing? If you’re an Android dev used to Kotlin, jumping into Compose feels more like a small hop than a giant leap. Kotlin’s patterns and syntax fit into Compose like a glove, making the transition smoother than what we iOS folks had with SwiftUI.

So, What’s the Bottom Line?

Getting Used to It: Whether you’re team SwiftUI or team Compose, the start can be rocky. But once you get the hang of it, it’s pretty sweet how fast you can get things done.
Community and Help: SwiftUI’s got more road under its belt, so there’s more help out there if you get stuck. Compose is younger, but it’s backed up by the whole Android gang, so you’re not alone.

By 2023 December, as a person who is developing mainly iOS apps but have been on both ends, I could say both of the frameworks are 99% industrial and are used in a lot of projects. From small to big. Modular or not modular. White-label or one brand.

Architectural Principles

SwiftUI Architecture

Declarative Syntax Example:

This code snippet creates a text element, styles it, and adds padding, all in a straightforward, readable manner.

Text("Hello, World!")
  .font(.title)
  .padding()

Data Binding: Uses properties like @State for dynamic data updates.

Here, any changes to ‘name’ automatically update the TextField.

@State private var name: String = ""
TextField("Enter your name", text: $name)

View Composition: Combines smaller views to create complex UIs.

VStack stacks the text views vertically.

VStack {
  Text("Welcome")
  Text("SwiftUI")
}

Jetpack Compose Architecture

Declarative UI Example:

Similar to SwiftUI, this Compose code creates a text element with padding.

Text("Hello, Android!", modifier = Modifier.padding(16.dp))

State Management: Implements state hoisting for better control.

Changes to ‘name’ reflect in the TextField.

var name by remember { mutableStateOf("") }
TextField(value = name, onValueChange = { name = it })

Composable Functions: Build UI components as reusable functions.

Greeting is a reusable component that displays a greeting message.

@Composable
fun Greeting(name: String) {
  Text(text = "Hello, $name!")
}

Comparison

State Management: SwiftUI uses @State, while Jetpack Compose uses remember and mutableStateOf for state handling.
Syntax and Structure: Both use a similar declarative style, but with different syntax — Swift for SwiftUI and Kotlin for Compose.
Interoperability with Older Frameworks: Jetpack Compose more easily integrates with existing Android views compared to SwiftUI’s integration with UIKit.

Next, we’ll see how these principles play out in real-world development scenarios.

Development Experience

SwiftUI Development Experience

Building UI Elements:

Here, creating a toggle switch in SwiftUI is intuitive. Just a few lines of code and you have a functional toggle with a label.

Toggle(isOn: $isToggled) {
    Text("Switch this toggle")
}

Data-Driven Views: SwiftUI’s strong suit is creating data-driven views that automatically update with state changes. This makes it easier to build dynamic and interactive apps.
Swift Integration: Leveraging Swift’s modern features, developers can create complex functionalities with less code and greater efficiency.

Jetpack Compose Development Experience

Constructing UI Components:

Checkbox(
    checked = isChecked,
    onCheckedChange = { isChecked = it }
)

Similar to SwiftUI, Jetpack Compose simplifies UI creation. This snippet shows how to implement a checkbox with state handling.
Reactive UI Updates: Jetpack Compose excels in building reactive UIs that reflect changes in data states or user interactions seamlessly.
Kotlin Features: Utilizes Kotlin’s capabilities like extension functions and higher-order functions, enabling more expressive and concise code.

Comparison

Developer Productivity: Both frameworks significantly reduce the boilerplate code required for UI design, enhancing developer productivity.
Learning Curve: SwiftUI’s integration with other Apple technologies might require a learning period for developers new to Apple’s ecosystem, whereas Jetpack Compose’s similarity to traditional Android development can be more approachable for Android developers.
Tooling and Ecosystem: SwiftUI benefits from the mature ecosystem of Xcode and Apple’s development tools. Jetpack Compose, though newer, is rapidly growing and integrating within Android Studio, offering robust tools and features for Android app development.

Example feature: User Profile Display

Feature Description: Displaying a user profile with a name and an “Update” button that changes the name.

SwiftUI

struct UserProfileView: View {
    @State private var userName: String = "John Doe"

    var body: some View {
        VStack {
            Text("User: \(userName)")
                .font(.title)
            Button("Update") {
                self.userName = "Jane Doe"
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
    }
}

Explanation:

@State manages the userName state.
The Text view displays the current user name.
The Button view updates userName when clicked.

Jetpack Compose

@Composable
fun UserProfile() {
    var userName by remember { mutableStateOf("John Doe") }

    Column {
        Text("User: $userName", style = MaterialTheme.typography.h6)
        Button(onClick = { userName = "Jane Doe" }) {
            Text("Update")
        }
    }
}

Explanation:

remember and mutableStateOf handle the userName state.
The Text composable shows the user name.
The Button composable changes userName on click.

Comparison:

State Management: SwiftUI uses @State, Jetpack Compose uses remember and mutableStateOf.
UI Elements: Both frameworks offer a clear, concise way to create UI elements like text and buttons.
Data Binding: Both update the UI reactively based on user interactions.

Career choice

I’m not here to tell you go with this or that. It’s all preferences, industry needs and overall need for developers. Tomorrow AI might replace all of us so this article might no longer be in need. Or next year apple might buy google or some chaotic stuff like this. That I can’t predict but;

You might be saying that you are new to all of this, what to go with? Well. iOS Apps are natively developed on apple’s operating systems. You will need a MacBook. But on android development you dont have that issue. Matter fact, google might be playing the game ahead with their Multiplatform which allows developers to write multi platform apps. This is critical. Because Apple is late to the party. Actually there is a nice article id like to refer on this:

Apple’s Strategic failure by Michael Long

Personal Experience and Opinion

Now, let’s get personal for a moment. My journey with SwiftUI has been nothing short of exciting. The moment I dived into SwiftUI, I felt like a whole new world of possibilities opened up. The declarative syntax wasn’t just a breath of fresh air; it was a gust of fresh innovation. Building UIs became more intuitive, almost like sketching out my thoughts directly into code. The real-time previews? A game-changer for me. They transformed the way I approached UI design, allowing me to see the impact of my code instantly.

As for Jetpack Compose, even though I haven’t worked with it as extensively as SwiftUI, my exploration into it has left me genuinely impressed. Its approach to simplifying UI design on Android mirrors many of the reasons I appreciate SwiftUI. From what I’ve seen and read, Compose is making Android development more accessible and enjoyable, much like SwiftUI has done for iOS.

Here’s the thing: I’m an iOS guy through and through. But that doesn’t stop me from admiring what’s happening on the other side of the fence. Jetpack Compose, from my perspective, is a sign that the entire mobile development landscape is moving in a fantastic direction with the Multiplatform that they introduced which Apple doesn’t have yet.

In conclusion, SwiftUI has reshaped my iOS development experience, making it more streamlined and enjoyable. And from my brief encounters and observations of Jetpack Compose, I can say it’s doing the same for the Android world. Both are powerful tools that are pushing the boundaries of what we can achieve in mobile app development, and I can’t wait to see where they take us next.