How Declarative UI is Reshaping the Developer's Workflow

The other day, nostalgia hit me hard. I found myself diving back into Android development after what felt like ages. Back in my day (wow, that makes me sound old and I am not that old), it was all Java and XML files - the classic Android combo that every developer knew and... well, dealt with.

Fast forward to 2024, and boy, was I in for a surprise! Firing up Android Studio felt like walking into my old high school and finding everything renovated. Kotlin has taken the throne as the default language (bye-bye, verbose Java syntax!), and there's this new kid on the block called Jetpack Compose that everyone's talking about.

As I started tinkering with Compose, something clicked in my brain. The way we build UIs has fundamentally shifted. It got me thinking about the broader picture - the evolution from imperative to declarative UI development. And trust me, this isn't just another technical rambling; it's a story about how we're making app development more intuitive and, dare I say, more human.

Let me break down this journey from the old school to the new cool, and why this shift matters more than you might think.

Before that, Let’s Break Down Imperative and Declarative Programming

Imperative programming is the "traditional" style of programming that focuses on how to do something. It involves writing step-by-step instructions that the computer follows to achieve a specific result. In imperative programming, you explicitly control the flow of the program, specifying each action the program must take to reach the desired outcome.

Let’s say you want to create a list of squared numbers. In imperative programming, it might look something like this in Python:

numbers = [1, 2, 3, 4]
squares = []
for num in numbers:
    squares.append(num * num)
print(squares)

Declarative programming, on the other hand, focuses on what the program should accomplish, rather than how to do it. In declarative programming, you describe the desired result, and the underlying system or framework figures out the steps needed to achieve that result. The goal is to simplify code and make it more readable by abstracting away the details of how the work is done.

Using the same task—creating a list of squared numbers—let’s look at how declarative programming handles it. Here’s a Python example using a list comprehension:

numbers = [1, 2, 3, 4]
squares = [num * num for num in numbers]
print(squares)

When to Use Each Paradigm?

Both imperative and declarative programming have their place in the world of software development. While imperative programming gives you full control over the flow and state, declarative programming simplifies development by focusing on what you want to achieve, abstracting away the implementation details. As programming languages evolve, declarative approaches are becoming more common, especially in areas like UI design and functional programming.

Ultimately, the choice between the two paradigms depends on the task at hand. By understanding both, you can choose the right approach to make your code simpler, cleaner, and easier to maintain.

So, Why is Functional Programming coming up in the mix?

Yep, functional programming is a subset of declarative programming, but with its own unique principles and characteristics. While declarative programming focuses on describing what the program should do, functional programming extends this concept by emphasizing immutability, pure functions, and higher-order functions. Let’s explore the relationship and distinctions between the two.

Functional Programming in a Declarative Context

Now, let’s talk about functional programming. At its heart, FP is very much in line with the declarative approach. In FP, you focus on using functions to transform data rather than giving explicit instructions about the control flow or state changes.

So, how does FP fit into declarative programming? The core principles of functional programming are naturally declarative in nature because:

1. Immutability: In FP, data is immutable, meaning once it’s created, it cannot be changed. This is a declarative idea—you're not concerned with how to modify the state; you simply create a new version based on the old one.
2. Pure Functions: Pure functions don’t have side effects. They always produce the same output for the same input, and they don’t change anything outside of themselves. This fits perfectly into the declarative style of programming, where you're focused on specifying the desired results, not how they are achieved.
3. First-Class Functions and Higher-Order Functions: FP encourages treating functions as first-class citizens, which means you can pass them around like any other data. Higher-order functions (functions that take other functions as arguments) are also a common pattern. This is declarative because it abstracts away the complexity and gives you the tools to compose behaviour in a higher-level way.

Conclusion

Functional programming and declarative programming might seem like abstract concepts at first, but when combined, they offer a clean and efficient way to approach software development. By focusing on describing what you want to achieve instead of the step-by-step process, both paradigms help simplify your code and make it easier to maintain, test, and scale.

Whether you’re working with React, Jetpack Compose, or any other declarative framework, understanding functional programming can help you write cleaner, more expressive code that focuses on what needs to happen, rather than how it should happen. It’s like switching from giving a detailed recipe to simply saying, “I want a delicious cake,” and letting the system figure out the rest.

