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

Dr. Lofi Dewanto
Dec 12, 2020 · 3 min read

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.

SwiftUI with Two Ways Binding “name”

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.

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

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 Declarative UI and Structure (Source: https://bit.ly/3ndrt0E)

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!

The Startup

Get smarter at building your thing. Join The Startup’s +799K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store