Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[2021 Vietnam MobileDev Day] - Jetpack Compose_ A declarative UI approach - READY FOR PRODUCTION.pdf

[2021 Vietnam MobileDev Day] - Jetpack Compose_ A declarative UI approach - READY FOR PRODUCTION.pdf

An updated introduction to Jetpack Compose as of August 2021 after the official release of Jetpack Compose v1.0 on July 28th, 2021.

This talk will cover the paradigm-shifting from imperative to a declarative style of programming with JC as well as details of JC to anyone from beginner level.


Toan Tran

August 26, 2021

More Decks by Toan Tran

Other Decks in Programming


  1. JETPACK COMPOSE v1.0 (2021)

  2. Jetpack Compose - A declarative UI Approach Toan Tran HoE

    @GalaxyOne-SovicoGroup Kotlin GDE
  3. “Tell me what you want (And I’ll give you what

    you need)” A Song from The Doobie brothers - 1974
  4. • Toan Tran • [Ex]Vice President, Mobile @Lazada • HoE

    @GalaxyOne-SovicoGroup • Occasional speaker at local events • Google Developer Expert in Kotlin • Find me on social media: me@toan.mobi About me
  5. https://www.facebook.com/androidcafein https://www.facebook.com/kughcmc 30-sec Ads

  6. Agenda

  7. 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) 6. Build something quick with Jetpack Compose - LIVE *showing* CODE Agenda
  8. Declarative vs Imperative

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

  10. Let’s make some instant noodles “Boil water” “Break noodles“ “Pour

    water” “Close the pod” “Wait 3 mins” “Add soups” Step by Step
  11. A imperative program to cook noodle

  12. How about this?

  13. Declarative Paradigm

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

    rather than steps to get there
  15. Jetpack Compose

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

  17. Jetpack Compose 1.0 Release - Release date: July 28th 2021

    - Key offers: - Interoperable: ability to integrate with existing view-based apps - Jetpack integration: Navigation, LiveData, Hilt, etc - Material: Material Design components - List: Lazy loading list - Animation
  18. Inside Jetpack Compose What's New in Jetpack Compose (Android Dev

    Summit '19)
  19. 1. Composable function

  20. 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
  21. Jetpack Compose Architectural Layering (1) Material: Provides Material Design UI

    for Compose: Theming system, styled components, ripple, icons. Foundation: Building blocks like Row, Column, Gestures
  22. Jetpack Compose Architectural Layering (2) UI: UI toolkits (ui-text, ui-graphics),

    Modifier, input handlers, customized UI Runtime: Fundamental runtime components: mutableStateOf, remember, @Composable
  23. Compose Layout Base on 3 main concepts of layout

  24. Compose Layout - Example - Column

  25. Compose Layout - Example - Row

  26. Compose Layout - Example - Box

  27. Come to help

  28. With XML layout? What’s problem?

  29. 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
  30. Jetpack Compose Roadmap https://developer.android.com/jetpack/androidx/compose-roadmap

  31. Fun facts

  32. Remember (Kotlin) Anko?

  33. Facebook Litho library

  34. Immutable state?

  35. Where to start?

  36. https://developer.android.com/jetpack/compose

  37. Kotlinlang Slack group > Compose

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

  39. https://developer.android.com/courses/pathways/compose

  40. https://www.androidcafe.in/


  42. 15 mins LIVE *show* CODING

  43. Thank you!