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. “Tell me what you want (And I’ll give you what

    you need)” A Song from The Doobie brothers - 1974
  2. • 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: [email protected] About me
  3. 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
  4. Let’s make some instant noodles “Boil water” “Break noodles“ “Pour

    water” “Close the pod” “Wait 3 mins” “Add soups” Step by Step
  5. 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
  6. 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
  7. 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
  8. Jetpack Compose Architectural Layering (2) UI: UI toolkits (ui-text, ui-graphics),

    Modifier, input handlers, customized UI Runtime: Fundamental runtime components: mutableStateOf, remember, @Composable
  9. 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