Now Declarative vs. Imperative UI

What is Imperative UI?

Let’s start with imperative UI. In the imperative approach, you’re writing a series of step-by-step instructions telling the computer exactly how to make the UI. You are the one handling all the details. You might think of this approach as giving someone a recipe: you list all the ingredients, the exact steps to follow, and you stay in charge of the process the whole time.

In an imperative UI, you manage the entire UI lifecycle yourself. You’re responsible for creating elements, updating them, and making sure they respond to user input. For example, if you want to change a button’s colour when the user clicks it, you’ll need to explicitly define the steps to update the UI, which could include checking the button’s state, changing the style, and making sure the update gets reflected on the screen.

In traditional Android development with Java or XML, the imperative approach is how things work. You define each view, listen for changes, and then handle those changes manually. It’s like being the director of a play, telling each actor exactly where to stand, what to say, and when to move.

Example: Imperative UI in Android

Button button = findViewById(R.id.my_button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Change button text on click
        button.setText("Clicked!");
    }
});

In the above example, you explicitly define the behaviour of the button. When it’s clicked, you tell it to change its text to “Clicked!”—step by step.

What is Declarative UI?

Now let’s talk about declarative UI. In the declarative approach, you describe what the UI should look like and how it should behave, without specifying the steps to get there. Instead of telling the computer exactly how to do something, you tell it what you want, and the system takes care of the details.

With declarative UI, the framework (or the system) automatically takes care of rendering and updating the UI as needed. It’s like saying, “I want a blue button that changes to green when clicked,” and letting the system figure out how to make it happen, rather than telling it every little thing it needs to do.

In a declarative UI, you focus on describing the final state you want to see on the screen. The UI framework takes care of figuring out how to update and display the interface based on that description. For example, if a button’s state changes, the framework will know to update the button’s appearance without you needing to manually trigger every change.

In modern Android development, you’ll see declarative UI used in Jetpack Compose—Google’s toolkit for building UIs with Kotlin. With Jetpack Compose, you describe what the UI should look like in terms of composables, which are like reusable components. You tell Compose what the UI should look like based on data, and the framework takes care of rendering and updating it.

Example: Declarative UI with Jetpack Compose

@Composable
fun MyButton() {
    var clicked by remember { mutableStateOf(false) }

    Button(onClick = { clicked = !clicked }) {
        Text(text = if (clicked) "Clicked!" else "Click me")
    }
}

In this example, you’re telling Jetpack Compose that you want a button with text that changes when clicked. You’re not worrying about how the text gets updated or how the button gets redrawn—you just describe what you want, and Compose handles the rest.

The Key Differences

The key differences between declarative and imperative UI lie in the level of control, complexity, reactivity, and maintainability. In an imperative UI, you have full control over every detail of the UI, managing elements, state changes, and updates manually, which can become complex and tedious as your app grows. On the other hand, declarative UI abstracts away much of the manual management, allowing you to describe the desired UI state, and the framework handles the updates automatically. This makes declarative UI simpler, especially for larger projects, as it minimizes boilerplate code and reduces the potential for errors. Declarative UI is also inherently reactive, meaning the UI will automatically update when the data changes, unlike in imperative UI, where you have to manually trigger updates. As a result, declarative UI tends to be more maintainable and easier to modify over time, making it ideal for modern apps, while imperative UI might be more appropriate when complete control is needed.

Wrapping Up

The difference between declarative and imperative UI can feel subtle at first, but once you dive into development, you’ll notice the difference in how you approach building UIs. If you love the idea of writing cleaner, more maintainable code that lets the framework take care of the heavy lifting, declarative UI is your friend. But if you need full control over every aspect of your app, imperative UI gives you the power to manage every detail.

Both approaches have their place, and in many modern apps, declarative UI is quickly becoming the preferred choice because it makes code simpler and easier to maintain. So whether you’re just starting out or a seasoned developer, understanding the trade-offs between these two approaches can help you choose the best method for building your next app!

This article was originally published on my blog here