The rise of Declarative UI patterns

Declarative, particularly Declarative UI is the buzz word in the world of Mobile Application Programming for the past couple of years.

One by one every major player is rolling out their version of the same, following suite of Facebook’s React Framework.

1. There is Swift UI by Apple for IOS announced at WWDC 2019.
2. There is Android’s Jetpack compose announced in May of 2019.
3. There is also Flutter for cross-platform announced in May of 2017.
4. JetBrains Kotlin Multi-Platform.

Understanding declarative UI

Declarative programming is a programming paradigm — a style of building the structure and elements of computer programs — that expresses the logic of a computation without describing its control flow.

For a real-life, example let’s see two scenarios:

In Declarative paradigm:

A student goes to school.

In Imperative paradigm :

A student will go to school if he can catch the bus or train. If he fails to catch a bus then he goes by train. He goes to school because it is good for his personal development. He goes there if there is not a holiday. yada yada.

See in the above example the only operation that we can observe in declarative programming is a student going to school, without worrying about the consequences or the reasons behind it or the methodology thus followed.

In the traditional Imperative paradigm, however, we have to manage and check if there is a condition in which student goes to the school or not and which path he follows.

Let’s see an example in code

Declarative

Imperative code

This code sample demonstrates how to modify the contents of the textview defined in the previous XML layout:

Here we can see that

In Declarative UI:

1. There is a single source of truth.
2. The flow of data is unidirectional.
3. We can only use the text passed as a parameter.

In Imperative UI:

1. setText() might be called anywhere from the code i.e the view can be mutated at more than one place, making it harder to predict.
2. The code to perform mutation on any view can be performed outside of the class.

What is the hype about it?

• Less Boilerplate :

As the lines of code in our applications keep adding up, it is getting harder to predict the behaviour of a view digging through a heap of code.

Declarative UI patterns can solve these problems by reducing boilerplate and making view behaviour more predictable.

• Easier to read:

Declarative code is more close to Natural language than imperative Ui making it easier to read.

• Separation of view and data:

As we cannot mutate the view state directly, only the data thus passed can be changed. It reinforces developers to separate the data layer from the UI by convention.

• Less time for re-compilation:

Many of these frameworks come with hot-reloading, such that the views are updated instantly when you change them while previewing.

Even if most frameworks did not provide us with hot-reload it can reduce recompilation time a lot as the language in which they are written say kotlin or swift is faster to convert to bytecode than say XML or XAML.

• Catching up:

Probably the biggest hype building factor is that many web and cross-platform developers are already using declarative tools wishlist, native app developers are stuck with imperative paradigms or something like data-binding. However, the newcomers are excited to try it out and it is about time.