Hello everyone,

Today we’re looking for the difference between imperative uı and declarative uı then learn information about the jetpack compose.

In the dynamic realm of Android app development, it is not uncommon for new libraries, SDKs, and architectures to rise and fall and new features to get added or removed each year. Among the few things to survive the flux, the XML-based UI toolkit is relied on by developers to build user interfaces of all kinds.

What’s a “Declarative UI”?

A declarative UI pattern defines the UI as a function of the “state.” A “state” is nothing but a variable or an object that holds a value, which can change based on user input or other business logic. When the state changes, the framework will redraw the UI. You don’t have to manually modify the UI to reflect the new state. Instead, you can declare what to show in each state and the framework will show the matching UI for the current state.

State name = State<String>()

Label(
 text: "Welcome, ${ if(name is empty) "Guest" else name }",
 color: if(name is empty) BLACK else BLUE,
 font: "Helvetica"
)

TextInput(
  hint: "Enter your name",
  font: "Helvetic",
  onChange: (text){ 
    name=text   
  }
)

What’s an “Imperative UI”? Imperative programming is a programming paradigm that describes computation in terms of statements that change a program state. From another point of view, you tell the compiler what you want to happen, step by step.

TextInput input = find_from_UI()
Label label = find_from_UI()

label.setFont("Helvetica")
label.setColor(BLACK)
label.setText("Welcome, Guest")

input.setHint("Enter your name")
input.setFont("Helvetica")
input.onChange((text) {
   if(text is empty){
      label.setText("Welcome, Guest")  // requires manually updating the UI
      label.setColor(BLACK)
   } else {
      label.setText("Welcome, $text")
      label.setColor(BLUE)
   }
})

Difference between in Android App Development

On the Android side, If you want to do a design interface with imperative uı, you can use only Java or Kotlin code to design the user interface. But if you want to do with declarative uı, you can use a descriptive markup language, as XHTML or XML, to describe the user interface. While declarative uı can only change the desired area, all field change occurs in imperative uı. As a result, the jetpack compose structure has arrived in the android area so that user interface design can be made easily.

What’s a Jetpack Compose?

Jetpack Compose is a modern declarative UI toolkit that simplifies native UI development across all Android platforms. It is the Android team’s take on the revolutionary declarative paradigm. Google announced Jetpack Compose during IO 2019 and released alpha in August 2020. In the last weeks, it was announced to the whole world.

More information: https://developer.android.com/jetpack/compose

For example, a button in Compose doesn’t use the native Android “Button” class under the hood; instead, it literally paints a button on the screen.

@Composable
fun NewsStory() {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Image(
            painter = painterResource(R.drawable.header),
            contentDescription = null
        )

        Text("A day in Shark Fin Cove")
        Text("Davenport, California")
        Text("December 2018")
    }
}

So, Why Should We Learn to Compose?

You can continue using the XML-based UI toolkit — it’s not going to disappear anytime soon. But do you really want to miss the ease of writing less code and speeding up app development? If I were to compare Compose vs XML, Compose is the clear winner. Five reasons why you think should learn to compose:

Easy UI Management: Currently, keeping the app state and the UI state in sync is a hassle considering how you have to manually update all the UI components to reflect the changes in the app state. Compose does away with this step of manual synchronization. It automatically updates the UI to match the state.

Kotlin for UI and Logic: To develop XML-based UIs, you must maintain two files — an XML file for a layout and a Kotlin file for Activity or Fragment. Compose eliminates the need for a separate file for the UI layout. It allows you to write UI elements within the Activity or Fragment using Kotlin. Compose is built using Kotlin, so you don’t have to learn another language to use Compose.

Independent of the OS: The current UI components are tightly bound to the OS platform. When you create a “Button” in XML, it may look different on different OS versions and devices. Also, since these components are bundled with the OS, new fixes and improvements require another release of the OS. In Compose, every UI element is built from scratch, independent of the underlying OS. For example, a “Button” in Compose looks and behaves the same on all devices.

Interoperability: Compose supports interoperability, which means developers can use Compose within projects that use XML layouts. It can reuse the existing XML layouts to build UIs.

Less code, faster development: Currently, you have to write a lot of code to manage the UI — from setting contents, defining themes, and positioning components to manage visibility based on the business logic. This steals a lot of development time for polishing the UI and debugging other UI issues. In Compose, you can declare UIs directly within the Kotlin files. It eliminates the need to maintain separate XML files and handle them in the code. This means less code and faster development.

As a result, We all want to write applications quickly and beautifully. Let’s write them in such a way that they can get errors in the least way and see the instant change while writing them. In my opinion, compose is better than classic XML coding on the android side.

Thank you..