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
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.
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.
