UI Development Trends in 2020: Declarative UI to Rule Them All

In 2020, it seems that the main players in UI development agree on how we (developers) should design the UI (User Interface) of an app or web app. In this article, I will show you the current UI development trends in 2020 with different frameworks and environments and summarize them. Later, I will look at UI development trends in Java/GWT/J2CL.

Design Trends in UI

1. SwiftUI

SwiftUI revolutionizes the whole UI development in the Apple world. Being native on all Apple platforms, having all these great design tools, setting a very high standard for UI development. Also moving from imperative UIKit/AppKit/WatchKit to declarative design to make UI development easier and more straightforward. So how do you implement UI today? You describe your user interface through text. If you need state, you tag a variable with @State and then use it to write something to it, like $name. To read something, we just need to use (name). This is what we call "two way binding". So every time we write something to a TextField, the variable name gets updated and the Text that uses that variable gets automatically updated as well.

> SwiftUI with Two Ways Binding "name"

2. Android Jetpack Compose

By adding Android Jetpack Compose to the UI development area of ​​Android, Android UI development follows the SwiftUI way. Since Kotlin is better than Java, Jetpack Compose only uses Kotlin (no Java implementation)? I don’t agree that we can only do this kind of UI development in Kotlin, but Google seems to want to push Kotlin above Java in Android development and will not implement the same features for Java developers.

> Android Jetpack Compose UI Development with Kotlin (Source: https://bit.ly/3gJUiPJ)

If we look at the structure of the code in Jetpack Compose, it does look similar to SwiftUI. You have a different syntax, but overall the structure and implementation is very similar. Both ways of data binding are also simply implemented using the @Model annotation.

3. Flutter

Flutter's overview is a good one that tells us what the difference is between imperative and declarative UI development.

> Flutter Declarative UI and Structure (Source: https://bit.ly/3ndrt0E)

Flutter uses Dart as a programming language, and it has a good structure for developing UIs. Again, the structure is very similar to the other two frameworks before it. As you can see in this Flutter example, Flutter is not as easy to use compared to SwiftUI only in the "two data binding" way.

Next stop: Web applications

After seeing the following three frameworks: SwiftUI, Android Jetpack Compose, and Flutter, we can summarize the following points:

• Declarative rather than imperative: UI development is moving from imperative to declarative. It doesn’t matter how it is executed (imperative), but it does matter what the target state is (declarative).
• DSL (Domain Specific Language) is used for UI and text-based languages ​​instead of GUI designer-based languages: UI development moves from a drag-and-drop environment to a text description of the UI. It seems that we use programming languages ​​and DSL instead of XML to describe our UI.
• Two way data binding: There is usually two way data binding, so that updates in a data field are synchronized to all UI components bound to that field, and vice versa.