UI Declarative for Mobile Development
Written in 2019, right after Google I/O and WWDC. SwiftUI and Jetpack Compose have both shipped and matured since; the post is kept as a snapshot of that moment.
A large part of a mobile developer’s job is building user interfaces, and that job has changed a lot. An interface is no longer a handful of buttons and a simple form: it presents a lot of information in many different shapes, responds to taps and gestures, and carries fairly sophisticated animations.
Let’s look at how UI is built on Android and iOS today.
On the Android side, the UI is written in XML files. Over the years the catalogue of layouts and views has grown, some of them deprecated and many of them new; the latest, ConstraintLayout, works a lot like constraints on iOS.
On the iOS side, we have storyboards and Auto Layout, which are also XML underneath. Unlike Android, though, the developer rarely touches that XML: they design the UI in a graphical editor, set constraints, drag and drop components, and even define the navigation between screens.
What’s wrong with this?
The first problem on Android is how much it has changed. A developer who stopped keeping up is probably still using layouts and components that have been superseded, and that collides with what a newer developer expects. In a team, that friction is a real cost.
The second problem is version control. Telling two XML files apart is hard when they are machine-generated, deeply nested and full of attributes.
What is the solution?
React got there first with declarative UI, which lets you break a screen into composable pieces. It is also the main attraction of Flutter.
iOS and Android took the hint and concluded that declarative UI is both the present and the future. At their last developer conferences, Google I/O 2019 and WWDC, each announced its own answer.
SwiftUI
SwiftUI is Apple’s declarative way to build interfaces: a few lines of Swift produce genuinely complex views, and its strongest point may be how easy animations become. You get a modern UI in very little time. It was the announcement that caught Apple developers’ attention the most, not least because the same technology covers the whole ecosystem: macOS, iOS, tvOS and watchOS.
Apple wrote a beautiful set of tutorials, in the spirit of Google Codelabs, to get started.
Jetpack Compose
Jetpack Compose is a declarative toolkit for building UI in Kotlin. At the time of writing it is in early exploration, pre-alpha: the API surface is not final and it should not be used in production. But sooner than we think, it will replace much of what we know.
With Kotlin and Swift describing the interface itself, a good future is waiting for us.