[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.

Transcript

1. JETPACK COMPOSE v1.0 (2021)
   

   View Slide

2. Jetpack Compose -
   A declarative UI
   Approach
   Toan Tran
   HoE @GalaxyOne-SovicoGroup
   Kotlin GDE
   

   View Slide

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

   View Slide

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
   

   View Slide

5. https://www.facebook.com/androidcafein
   https://www.facebook.com/kughcmc
   30-sec Ads
   

   View Slide

6. Agenda
   

   View Slide

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
   

   View Slide

8. Declarative vs
   Imperative
   

   View Slide

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

   View Slide

10. Let’s make some instant noodles
    “Boil
    water”
    “Break
    noodles“
    “Pour
    water”
    “Close the
    pod”
    “Wait 3
    mins”
    “Add
    soups”
    Step by
    Step
    

    View Slide

11. A imperative program to cook noodle
    

    View Slide

12. How about this?
    

    View Slide

13. Declarative Paradigm
    

    View Slide

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

    View Slide

15. Jetpack Compose
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

19. 1. Composable function
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Compose Layout
    Base on 3 main
    concepts of layout
    

    View Slide

24. Compose Layout - Example - Column
    

    View Slide

25. Compose Layout - Example - Row
    

    View Slide

26. Compose Layout - Example - Box
    

    View Slide

27. Come to help
    

    View Slide

28. With XML layout? What’s problem?
    

    View Slide

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
    

    View Slide

30. Jetpack Compose Roadmap
    https://developer.android.com/jetpack/androidx/compose-roadmap
    

    View Slide

31. Fun facts
    

    View Slide

32. Remember (Kotlin) Anko?
    

    View Slide

33. Facebook Litho library
    

    View Slide

34. Immutable state?
    

    View Slide

35. Where to start?
    

    View Slide

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

    View Slide

37. Kotlinlang Slack group > Compose
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. LET’S BUILD SOMETHING!
    

    View Slide

42. 15 mins
    LIVE *show*
    CODING
    

    View Slide

43. Thank you!
    

    View Slide