What is Jetpack Compose

Jetpack Compose is a toolkit launched by Google to build native UI in Android. The main motive for launching this is to provide a productive and simple approach to creating UI in Android. Building UI using Compose is opposite to the traditional approach (building UI using XML). As we know XML was an imperative UI design approach, But on the other hand, Jetpack compose is a declarative UI design approach. and it allows developers to design the UI based on what data they receive. There are several declarative UI frameworks like Flutter, React Native, SwiftUI and Jetpack Compose.

In Jetpack Compose we describe UI by calling a series of functions and these functions convert data into UI hierarchy after setting up everything if data changes the framework automatically recalls the required function to update UI (This UI update process is known as recomposition). The amazing thing about it is that it allows developers to write logic and UI using a single language Kotlin. 

Difference between Imperative and Declarative approaches: –

Imperative: – In imperative, we create a separate prototype/model of the application’s UI. As you know in XML we create widgets and components which are rendered for users to see and interact with. This way of writing is more focused on the how rather than the what.

Example Program: –

<TextView
    android:id="@+id/mTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content”
/>

 class MainActivity : AppCompatActivity() {
     var mTextView: TextView? = null
     override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.activity_main)
          mTextView = findViewById(R.id.mTextView)
          tvName.setText("Hello World")
     }
}

Declarative: – This paradigm is more focused on what rather than how. It allows the user to create an entire application using a single programming language.

Example Program: –

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(text = "Hello World")
        }
    }
}

In the above example programs you can see the difference between both approaches. In the Imperative approach we have created two different files to show “Hello World” on the screen, on the other hand in the Declarative approach we can achieve the same output by calling a single composable function Text(text = “Hello World”). 

Benefits of using Jetpack compose: –

• Less Code:  One of the biggest advantages of using Jetpack Compose is you can create a stunning UI by writing a lot less code than the traditional way. 
• Declarative: As we discussed earlier, Jetpack compose is a Declarative UI approach. This makes it so easy when it comes to building complex UI. Adding data and making UI flexible according to data is so easy in Jetpack to compose
• Powerful: Jetpack Compose comes with a lot of powerful features. For example, Creating a recycler view is unbelievably easy using it, Moreover adding animation to UI is just a matter of seconds and we can use a navigation graph to toggle between Compose screens.
• Speeds up: As we discussed, Jetpack compose allows us to create a more interactive and beautiful UI by writing less code. Which leads to an accelerated overall development process. 
• Performance and App Size: When you use Jetpack compose you will feel that the app size is relatively small. According to Google use of Jetpack Compose saves time and gives better performance than other Android view systems