Modern app development with Jetpack Compose.pptx

Modern app development with
Jetpack Compose
Md Shamsul Arafin Mahtab
Software Engineer (Android), Therap Services

Why Adopt Compose
● Less Code
● Declarative API
● Faster Development
● Powerful
“For the same Button class it [the code] was 10x
of magnitude smaller.” (Twitter)
“Significant reduction for any screen built with a
RecyclerView.” (Monzo)
“Reading the code for complicated components
is easier.” (Square)

Why Adopt Compose
● Less Code
● Declarative API
● Powerful
“Theming layer is vastly more intuitive and
legible.” (Twitter)
“UI components that were stateless, easy to use
and maintain, and intuitive to
implement/extend/customize.” (Twitter)

Why Adopt Compose
● Less Code
● Declarative API
● Powerful
“We didn’t have to think about things like light
and dark mode.” (Cuvva)
“Previews in Android Studio have been a big
time saver.” (Square)

Why Adopt Compose
● Less Code
● Declarative API
● Powerful
“Animations are so easy to add.” (Monzo)
“Accessibility apis have been improved.”
(Square)

What’s wrong with
Traditional Android View System?

Traditional Android View System
Updating UI
(button.setBackground(Red))

Result after update

Again updating UI
(root.removeChild(View))

These methods change the internal state of the widget.

The declarative programming paradigm

● All Composable functions must have
@Composable annotation; this
annotation informs the Compose
compiler that this function is intended to
convert data into UI.
● The function doesn't return anything.
● This function is fast, idempotent, and
free of side-effects.
A compose function

The declarative widgets
1. Widgets are relatively stateless
2. They do not expose any setter or getter functions
3. Widget are not exposed as objects
4. Composables are responsible for transforming the current application state into a UI
every time the observable data updates

A compose app example
Scaffold
Currencies
Timeline
Column
CurrencyPicker
Spacer
Spacer
Spacer
Box
CurrencyPicker
Icon
TextField
Dropdown
TopAppBar
BottomBar
Navigation Converter
TextField
Dropdown
Base
Current
1
USD

Recomposition
Scaffold
Currencies
Timeline
CurrencyPicker
Spacer
Spacer
Spacer
Box Icon
TextField
Dropdown
TopAppBar
BottomBar
Dropdown
Base
Current
1
USD
85.513
BDT
Navigation Converter Column
CurrencyPicker
TextField

Things to be aware of
1. Composable functions can execute in any order
2. Composable functions can run in parallel
3. Recomposition skips as much as possible
4. Recomposition is optimistic
5. Composable functions might run quite frequently

State and composition
Initial State Value State Value Changes
Compose UI
Initial Composition Recomposition

Use of remember and rememberSaveable
1. remember composables stores single objects in memory by composable functions,
retain state across recomposition.
2. rememberSaveable same as remember, except retain states across configuration
changes.

Other supported types of State
1. LiveData
2. Flow
3. RxJava2
These observable types are converted to State<T> before reading it to Compose.

is a pattern of moving state to a composable's
caller to make a composable stateless.
State Hoisting
➔ value: T: the current value to display
➔ onValueChange: (T) -> Unit: an event
that requests the value to change, where
T is the proposed new value

State Management
Depending on the complexity of the composable, these are the alternatives to consider:
● Composables for simple UI element state management.
● State holders for complex UI element state management. They own UI elements' state and UI
logic.
● Architecture Components ViewModels as a special type of state holder in charge of providing
access to the business logic and the screen or UI state.

Use of Key
Recomposition (new
item added to top)
Calling a composable multiple times with key will help
to identify each composition distinct.

Use of Stable
Annotating the type with @Stable to allow Compose to favor smart recompositions if Compose
is not able to infer the stability of a type.

Modifiers
to decorate or augment a composable.
● Change the composable's size, layout, behavior, and appearance
● Add information, like accessibility labels
● Process user input
● Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable

Effects and Side-effects in Compose
1. A side-effect is a change to the state
of the app that happens outside the
scope of a composable function.
2. An effect is a composable function
that doesn't emit UI and causes side
effects to run when a composition
completes.
Effect {
Side Effect
}
Called from a controlled environment
that is aware of the lifecycle of the
composable.

LaunchedEffect
To call suspend functions safely from inside a composable,
LaunchedEffect composable to use.
Example: Showing error message on a Snackbar if a UI state
contains an error.
rememberCoroutineScope
To launch a coroutine outside of a composable, but
scoped so that it will be automatically canceled
once it leaves the composition.
Example: Showing a Snackbar when the user taps.
DisposableEffect
Effects that need to cleaned up after keys change or
the composables leaves the composition.
@Composable
fun HomeScreen(key: Key) {
DisposableEffect(key) {
val observer = Observer { }
addObserver(observer)
onDispose {
removeObserver(observer)
}
}
}
rememberUpdatedState
Capture a value in the effect
that, while recomposition,
the effect will not restart.
Example: Splash Screen.
SideEffect
To share Compose state
with objects not managed
by compose, SideEffect
composable to use.
produceState
Convert non-Compose state
into Compose state.
Example: Loading network
image and convert it to
State object.
@Composable
fun loadNetworkImage(
url: String,
imageRepository: ImageRepository
): State<Result<Image>> {
return
produceState<Result<Image>> {
//TODO }
}

Phases of Android View System
Composition Layout Drawing
Measurement Placement

Compose Architecture Layering
Runtime UI Foundation Material
Compose is created from a number of modules which are assembled together to form a complete
stack
Each layer is built upon the lower levels, combining functionality to create higher level components.

Use of CompositionLocal
● CompositionLocal is a tool for passing
data down through the Composition
implicitly.
● It is what the Material theme uses under
the hood.
● MaterialTheme is an object that provides
three CompositionLocal instances--
colors, typography and shapes

Modern app development with Jetpack Compose.pptx

In this document