UI Development Trend in 2020: Declarative UI to Rule Them All
In year 2020 it seems that major players in UI development are agreed in how we, developers, should design the UI (User Interface) of our apps or web apps. In this article I will show you the current UI development trends with different frameworks and environments available in 2020 and sum them up. Later I’ll take a look on the UI development trends in Java / GWT / J2CL.
Design Trend in UI
SwiftUI has renovated the whole UI development in Apple world. Native on all Apple platforms with all those nice design tools set a very high bar for UI development. Also move from imperative UIKit / AppKit / WatchKit to declarative design to be able to make UI development more easier and straight forward. So how do you implement the UI today? You describe your UI textually. If you need a state you can mark a variable with @State and then use it to write something to it like $name. To read the content we just need to use \(name). This is what we call “two ways binding”. So each time we write something into the TextField the variable name will be updated and the Text which uses that variable will be updated automatically.
Android Jetpack Compose
Android UI development follows the way of SwiftUI by adding Android Jetpack Compose to the UI development area in Android. Jetpack Compose only uses Kotlin (no Java implementation) because of some advantages of Kotlin over Java? I don’t agree that we can only have this type of UI development in Kotlin but it seems Google wants to push Kotlin over Java in Android development and won’t implement the same feature for Java developers.
If we take a look at the structure of the code in Jetpack Compose it really looks similar to SwiftUI. You have different syntax but in a whole the structure and the way to implement are quite similar. Two ways data binding is also simply possible with @Model annotation.
Flutter has a nice overview to tell us what is the difference between imperative and declarative UI development.
Flutter uses Dart as a programming language and it also has a nice structure for developing UI. Again the structure is very similar to other two frameworks before. Only in “two ways data binding” Flutter is not so easy to use in comparison with SwiftUI as you can see in this Flutter example.
Next Stop: Web Apps
After seeing these three frameworks: SwiftUI, Android Jetpack Compose and Flutter we can summarize following points:
- Declarative instead of imperative: UI development is moving from imperative to declarative. It is not important how we do it (imperative) but what the target state is (declarative).
- DSL (Domain Specific Language) for UI and textual based instead GUI designer based: UI development moves from drag&drop environment into textual description of the UI. It seems that we use programming language and DSL instead of XML to describe our UI.
- Two ways data binding: It is standard to have two ways data binding, so an update in a data field will be synchronized to all the UI components which bound to this field and vice-versa.
In the next article I’ll take a look at Web apps UI development. How does it look like in 2020? Is it comparable with the three frameworks we’ve seen in this article? What about Java UI development for desktop and Web apps? How does it look like in GWT / J2CL UI frameworks? Stay tuned!