Era of Declarative UI
Uploaded by
sadman samee tonmoyEra of Declarative UI
Uploaded by
sadman samee tonmoyEra 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
