Building your App’s UI for 2023 - Part I

Native mobile app development has gone through an accelerated change in the last few years. Both Apple and Google launched new frameworks for building User Interfaces for iOS and Android, respectively: SwiftUI and Jetpack Compose.

These are not just new tools. In contrast to the existing native frameworks, SwiftUI and Jetpack Compose have an entirely different approach to UI building, moving from imperative to declarative programming.

What does this mean for mobile developers and also for app founders? What are the benefits and drawbacks of this change? And most importantly, when is the right time to make the transition? At Wolfpack Digital, we organized a meetup event where two of our senior mobile software engineer colleagues, Roxana and Dan, talked in more depth about these aspects.

Roxana and Dan, senior mobile software engineers at “How to build your App’s UI for 2023” Meetup organized by Wolfpack Digital at our Wolfden.

We will discover all about that in this two-part series of articles, but first,

A bit of theory: imperative and declarative programming

Imperative programming is a clearly defined sequence of instructions, telling the computer what it has to do, when, and in what order. You can see it like a recipe: step-by-step instructions for achieving the desired result.

On the other hand, declarative programming describes the desired result. The code remains abstract in terms of instructions, allowing the programmer to express what he wants to achieve more directly.

Let's see an example:

Question: How can I get from my place to your place?

Imperative solution:

• Go out to the main road and take a left. 
• Get on street X until you get to street Y. 
• Turn right and go straight, then take a right at the first light. 
• Continue on this street, then take your next left. 
• My house will be the pink house on the left side.

Declarative solution:

• Here’s the address: 37 Emil Racovita, Cluj-Napoca, Cluj, 400165

Of course, the declarative way assumes you have a GPS device helping you to reach that address. This device represents the abstraction layer from the definition. In fact, the GPS device has a set of internal sensors reasoning rules that will generate the path to your desired destination, similar to the list of instructions from the imperative answer.

All in all, it means that the imperative and declarative terms are not exclusive, and we can see the declarative approach as a simpler one for the programmer, with one more layer of abstraction.

Applicability in Mobile UI Development

When building native iOS and Android apps, developers have had imperative-based frameworks for creating UI for a long time. However, with the addition of the new frameworks mentioned in the beginning, we now have a declarative-based UI building option too. Let's take them one by one.

iOS

On the iOS side, there's UIKit, a framework that's available since 2008, when the first iOS SDK was released. UIKit enables you to build interfaces that can handle touch events and display multiple UI elements on the screen: buttons, text, shapes, etc. It is based on Objective-C, but after Apple announced Swift in 2014, everything became available in Swift as well.

There are two main ways to build a User Interface with UIKit:
1) Using the Interface Builder in Storyboards and XIB files.
2) Programmatically, writing everything in code imperatively. 

Things changed in 2019 when Apple launched the first version of SwiftUI - a new framework for building the UI based on declarative programming. That was version 1.0, but we got a new release every year, so now, in 2022, we're already at version 4.0.

SwiftUI follows a more reactive approach compared to UIKit. Instead of defining the views and elements explicitly in terms of size, stacking, and transformations that need to happen, SwiftUI is based on states that you should change whenever needed. When a screen or any other UI element has a new state, the framework will recreate it based on that state.

In contrast to UIKit, there is no interface builder for SwiftUI, only the programmatic approach using Swift. However, you have a live preview for each element you create, which allows you to see how it looks and behaves in real time.

SwiftUI promises more clarity and better development speed, but we will see more about that in the sequel of this article, which will dive more into code examples, pros, and cons.

Android

Let's see how things are looking on the Android side.

The first official Android SDK was released in 2008, offering quite a different approach to building UI compared to iOS. It was (and still is) based on XML files in which developers can define UI components, group them together and access them from Java (and Kotlin, later) code. Moreover, you can also create UI elements directly in Java or Kotlin. 

As you probably guessed, this is an imperative-based approach. Every change that needs to happen on the screen must be triggered by some instructions written in the code. Of course, the XML-based layouts have different components you can use as root, for example, ConstraintLayout or LinearLayout, but that doesn't change the imperative approach.

This way of building Android user interfaces was your only option until 2021, when Google launched the first official version of Jetpack Compose. The Alpha and Beta versions were available much earlier, of course.

Compose is much more similar to SwiftUI than XML Views were to UIKit. It follows the same reactive approach based on states. When the data changes, instead of manually finding and updating every element on the screen that needs to be changed (like we had to do with XML layouts), the Compose framework does automatically by recomposition. It observes all the mutable data that changed and recreates the UI elements based on that data.

The similarities to SwiftUI don't stop here. Jetpack Compose keeps Android development consistent by using the same programming language as the rest of the app - Kotlin, just like you use Swift everywhere on iOS. Moreover, there's also a live preview for visualizing your newly created components, just like in SwiftUI.

Is your Android app still based on Java? You can definitely use components created in Compose in a Java app, but you cannot make those components using Java. Jetpack Compose only supports Kotlin, which means it has access to all its powerful features.

Which ones to choose?

Now that we've seen in what direction is native mobile UI development heading, should you use these new frameworks for your current or next mobile app?

As you might expect, the answer depends on multiple factors. SwiftUI and Jetpack Compose come with many promises, but they are still new, and as any software development framework in its early stages, they have issues and drawbacks.

In the second part of this series, we will discover the advantages of these new declarative UI frameworks, their drawbacks, what to pay attention to, and how to incorporate them into your apps. Stay tuned!

Roxana and Dan presenting the “How to build Building your App’s UI for 2023” Meetup organized by Wolfpack Digital.