Devfest GDG Hanoi 2020 - Jetpack Compose - A declarative UI Approach

This talk walks through the idea of Jetpack compose with its key concepts to help build the UI of Android in a declarative way. It also helps link with other similar toolkits available in the market and provided additional resources to get started with JP compose.

Transcript

1. Jetpack Compose -
   A declarative UI
   Approach
   Toan Tran
   VP, Mobile @Lazada |
   Kotlin GDE
   

   View Slide

2. “Tell me what you want (And
   I’ll give you what you
   need)”
   A Song from The Doobie
   brothers - 1974
   

   View Slide

3. ● Toan Tran
   ● Vice President, Mobile @Lazada
   ● Occasional speaker at local events
   ● Google Developer Expert in Kotlin
   ● Father, farmer, shipper
   ● Find me on social media: me@toan.mobi
   About me
   

   View Slide

4. Agenda
   

   View Slide

5. 1. Declarative vs Imperative
   2. What is Jetpack compose?
   3. How Jetpack Compose can help?
   4. What's fun about it?
   5. What's for me? (key takeaways)
   Agenda
   

   View Slide

6. Declarative vs
   Imperative
   

   View Slide

7. A analogy
   https://www.reddit.com/r/ProgrammerHumor/comments/davaxp/an_analogy_to_imperative_vs_declarative/
   

   View Slide

8. Let’s make some instant noodles
   

   View Slide

9. A imperative program to cook noodle
   

   View Slide

10. How about this?
    

    View Slide

11. Declarative style to focus on the description of the
    result rather than steps to get there
    

    View Slide

12. Jetpack Compose
    

    View Slide

13. From website
    https://developer.android.com/jetpack/compose
    

    View Slide

14. Inside Jetpack Compose
    What's New in Jetpack Compose (Android Dev Summit '19)
    

    View Slide

15. 1. Composable function
    

    View Slide

16. 1. Just a function
    2. Take inputs and decides how UIs are
    showed.
    3. Convert data state into view state
    4. Can call other composable functions
    or being called in other composable
    functions.
    1. Composable function
    

    View Slide

17. 1. Built-in components
    Layouts Material
    Foundation
    

    View Slide

18. 1. Built-in components
    Layouts
    ● ConstraintLayout
    ● Scaffold
    ● Column
    ● Row
    ● Box
    

    View Slide

19. 1. Built-in components
    ● Box
    ● Canvas
    ● Image
    ● LazyColumnFor
    ● LazyRowFor
    ● ScrollableRow
    ● ScrollableColumn
    ● Shape
    ● Text
    Foundation
    

    View Slide

20. 1. Built-in components
    ● AlertDialog
    ● Button
    ● Card
    ● Checkbox
    ● FloatingActionButton
    ● ModalDrawerLayout
    ● RadioGroup
    ● Scaffold
    ● Slider
    ● ...
    Material
    

    View Slide

21. Come to help
    

    View Slide

22. With XML layout? What’s problem?
    

    View Slide

23. 1. No more findViewById
    2. Layout code is code (clean? reusable?
    maintainable? testable?)
    3. Kotlin first || Kotlin idiomatic
    4. Enable data oriented architecture
    Problems solved
    

    View Slide

24. Fun facts
    

    View Slide

25. Remember (Kotlin) Anko?
    

    View Slide

26. Facebook Litho library
    

    View Slide

27. Immutable state?
    

    View Slide

28. Where to start?
    

    View Slide

29. https://developer.android.com/jetpack/compose/tutorial
    

    View Slide

30. Kotlinlang Slack group > Compose
    

    View Slide

31. https://github.com/android/compose-samples
    

    View Slide

32. https://android.googlesource.com/platform/frameworks/support/+/refs/heads/an
    droidx-master-dev/compose/
    

    View Slide

33. Thank you!
    

    View Slide