Era of Declarative UI

With Kotlin
 Hi !
I am Sadman Samee
Find me at SadmanSamee.blog

2
 Contents

What?
1 What declarative UI is about

Why?
2 Why declarative UI is a big thing now.

How?
3 How kotlin is relevant to declarative UI

3
What?
The declarative UI language speaks the language of
logic itself, without describing the control flow.

4
Imperative
vs
Declarative

5
Imperative

You tell what you want,

step by step.
Declarative

You describe what you want,

but not necessarily how you
get it.
 Imperative
● Open the rice cooker
● Put rice and water concurrently
● Press “Cook” button
● Runs an Async call, wait for it to finish
● When finished serve it to table
● Eat

8
 Declarative
● A table with
○ Meal
■ Cooked rice

9
Why?

10
 Why?
Faster Cleaner and
Less Coding Development optimized
Less code to test, You don’t have to Cleaner, and more
have bug, maintain, do it step by step, testable code , IF
and extend. so faster done right!
development.

11
How?

12
Coming from imperative background...
 Imperative way

● You declare each component of each view.

● Then you tell which view to show or hide based on
your logic.
● To change the view you’ll have to tell yourself what
to do when to do and how to do.

15
 Declarative way

● You define each view.

● You defines states.
● Based on your states you describe what view to load.

16
Google launches Jetpack Compose!
YES you can write UI with Kotlin!
 Jetpack compose?

● A modern reactive style UI toolkit, which takes the

advantages of Kotlin.
● Integrates seamlessly with existing code.
● Inspired by/similar to Flutter, SwiftUI, React
● Improves UI reusability
● Intuitive, describe your UI and compose takes care of
the rest as state changes.

18
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Text( "Hello world!" )
}
}
}

19
@Composable
fun helloWorld() {
Text(text = "Hello World" )
}

Composable functions can only be called from another

Composable function.

20
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
helloWorld()
}
}
}

21
No more findViewById()
No more .XML file
Now what about Architecture?
MVVM (Recommended)
MVVM with LiveData
And We shall follow it.
Any questions?
27
 Resources

● https://developer.android.com/jetpack/compose
● https://www.raywenderlich.com/7032631-jetpack-compose-tutorial-for-android-getting-st
arted
● https://blog.mindorks.com/using-jetpack-compose-to-build-ui-in-android
● https://codelabs.developers.google.com/codelabs/jetpack-compose-basics/#0
● https://medium.com/@kushaldave2011/jetpack-compose-with-mvvm-5c8b0ad00e50
● https://proandroiddev.com/playing-with-jetpack-compose-dev-1-be992c6f8915
● https://github.com/Foso/Jetpack-Compose-Playground

28
29