Molecule: Using Compose for presentation logic

@chris_h_codes
Molecule
Using Compose for presentation logic
Chris Horner

View Slide

Compose. Not Compose UI.

View Slide

Presentation logic?
MV Whatever
Model
Event

View Slide

What does Molecule enable?
@Composable

fun models(events: Flow): Model {

//
Calculate Model here.

}
Why is this interesting?

View Slide

2017

View Slide

2017
RxJava

View Slide

class MyActivity : Activity() {

override fun onCreate(savedInstanceState: Bundle?) {

button.setOnClickListener {

}

}

}
2010

View Slide

class MyActivity : Activity() {

override fun onCreate(savedInstanceState: Bundle?) {

button.setOnClickListener {

object : AsyncTask() {

override fun doInBackground(vararg arg: Void?) {

//
Update "state" somehow?

}

}

}

}

}
2010

View Slide

<>
Observable
Observable
Observable
Observable
The State of Managing State with RxJava
https://youtu.be/0IKHxjkgop4
Jake Wharton
2017

View Slide

2017
Single.just(input)

.flatMap { longRunningOp(it) }

.map { it.asSomethingElse() }

.filter { someCheck(it) }

.subscribe { … }

View Slide

2017
Single.just(input)




.subscribe { … }
val result = longRunningOp(input)

val output = result.asSomethingElse()

return if someCheck(output) output else null

View Slide

2017
Single.just(input)




.subscribeOn(Schedulers.Io)

.observeOn(Schedulers.Main)

.subscribe { … }
val result = longRunningOp(input)

val output = result.asSomethingElse()

return if someCheck(output) output else null

View Slide

Single Maybe Completable
suspend
2017

View Slide

2019
fun map(mapper: (T)
->
R): Flowable
fun flatMapSingle(mapper: (T)
->
SingleSource): Flowable
Mapper
Asynchronous Data Streams with Kotlin Flow
https://youtu.be/tYcqn48SMT8
Roman Elizarov

View Slide

2019
Sync
Async
fun map(mapper: (T)
->
R): Flowable
->
Mapper
Roman Elizarov

View Slide

fun map(mapper: (T)
->
R): Flowable
->
Mapper
2019
fun filter(predicate: (T)
->
Boolean): Flowable
fun …
🤯
Predicate
Sync
Async
Sync
Async
Roman Elizarov
Roman Elizarov

View Slide

flow.map {

}

View Slide

Operator Avoidance
startWith(observable)
startWith(value)
delaySubscription(time)
onStart { emitAll(flow) }
onStart { emit(value) }
onStart { delay(time) }

View Slide

Operator Avoidance
RxJava API surface
Flow API surface

View Slide

Operator Power
val queries: Flowable
sealed interface Model {

object Loading : Model

data class Loaded(

val results: List

): Model

}

View Slide

Operator Power
Mel
val queries: Flowable


data class Loaded(

val results: List

): Model

}

View Slide

Operator Power
queries.switchMap { query
-
>

search(query)

.delaySubscription(300, TimeUnit.MILLISECONDS)

.toObservable()

.startWith { Model.Loading }

}

View Slide

Operator Power
-
>

search(query)


.toObservable()


}
queries.transformLatest { query
->

emit(Model.Loading)

delay(300)

emit(search(query))

}

View Slide

Operator Power
-
>

search(query)


.toObservable()


}
->

emit(Model.Loading)

delay(300)

emit(search(query))

}
1

View Slide

Operator Power
-
>

search(query)


.toObservable()


}
->

emit(Model.Loading)

delay(300)

emit(search(query))

}
2

View Slide

Operator Power
-
>

search(query)


.toObservable()


}
->

emit(Model.Loading)

delay(300)

emit(search(query))

}
3

View Slide

Operator Power
-
>

search(query)


.toObservable()


}
->

emit(Model.Loading)

delay(300)

emit(search(query))

}
1

View Slide

Operator Power
-
>

search(query)


.toObservable()


}
->

emit(Model.Loading)

delay(300)

emit(search(query))

}
2

View Slide

Operator Power
-
>

search(query)


