Slide 1

Slide 1 text

Jetpack Compose - A declarative UI Approach Toan Tran VP, Mobile @Lazada | Kotlin GDE

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

● 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

Slide 4

Slide 4 text

Agenda

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Declarative vs Imperative

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Let’s make some instant noodles

Slide 9

Slide 9 text

A imperative program to cook noodle

Slide 10

Slide 10 text

How about this?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Jetpack Compose

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

1. Composable function

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

1. Built-in components Layouts Material Foundation

Slide 18

Slide 18 text

1. Built-in components Layouts ● ConstraintLayout ● Scaffold ● Column ● Row ● Box

Slide 19

Slide 19 text

1. Built-in components ● Box ● Canvas ● Image ● LazyColumnFor ● LazyRowFor ● ScrollableRow ● ScrollableColumn ● Shape ● Text Foundation

Slide 20

Slide 20 text

1. Built-in components ● AlertDialog ● Button ● Card ● Checkbox ● FloatingActionButton ● ModalDrawerLayout ● RadioGroup ● Scaffold ● Slider ● ... Material

Slide 21

Slide 21 text

Come to help

Slide 22

Slide 22 text

With XML layout? What’s problem?

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Fun facts

Slide 25

Slide 25 text

Remember (Kotlin) Anko?

Slide 26

Slide 26 text

Facebook Litho library

Slide 27

Slide 27 text

Immutable state?

Slide 28

Slide 28 text

Where to start?

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Kotlinlang Slack group > Compose

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

https://android.googlesource.com/platform/frameworks/support/+/refs/heads/an droidx-master-dev/compose/

Slide 33

Slide 33 text

Thank you!