[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)
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/
41. LET’S BUILD SOMETHING!
42. 15 mins LIVE *show* CODING
43. Thank you!