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.

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!