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

A88d9a18fa8d8d5b2b29c5cc3a387931?s=47 Toan Tran
October 31, 2020

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.

A88d9a18fa8d8d5b2b29c5cc3a387931?s=128

Toan Tran

October 31, 2020
Tweet

Transcript

  1. Jetpack Compose - A declarative UI Approach Toan Tran VP,

    Mobile @Lazada | Kotlin GDE
  2. “Tell me what you want (And I’ll give you what

    you need)” A Song from The Doobie brothers - 1974
  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
  4. Agenda

  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
  6. Declarative vs Imperative

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

  8. Let’s make some instant noodles

  9. A imperative program to cook noodle

  10. How about this?

  11. Declarative style to focus on the description of the result

    rather than steps to get there
  12. Jetpack Compose

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

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

    Summit '19)
  15. 1. Composable function

  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
  17. 1. Built-in components Layouts Material Foundation

  18. 1. Built-in components Layouts • ConstraintLayout • Scaffold • Column

    • Row • Box
  19. 1. Built-in components • Box • Canvas • Image •

    LazyColumnFor • LazyRowFor • ScrollableRow • ScrollableColumn • Shape • Text Foundation
  20. 1. Built-in components • AlertDialog • Button • Card •

    Checkbox • FloatingActionButton • ModalDrawerLayout • RadioGroup • Scaffold • Slider • ... Material
  21. Come to help

  22. With XML layout? What’s problem?

  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
  24. Fun facts

  25. Remember (Kotlin) Anko?

  26. Facebook Litho library

  27. Immutable state?

  28. Where to start?

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

  30. Kotlinlang Slack group > Compose

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

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

  33. Thank you!