Jetpack Compose and SwiftUI Compared to Flutter

Jetpack Compose and SwiftUI, Competing Against Flutter

Do you love using Flutter because of its declarative way to construct UI? You might want to try out Jetpack Compose and SwiftUI.

A long time ago, I tried imperative way to construct UI in Android’s XML based UI framework kit and Apple’s UIKit. It took me a long time just to develop a simple app, and I wondered if we could develop an app’s UI in a simple way (I am a lazy programmer, so I want to code as efficient as possible 🤣).

In early 2019, Flutter v1.0 was officially released, and I am thrilled to switch to Flutter for mobile app development. It took me only a few minutes to create an app’s UI, instead of several hours creating UI with imperative programming way.

Flutter’s Way of Creating UI, The Code Looks Very Neat (Image Source: buildwithangga.com)

Now, even though it’s easier to develop an app with Flutter, there are also several drawbacks that I found:

1. Performance isn’t as fast as native (even though it’s not that noticeable)
2. Falls behind in terms of native’s new feature support (for example, Flutter version 2.6 still uses Swift 4 for its code build, which is already deprecated at the moment)
3. Limited libraries compared to native app development (since it’s pretty new as well)
4. Not many big companies use Flutter for their app

Do you want to develop an app with native performance with declarative programming way of constructing UI? try out Jetpack Compose for Android and SwiftUI for Apple.

Jetpack Compose

Android Jetpack Compose

Jetpack Compose is a built-in way in Android to build an app’s UI with declarative method. Every UI elements are constructed as “Composable”. The example of Jetpack Compose code snippet:

Notice the @Composable annotation? that’s where the UI got constructed, and then called in onCreate function like usual in Android. It’s much simpler to construct the UI, isn’t it? I took around 5 mins to construct this UI in Jetpack Compose, compared to 15 mins with XML way (took way longer to create a dynamic list with RecyclerView).

SwiftUI

Apple’s SwiftUI

SwiftUI is a new UI framework introduced by Apple in 2019, they even said that SwiftUI is the future of app development on Apple’s platforms (since it’s cross platform, allowing you to develop iOS, MacOS, WatchOS, and tvOS apps, using only one codebase).

The example of the SwiftUI code (with MVVM architecture):

We can either create a new struct or create a @ViewBuilder func to group UI elements.

Same with Jetpack Compose, I took around 30 mins to create the app’s UI, compared to several hours if I use UIKit (because we need to create XIB, storyboards, for separate elements, which took a lot of our time).

Verdict: What to Consider Before Switching from Flutter to Jetpack Compose and SwiftUI?

Switching to Jetpack Compose and SwiftUI might be a good idea for you if:

1. You like the idea of declarative programming to construct UI elements (but in native!).
2. You prioritize native app performance (native is always faster than hybrid platform).
3. You need the newest updates and support to the new features from each platform (both Android and iOS got updated every year with new features and bugfixes).
4. Much better if you only develop for one platform (which is a rare case).

Avoid switching from Flutter if:

1. You need only one codebase to develop on both Android and Apple’s ecosystem (for faster app development, instead of relying on two separate codebases).
2. You need Flutter’s additional libraries and functions (that aren’t available in native platforms).
3. You don’t have a mac, but want to develop an iOS app before publishing to App Store.

That’s it, that’s my opinion related to Android’s Jetpack Compose and Apple’s SwiftUI. Hope you find this article useful!