.toObservable()


}
->

emit(Model.Loading)

delay(300)

emit(search(query))

}
3

View Slide

So suspend + Flow wins. End of story?
• suspend is great because we can write imperative code

• Flow has advantages over Rx because it’s powered by coroutines

• It still has many operators to learn

• It’s still a slightly different way of writing code

View Slide

View Slide

->

emit(State.Loading)

delay(300)

emit(search(query))

}

View Slide

queries

.map {
...
}

.transformLatest { query
->

emit(State.Loading)

delay(300)

emit(search(query))

}

.flowOn(
.. .
)

.onEmpty {
...
}

.catch {
.. .
}

.scan(emptyList()) { list, items
->

list + items

.map {
...
}

.zip()

}

.flatMapMerge(concurrency = 4) {
..
.
}

.distinctUntilChanged()

View Slide

What are we doing?
We’re composing a model in response to
events and values changing over time.

View Slide

What if we actually used Compose to
build that model?
Molecule asks the question:
What are we doing?
We’re composing a model in response to
events and values changing over time.

View Slide

Column
Text Row
Column Image
Text Text

View Slide

Column
Text Row
Column Image
Text Text
@Composable

fun UserInterface(model: Model) {

}

View Slide

Column
Text Row
Box Image
Image Icon
@Composable


}

View Slide

Column
Text Row
Image
@Composable


var someState: Int by remember {

mutableStateOf(1)

}

}
Box
Image Icon

View Slide

@Composable


val someState: MutableState = remember {

mutableStateOf(1)

}

}

View Slide

@Composable


val state: State

}
Reactive!

View Slide

@Composable



mutableStateOf(1)

}

}

View Slide

@Composable

fun UserInterface() {


mutableStateOf(1)

}

LaunchedEffect(Unit) {

while (true) {

delay(1_000)

someState
++

}

}

}

View Slide

@Composable



mutableStateOf(1)

}


while (true) {

delay(1_000)

someState
++

}

}

Text(someState.toString())

}

View Slide

@Composable


mutableStateOf(1)

}


while (true) {

delay(1_000)

someState
++

}

}

Text(someState.toString())

}
Presentation logic

View Slide

@Composable

}
Flow Example

View Slide

@Composable

}


data class Loaded(

val results: List

) : Model

}

View Slide

@Composable

fun UserInterface(queries: Flow) {
}

View Slide

@Composable

val models = queries

.onStart { emit("") }

}

View Slide

@Composable



->

emit(Model.Loading)

}

}

View Slide

@Composable



->

emit(Model.Loading)

delay(300)

val results = search(query)

emit(Model.Loaded(results))

}

}

View Slide

e

terface(queries: Flow) {
ls = queries

rt { emit("") }

formLatest { query
->

(Model.Loading)

y(300)

results = search(query)

(Model.Loaded(results))

interface Database {

fun observeDataset(): Flow

}

View Slide

e

terface(queries: Flow) {
ls = queries

rt { emit("") }

formLatest { query
->

(Model.Loading)

y(300)

results = search(query, dataset)

(Model.Loaded(results))

interface Database {

fun observeDataset(): Flow

}

View Slide

@Composable



->

emit(Model.Loading)

delay(300)

val results = search(query, dataset)


}

}

View Slide

@Composable

fun UserInterface(queries: Flow, datasets: Flow) {


->

emit(Model.Loading)

delay(300)



}

}

View Slide

@Composable

combineTransform(queries, datasets)


->

emit(Model.Loading)

delay(300)



}

}
?

View Slide

@Composable

combineTransformLatest(queries, dataset)


->

emit(Model.Loading)

delay(300)



}

}
?

View Slide

@Composable


val models = datasets.flatMapLatest { dataset
->

queries


-
>

emit(Model.Loading)

delay(300)



}

}

}

View Slide

What if we used Compose?

View Slide

@Composable


val models = datasets.flatMapLatest { dataset
->

queries


-
>

emit(Model.Loading)

delay(300)



}

}

}
What if we used Compose?

View Slide

@Composable

val query by queries.collectAsState("")

