Getting Started: Declarative UIs
I help you learn declarative UIs, the state-of-the-art in building user interfaces.
What are Declarative UIs?
Let me explain with a sample application in a video from a talk of mine at JJUG CCC Spring 2021. The section about declarative UIs starts at 5:33 minutes and ends at 10:36 minutes. The player below is set to the right time already:
So let me sum up declarative UIs:
- UI as code
- Status & events
- Framework drives updates
And who uses declarative UIs? That’s an update to the list of tools from the video. Declarative UIs are recommended here:
- iOS and macOS: Apple Swift UI (since 2019)
- Android: Jetpack Compose (since July 2021)
Declarative UIs are or will be an option here:
- Web: React (since 2013)
- Windows: .NET MAUI (moved from November 2021 to Q2/2022)
How do Declarative UIs Code Look Like?
SwiftUI is Apple’s take on declarative front-ends. Here’s the counter example from the talk, with slightly changed formatting:
Flutter is Google’s cross-platform implementation of declarative front-ends. It reached the stable version 1.0 for mobile in December 2018. Here’s what the SwiftUI counter sample looks like in Flutter:
If you want to lean Flutter, then I got you covered!
Google’s Jetpack Compose
Jetpack Compose is Google’s Android implementation of declarative front-ends. So Google has two different horses in this race: Jetpack Compose and Flutter. Of course, it’s Google! 😒
Jetpack Compose went 1.0 on July 28, 2021.
I adopted the counter sample in this tutorial to look like the SwiftUI sample above:
Microsoft’s .NET Multi-platform App UI (MAUI)
Microsoft calls its implementation of declarative front-ends “Model-View-Update” (MVU). Here’s what I think the SwiftUI sample from above will look like in MVU. I adapted the sample from the announcement post:
And finally, here’s what the counter looks like in Facebook’s React for web applications. I adapted it from this Stackblitz sample. You see some HTML code in there because I don’t use components to keep things simple. If I did, it would look as declarative as the other examples:
If you want to lean React, then I can help you!