Imperative v Declarative UI Design – Is Declarative Programming the future?

Behind every mobile application, a UI framework determines how developers create the application and how well it performs. Today, UI frameworks fit into two categories: declarative and imperative. The majority of apps use the imperative approach. 

However, as the newer, declarative frameworks develop and reveal their many advantages, several major tech companies have switched to developing their apps with declarative UI designs.

As declarative programming becomes more popular, we want to evaluate its advantages and disadvantages and consider how it improves upon imperative designs. 

In this article, we will define and compare imperative and declarative UI design and explore the benefits and drawbacks of designing apps with declarative programming.

Understanding Imperative and Declarative UI Designs

Imperative and declarative UI frameworks refer to frameworks that use imperative and declarative programming styles, respectively. Below, we define these terms as they relate to UI design and describe the differences between the two paradigms or models.

Imperative Programming

Currently the most common paradigm, imperative programming requires the developer to write step-by-step how the program will reflect the desired state or perform an operation. For UI creation, developers write detailed code that tells the device how to display the components.

Declarative Programming

Declarative programming allows developers to design the user interface based solely on what they want to be displayed without regard to how the device will update its state.

Oftentimes, declarative frameworks rely on an underlying imperative implementation that translates the declarative command into a set of imperative instructions for the device to complete. 

Let’s look at an example

Website designer sitting at a computer
Web design

Consider a simple mobile app with a button that toggles its color. 

Imperative design

A developer must create a button component and add an event handler function to it. The event handler function would run when clicked and contain an if-else statement that changes the color based on the button’s color when pressed.

Declarative design

The developer creates a button component with the property toggle color. The declarative design appears much simpler and more intuitive.

However, the declarative example only works because of an imperative implementation in the framework that interprets the toggle color property and assigns the proper event handler that determines the current button color and how it needs to change. 

Why use Declarative Programming?

Less code, faster development

Imperative programming requires a lot of code to manage the UI. Developers must determine the contents, define themes, position components, and manage event handlers. With many responsibilities, developers have less time to polish the design and debug other UI issues. 

Moreover, imperative UI design typically requires multiple programming languages, one for the UI design and another for the functionality of each UI element.

With declarative programming, on the other hand, we only need to design UIs within the Swift (for IOS) or Kotlin (for Android) code, eliminating the need to maintain and handle separate UI files. In short, declarative UI programming means less code and faster development.

Windows, Andoid, and iOS logo
iOS & Android

Theming

Declarative UIs come with a pre-configured theme. Developers can customize this theme to meet their preferences by altering properties like typography, color, buttons, etc. A pre-configured yet fully customizable theme saves developers time as they don’t need to build a theme from scratch.

Dynamism

Declarative UI frameworks provide control structures developers can use to manipulate the drawing of the user interface. Compared to imperative frameworks typically used for Android and IOS development, declaratively developed user interfaces can use these control structures to be more dynamic.

State management

With an imperative design, developers face the difficulty of syncing the UI with the app state by manually updating all the components to reflect the changes in the app. Traditionally, developers created a user interface with a tree of widgets/layouts.

Whenever the app’s data or state required a UI component to update, the program had to traverse through the tree of widgets, select the right one, and change it. As the tree of elements grows, the design becomes more complex and error-prone.

The declarative UI paradigm eliminates this process of manual synchronization. The declarative framework automatically updates the UI to match the app’s state, simplifying state management by a significant degree.

Other Advantages of Declarative UI Design

  • Live previews for rapid UI development.
  • SwiftUI & Compose foster collaboration between designers and web developers 
  • It’s an opportunity to learn a valuable skill.

Disadvantages of Declarative UI Design

Since declarative programming has only emerged in the past few years, there are still unresolved issues and disadvantages. Current problems with declarative UI design include:

  • Declarative UIs only support more recent operating systems 
  • You may encounter problems no one has faced before
  • Some features are only available in native, imperative UI frameworks
  • Best declarative programming practices and conventions have not yet been established
  • Insufficient documentation
  • Small developer community
  • Little integration with third-party libraries
  • The learning curve can be very steep initially

Many issues with the declarative paradigm, however, are likely temporary. As more companies and developers see the advantages of declarative design and invest more resources into growing the development community, they will resolve many of the aforementioned issues.

Why you should start thinking declaratively

Declarative app development requires a new perspective. Many assumptions that developers might have, in regards to app development, no longer apply if using a declarative design.

For example, with declarative programming, developers can rebuild the UI to reflect the app’s current state instead of modifying it directly. The formula below illustrates this new perspective.

When the state of your app changes (for example, the user flips a switch in the settings screen), the state changes, which triggers a redraw of the user interface. There is no imperative changing of the UI itself (like a textView.text = “Hi”).

Conclusion

Several major names in the tech industry, such as Meta, Google, and Apple, have already adopted the declarative paradigm because they see its value as a simple yet effective method of app development.

These companies believe it is the future of front-end development. Here at Rootstrap, we believe we should be ready for it too, and we encourage developers to explore how declarative design could improve UI development.

Want to work with Amaury Ricardo?
We are hiring :)

Interest in cryptocurrency today is greater than ever before. The opportunities to use crypto in everyday life range from buying […]
December 5
5 min read
When you think of design thinking, what comes to mind? You might imagine stock images of people in suits smiling […]
November 25
5 min read
Slicing and atomization have become popular terms in the software industry, but many developers may need help understanding their true […]
November 22
5 min read
In recent years, automating software quality tests has become widely popular in the tech industry. Current automation tools allow us […]
November 21
5 min read
While I was in a session with one of my mentors some time ago, we did an exercise called Ikigai, […]
November 18
5 min read