Android new UI ToolKit: Jetpack Compose

Slide 1

Slide 1 text

@soulesidibe - Feb 2022 Android new UI ToolKit: Jetpack Compose

Slide 2

Slide 2 text

Agenda • The View System • Jetpack Compose: overview • State management • Modi fi er • Building a Composable(demo) • Beyond android’s use case • Wrap-up

Slide 3

Slide 3 text

The View System • Provides the visual elements on the screen • Buttons, text, animations • Also the tools for the developers • Android Studio UI Editor for xml layouts, Visual layout editor for ConstrainLayout • We almost used Javascript instead of Java 😅

Slide 4

Slide 4 text

The View System

Slide 5

Slide 5 text

The View System

Slide 6

Slide 6 text

The View System • Pros • XML layouts are logic free (databinding lovers… ☠☢⛔⚠) • Layout quali fi ers. (Orientation, screen density, locale, etc) • Cons • Two languages: XML and Java • NPE • Hard to create custom views • Views are stateful

Slide 7

Slide 7 text

And then… • React Native • Flutter • SwiftUI • And developers love them! • 🚀Declarative UI 🚀

Slide 8

Slide 8 text

Declarative UI

Slide 9

Slide 9 text

Declarative UI

Slide 10

Slide 10 text

Why Compose • Build a UI Toolkit with the developers • Unbundle the UI Toolkit from the platform releases • Fewer technology stack(Activity, Fragment, Custom view, etc) • Better state management • Write less code • Be aligned with industry standard

Slide 11

Slide 11 text

The timing • Kotlin (2017) • The new Kotlin compiler • Years of experience building and maintaining a UI Toolkit(since 2007) • Real world implementation of Declarative UI (inspired by React Native, Flutter, etc.)

Slide 12

Slide 12 text

Jetpack Compose

Slide 13

Slide 13 text

Jetpack Compose • Open source • Declarative UI Framework • Takes full advantage of Kotlin • Function based piece of UI • Compose 🤝 View System • Powerful tooling with @Preview • Great documentation

Slide 14

Slide 14 text

Declarative UI Framework

Slide 15

Slide 15 text

Takes full advantage of Kotlin Functions Extension functions Passing functions around Property delegate High order functions Control Flow Strong type system

Slide 16

Slide 16 text

Function based UI Compose special keyword Compose decorator Params: data, events, con f ig Child Composables No class, no inheritance

Slide 17

Slide 17 text

Compose 🤝 View System

Slide 18

Slide 18 text

Compose 🤝 View System

Slide 19

Slide 19 text

Compose 🤝 View System

Slide 20

Slide 20 text

Jetpack Compose View System Jetpack Compose A screen @Composable Multiple screens @Composables Fragments @Composables Custom Views @Composable A Button @Composable

Slide 21

Slide 21 text

State Management

Slide 22

Slide 22 text

State Management

Slide 23

Slide 23 text

State Management

Slide 24

Slide 24 text

State Management

Slide 25

Slide 25 text

State Management

Slide 26

Slide 26 text

State Management

Slide 27

Slide 27 text

State Management

Slide 28

Slide 28 text

State Management Stateless composable Stateful Composable

Slide 29

Slide 29 text

State Hoisting • Do not manipulate state locally • Let the caller provides the state • Inform the caller about events • And let the caller calls back with new data(recomposition)

Slide 30

Slide 30 text

State Management

Slide 31

Slide 31 text

State Management Lifecycle

Slide 32

Slide 32 text

Modi f ier

Slide 33

Slide 33 text

Modi f ier • Decorate a composable • Size, padding • Accessibility • Make the Composable clickable, scrollable, zoomable, etc

Slide 34

Slide 34 text

Modi f ier

Slide 35

Slide 35 text

Modi f ier

Slide 36

Slide 36 text

Modi f ier

Slide 37

Slide 37 text

Type safe modi f ier • Modi fi er only available for a given Composable • weight() is only available for Column and Row • The pattern for your Custom Composable

Slide 38

Slide 38 text

Type safe modi f ier

Slide 39

Slide 39 text

Type safe modi f ier

Slide 40

Slide 40 text

Type safe modi f ier

Slide 41

Slide 41 text

Building a Composable (Demo)

Slide 42

Slide 42 text

Beyond android’s use case

Slide 43

Slide 43 text

Beyond android • Compose for desktop by JetBrains (Desktop App) • Compose Multiplatform (Multiplatform App) • Mosaic by Jake Warthon (console UI) • IOS?

Slide 44

Slide 44 text

Wrap-up

Slide 45

Slide 45 text

Wrap-up • Android dev 💙 Compose • Compose is here to stay • Compose is not perfect(performance issues, material design components) • Compose is production ready • Give it a try 😊

Slide 46

Slide 46 text

Thanks!

Slide 47

Slide 47 text

Links • Doc: https://developer.android.com/jetpack/compose • Android dev channel => https://www.youtube.com/c/AndroidDevelopers/search? query=compose • Maps => https://cloud.google.com/blog/products/maps-platform/compose-maps- sdk-android-now-available • Accompanist => https://google.github.io/accompanist/ • Soulesidibe => https://soulesidibe.medium.com/jetpack-compose-1-0-where-to- start-8275717b1e0