val models = dataset
s
.flatMapLatest { dataset
->

queries


-
>

emit(Model.Loading)

delay(300)



}

}

}

View Slide

@Composable


val dataset by datasets.collectAsState(InitialSet)

s
->

queries


-
>

emit(Model.Loading)

delay(300)



}

}

}

View Slide

@Composable



var model by remember { mutableStateOf(Model.Loaded(emptyList())) }

s
->

queries


-
>

emit(Model.Loading)

delay(300)



}

}

}

View Slide

@Composable




s
->

queries


-
>

emit(Model.Loading)

delay(300)


emit(Model.Loaded(results
)
)

}

}

}

View Slide

@Composable




LaunchedEffect(query, dataset) {

emit(Model.Loading)

delay(300)


emit(Model.Loaded(results
)
)

}

}

View Slide

@Composable





model = Model.Loading

delay(300)


model = Model.Loaded(results)

}

}
Still reactive!

View Slide

@Composable

}
• flatMap

• scan

• debounce

• zip

View Slide

@Composable

}
• remember

• LaunchedEffect

• collectAsState

• mutableStateOf

View Slide

@Composable

}
• remember

• LaunchedEffect

• collectAsState

• mutableStateOf

• if, else, when, for, while

View Slide

@Composable






delay(300)



}

}

View Slide

@Composable





model =

Model.Loadin
g

delay(300)


model =

Model.Loaded(results)

}

Column {

// .. .

}

}

View Slide

@Composable






delay(300)



}

Column {

// .. .

}

}
Presentation logic

View Slide

Why do we need Molecule?

View Slide

Why do we need Molecule?
presentation-logic
ui
@Composable
StateFlow
junit

View Slide

How do we use it?

View Slide

How do we use it?
apply plugin: 'app.cash.molecule'

View Slide

How do we use it?
Flow StateFlow

View Slide

How do we use it?
val scope = CoroutineScope(AndroidUiDispatcher.Main)

View Slide

How do we use it?

val models: StateFlow = scope.launchMolecule() {

}

View Slide

How do we use it?


var model by remember { mutableStateOf(Model(A)) }

}

View Slide





model = loadModelB()

}

}

View Slide






}

model

}

View Slide






}

model

}
1

View Slide






}

model

}
2

View Slide






}

model

}
3
A
Emissions

View Slide






}

model

}
4
A
Emissions

View Slide






}

model

}
5
A
Emissions

View Slide

6
A B





}

model

}
Emissions

View Slide






model = Model(C)

}

model

}
A B
Emissions
?

View Slide






model = Model(C)

}

model

}
A B C
Emissions

View Slide



model

}
• Some State is invalidated

• A MonotonicFrameClock ticks
For a new emission, two things must happen
Emissions

View Slide






model = Model(C)

}

model

}
A B C
Emissions

View Slide

A B C
Emissions





model = Model(C)

}

model

}

View Slide

A B C
Frame tick
Emissions





model = Model(C)

}

model

}

View Slide

A B C
Emissions





model = Model(C)

}

model

}

View Slide

A B C
Emissions
C





model = Model(C)

}

model

}

View Slide

A B C
Emissions





model = Model(C)

}

model

}

View Slide






model = Model(C)

}

model

}

View Slide


val models: StateFlow = scope.launchMolecule(

clock = RecompositionClock.ContextClock

) {




model = Model(C)

}

model

}

View Slide

val scope = CoroutineScope
(
)



) {




model = Model(C)

}

model

}

View Slide

fun unitTest() = runBlocking {

val scope = this



) {




model = Model(C)

}

model

}

View Slide

fun unitTest() = runBlocking {

val scope = this


clock = RecompositionClock.Immediate

) {




model = Model(C)

}

model

}

View Slide

ContextClock
Immediate
• Emissions match Android’s built in frame clock

• Need to control emissions using BroadcastFrameClock

• Unit tests requiring time manipulation
Choosing a RecompositionClock
• Frames tick automatically when snapshot state changes

• Unit tests that don’t require time manipulation

View Slide

You only get one emission per
frame

View Slide

Realistic example

View Slide

