Compose your TRILL - Speaker Deck

Slide 1

Slide 1 text

luca_nicolett COMPOSE YOUR TRILL COMPOSE @ TRILLER

Slide 2

Slide 2 text

/32 luca_nicolett • What is Jetpack Compose • Setup • Target (in our app) • Code comparison • Conclusions COMPOSE YOUR TRILL 2

Slide 3

Slide 3 text

/32 luca_nicolett • Modern UI toolkit • Based on Kotlin (more on this) • Paradigm switch (more on this) • Decoupled from the OS JETPACK COMPOSE 3

Slide 4

Slide 4 text

/32 luca_nicolett • 100% kotlin • Not only a UI toolkit • Compose UI + Compose compiler • @Composable == suspend? KOTLIN 4

Slide 5

Slide 5 text

/32 luca_nicolett • Functional • Pure & side effect - free • Trailing lambda syntax highly used KOTLIN 5

Slide 6

Slide 6 text

/32 luca_nicolett • Declarative API • Declarative vs Imperative • Widget tree with internal state (setText, setVisibility, addChild, setImageBitmap) • Illegal states (2 updates con fl ict in an unexpected way) THINKING DECLARATIVE Imperative:   - put block 1   - put block 2 above   - put block 3 above Declarative:   - A tower with:   - block 1, block 2, block 3 6

Slide 7

Slide 7 text

/32 luca_nicolett • Describe your UI right now • For any value of now • Code independent of previous state THINKING DECLARATIVE 7

Slide 8

Slide 8 text

/32 luca_nicolett THINKING DECLARATIVE SCREEN LIST ITEM ITEM ITEM Events Data SCREEN LIST ITEM ITEM ITEM Events Data 8

Slide 9

Slide 9 text

/32 luca_nicolett SETUP 9

Slide 10

Slide 10 text

/32 luca_nicolett SETUP 10

Slide 11

Slide 11 text

/32 luca_nicolett SETUP 11

Slide 12

Slide 12 text

/32 luca_nicolett TARGET 12

Slide 13

Slide 13 text

/32 luca_nicolett CODE - old 13

Slide 14

Slide 14 text

/32 luca_nicolett CODE - old 14

Slide 15

Slide 15 text

/32 luca_nicolett CODE - old 15

Slide 16

Slide 16 text

/32 luca_nicolett CODE - old 16

Slide 17

Slide 17 text

/32 luca_nicolett CODE - old 17

Slide 18

Slide 18 text

/32 luca_nicolett CODE - old 18

Slide 19

Slide 19 text

/32 luca_nicolett COMPOSE 19

Slide 20

Slide 20 text

/32 luca_nicolett CODE - compose 20

Slide 21

Slide 21 text

/32 luca_nicolett CODE - compose 21

Slide 22

Slide 22 text

/32 luca_nicolett CODE - compose 22

Slide 23

Slide 23 text

/32 luca_nicolett CODE - compose 23

Slide 24

Slide 24 text

/32 luca_nicolett CODE - compose 24

Slide 25

Slide 25 text

/32 luca_nicolett CODE - compose 25

Slide 26

Slide 26 text

/32 luca_nicolett CODE - compose 26

Slide 27

Slide 27 text

/32 luca_nicolett CODE - compose 27

Slide 28

Slide 28 text

/32 luca_nicolett CODE - compose 28

Slide 29

Slide 29 text

/32 luca_nicolett CODE - compose 29

Slide 30

Slide 30 text

/32 luca_nicolett • Worthiness • Speed of development • Learning curve • Have it “approved” CONCLUSIONS 30

Slide 31

Slide 31 text

/32 luca_nicolett • https://developer.android.com/jetpack/compose/mental-model • https://www.youtube.com/watch?v=6BRlI5zfCCk • https://github.com/airbnb/Showkase • https://developer.android.com/jetpack/compose/testing-cheatsheet REFERENCES 31

Slide 32

Slide 32 text

luca_nicolett Q&A