Scribd Logo
Upload

Welcome to Scribd!

  • 372 views

    Era of Declarative UI

    Uploaded by

    sadman samee tonmoy
    Declarative UI with Kotlin, How Kotlin is relevant on making UI with Jetpack Compose, How Declarative UI is solving current complex UI states.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Era of Declarative UI

    Uploaded by

    sadman samee tonmoy
    372 views29 pages
    Declarative UI with Kotlin, How Kotlin is relevant on making UI with Jetpack Compose, How Declarative UI is solving current complex UI states.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Declarative UI with Kotlin, How Kotlin is relevant on making UI with Jetpack Compose, How Declarative UI is solving current complex UI states.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    372 views29 pages

    Era of Declarative UI

    Uploaded by

    sadman samee tonmoy
    Declarative UI with Kotlin, How Kotlin is relevant on making UI with Jetpack Compose, How Declarative UI is solving current complex UI states.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 29

    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

    You might also like