Realistic example
class Presenter {

@Composable


//

}

}

View Slide

class SearchPresenter : Presenter {

@Composable


//

}

}
Realistic example

View Slide

sealed interface Event {

data class EnterText(val text: String) : Event

}



data class Loaded(

val results: List = emptyList()

) : Model

}

View Slide

class SearchPresenter : Presenter {

@Composable


//

}

}
Realistic example

View Slide

class SearchPresenter(

val service: Service

) : Presenter {

@Composable


//

}

}
Realistic example

View Slide



) : Presenter {

@Composable


val modelState = remember { mutableStateOf(Model.Loaded()) }

}

}
Realistic example

View Slide



) : Presenter {

@Composable


val modelState: MutableState = remember { mutableStateOf(Mod
}

}
Realistic example

View Slide



) : Presenter {

@Composable



}

}
Realistic example

View Slide



) : Presenter {

@Composable



return modelState.value

}

}
Realistic example

View Slide



) : Presenter {

@Composable




events.collect { event
->

when (event) {

...

}

}

}


}

}

View Slide



) : Presenter {

@Composable



var query by remember { mutableStateOf("") }


->

when (event) {

EnterText
->
query = event.text

}

}

}


}

View Slide

@Composable



var query by remember { mutableStateOf("") }


->

when (event) {

EnterText
->
query = event.text

}

}

}

LaunchedEffect(query) {

runSearch(query, modelState)

}


}

View Slide

private suspend fun runSearch(

query: String,

state: MutableState,

) {

state.value = Model.Loading

val results = service.search(query)

state.value = Model.Loaded(results)

}
LaunchedEffect(query) {

runSearch(query, modelState)

}

View Slide

Writing a test
cashapp/turbine

View Slide

cashapp/turbine
Writing a test
flowOf("one", "two").test {

assertEquals("one", awaitItem())

assertEquals("two", awaitItem())

awaitComplete()

}

View Slide

Writing a test
@Test

fun `entering text runs search`() = runBlocking {

}

View Slide

Writing a test
@Test


val events = MutableSharedFlow(replay = 1)

}

View Slide

Writing a test
@Test



launchMolecule(RecompositionClock.Immediate) {

presenter.models(events)

}.test {

}

}

View Slide

Writing a test
@Test





}.test {

assertThat(awaitItem()).isEqualTo(Model.Loading)

}

}

View Slide

Writing a test
@Test





}.test {


events.emit(Event.EnterText("query"))

fakeService.setResults(
..
.
)

}

}

View Slide

Writing a test
@Test





}.test {


events.emit(Event.EnterText("query"))

..
.
)

assertThat(awaitItem()).isEqualTo(Model.Loaded(
..
.
))

}

}

View Slide

Writing a test
@Test


presenter.test {


sendEvent(Event.EnterText("query"))

..
.
)

assertThat(awaitItem()).isEqualTo(Model.Loaded(
..
.
))

}

}

View Slide

Takeaways

View Slide

Takeaways
• Compose manages a tree of nodes - it doesn’t have to be UI

• Managing state involves tying together streams

• Compose can do to streams what suspend did to Single

• State is reactive. Think of it like a stream

• There’s still a learning curve, but it’s less steep compared to Rx/Flow

• Tricks you’ve learnt in Compose UI work in Molecule too

View Slide

Interested in more?
Building StateFlows with Jetpack Compose
droidcon.com/2022/09/29/building-stateflows-in-android-with-jetpack-compose
Mohit Sarveiya
Demystifying Molecule
droidcon.com/2022/09/29/demystifying-molecule-running-your-own-compositions-for-fun-and-profit
Bill Phillips & Ash Davies
Opening the Shutter on Snapshots
droidcon.com/2022/09/29/opening-the-shutter-on-snapshots
Zach Klippenstein

View Slide

chris_h_codes
github.com/cashapp/molecule
Molecule
Using Compose for presentation logic

View Slide

Molecule: Using Compose for presentation logic

Molecule: Using Compose for presentation logic

Chris Horner

More Decks by Chris Horner

Other Decks in Technology

Featured

Transcript