Declarative UI: The Future of Modern UI Design

Here's the first part of my article about SwiftUI and Jetpack Compose, where I talk about their features and differences.

Declarative UI is a programming paradigm that defines the desired end state of the user interface without detailing the control flow. In simpler terms, this approach allows developers to specify what the UI should look like, and a framework takes care of creating and managing transitions. This makes coding more intuitive and requires less code.

When we think of Declarative UI, React and Flutter usually come to mind. Here's an image used in a presentation at Google I/O:

Let's briefly compare Declarative UI with the classic Imperative UI:

• Both paradigms are used to create UIs, but they have significant differences.
• In Declarative UI, you simply describe what an object should look like. For example, you specify that you want a button, but you don't need to detail its exact position (x, y). The framework handles the creation of objects and the process.
• In Imperative UI, as shown in the Gist below, you manage every step of creating the UI. This model involves direct manipulation of UI elements, often resulting in more shared code and the manual handling of UI states and transitions.

val button = Button() //Imperative

button.text = "click me"

val layout = Layout()

layout.add(button)

Layout { // Declerative

Button("click me")

}

Key Features of Declarative UI

• State Management: The UI is rendered based on the application’s state. When the state changes, the UI automatically updates. This creates a strong link between the UI and data state.

• Simplicity and Readability: Declarative UI allows developers to specify what needs to be done, removing concerns about how it should be done. This makes the code more readable and easier to maintain.

• Component-Based: Declarative UI is often component-based. Components are isolated UI pieces with their own state and structure (props). This increases reusability and modularity.

• Memory Friendly: Modern Declarative UI frameworks are designed to update the DOM only when necessary and minimally, improving performance.

Challenges of Declarative UI

• Steeper Learning Curve: Transitioning to declarative thinking can be challenging for those used to imperative programming. Understanding how state changes affect the UI requires a good grasp of the underlying framework’s state and lifecycle management.
• Performance Costs: While typically optimized, complex state dependencies can lead to performance bottlenecks. Inefficient state use can trigger unnecessary re-renders, affecting the app’s responsiveness and speed, known as recomposition in Compose.
• Limited Control: Declarative UI abstracts much of the rendering process control, which can be a disadvantage for projects needing fine-tuned optimizations. Developers may be limited by the framework’s constraints and bugs.

Popular Declarative UI Frameworks

• React: A widely adopted JavaScript library developed by Facebook.
• Vue.js: An open-source JavaScript framework with versatile and performant architecture.
• Flutter: A framework by Google used for both mobile and web applications.
• SwiftUI: A framework by Apple for developing native applications for platforms like iOS and macOS.
• Jetpack Compose: A modern, reactive, and responsive UI toolkit by Google for native Android application development.

The Future

When I wrote this article in 2019, it was impossible to predict today (May 2024). Back then, SwiftUI and Jetpack Compose were in their early stages. Now, they have produced numerous apps on the Apple Store and Google Play Store. Learning and adapting to these will help us keep up with the evolving world.

2019:

We’ve read and understood; it’s good… Declarative UI, SwiftUI, Compose… Okay, let’s disperse… Not so fast! 🙂 Brainstorming is essential. What’s the future of this? Will it be possible to design UI in Android Studio and apply it to iOS, or vice versa? Developing the UI once and applying it to other platforms with minor tweaks… 🤔

Suppose such a thing is done in three years: a cross-platform but also native UI toolkit/framework.

2024:

Not yet. Developing a joint framework without the consent of these two companies is impossible, and for now, they can’t even bear talking to each other. Yes, writing UI has become easier but not that easy. Even if companies use SwiftUI for iOS and Jetpack Compose for Android, from what I see, teams continue to work separately. It’s not just because the technologies are different but also the need to deliver the same work in a short time.

2019:

As things get easier, our work speeds up, but does it diminish the feeling of writing code? Historically, when things get too easy, does it devalue and reduce respect for it in software?

2024:

Well, I’m actually a bit bored with Android, but not because it’s too easy. I explained this in more detail in this article. I’m not in the mindset of ‘it’s become so easy, it’s a mess, I’m going back to Java, no more coding, no more Android’. Compose is another challenge, another learning opportunity. Quite delightful. It’s just that I became a software team leader and changed my path and the language I use.

Stay with software, stay well.

I published this article on Peakup’s blog in 2019 in Turkish, but I’m moving it to my Vocal account because my name wasn’t mentioned there, the screenshots and images were corrupted, and the article needed updating. I published this article in Medium also

Sources:

https://docs.flutter.dev/get-started/flutter-for/declarative

https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

https://medium.com/front-end-weekly/imperative-versus-declarative-code-whats-the-difference-adc7dd6c8380