Droidcon NYC: Demystifying Molecule

Demystifying Molecule
Running Your Own Compositions
for Fun and Profit
Ash Davies
Senior Android Developer
Android / Kotlin GDE Berlin
Bill Phillips
Staff Android Engineer
Cash App
@askashdavies
@billjings
Droidcon NYC - Sep 22’ 󰑔 😷

View Slide

Who We Are
Ash Davies 󰏅 󰎲
Android & Kotlin GDE
Snapp Mobile GmbH
Thought about writing a book
at some point…
Bill Phillips 󰑔
Uncredentialed opinionated person
● Cash App, SF
● Contributor to Molecule
● Rx To Coroutines Concepts series
● Wrote a book ages ago (Big Nerd Ranch
Guide To Android Programming)

View Slide

View Slide

A Brief Introduction
Compose UI
@askashdavies
@billjings

View Slide

@Composable
private fun LoginInputView(
username: String,
password: String,
onSubmit: ()->Unit,
) {
Column(modifier = Modifier.padding(all = 48.dp)) {
Text(style = cursiveTextStyle, text = "Login")
RhythmSpacer()
LabeledTextField(text = username, hidden = false, label = "Username")
RhythmSpacer()
LabeledTextField(text = password, hidden = true, label = "Password")
RhythmSpacer()
TextButton(onSubmit, "Login")
}
}

View Slide

@Composable
username: String,
password: String,
onSubmit: ()->Unit,
) {
RhythmSpacer()
RhythmSpacer()
RhythmSpacer()
}
}
“billjings”
“12345”

View Slide

@Composable
username: String,
password: String,
onSubmit: ()->Unit,
) {
RhythmSpacer()
RhythmSpacer()
RhythmSpacer()
}
}
“ashdavies”
“12345”

View Slide

@Composable
username: String,
password: String,
onSubmit: ()->Unit,
) {
RhythmSpacer()
RhythmSpacer()
RhythmSpacer()
}
}

View Slide

@Composable
username: String,
password: String,
onSubmit: ()->Unit,
) {
RhythmSpacer()
val currentUsername = remember { mutableStateOf(username) }
val currentPassword = remember { mutableStateOf(password) }
RhythmSpacer()
RhythmSpacer()
}
}

View Slide

@Composable
username: String,
password: String,
onSubmit: ()->Unit,
) {
RhythmSpacer()
LabeledTextField(state = currentUsername, hidden = false, label = "Username")
RhythmSpacer()
LabeledTextField(state = currentPassword, hidden = true, label = "Password")
RhythmSpacer()
}
}

View Slide

@Composable
username: String,
password: String,
onSubmit: (String, String)->Unit,
) {
RhythmSpacer()
LabeledTextField(state = currentUsername, hidden = false, label = "Username")
RhythmSpacer()
LabeledTextField(state = currentPassword, hidden = true, label = "Password")
RhythmSpacer()
TextButton({ onSubmit(currentUsername.value, currentPassword.value)}, "Login")
}
}

View Slide

View Slide

@Composable
private fun LoginView(
sessionService: SessionService,
goTo: (Screen) *> Unit,
) {
val username = remember { mutableStateOf("") }
val password = remember { mutableStateOf("") }
var click by remember { mutableStateOf(null) }
if (click *= null) {
LoginInputView(username, password, onSubmit = { click = (click *: 0) + 1 })
} else {
LaunchedEffect(click) {
when (val result = sessionService.login(username.value, password.value)) {
LoginResult.Success *> goTo(LoggedInScreen(username.value))
is LoginResult.Failure *>
goTo(ErrorScreen(result.throwable.message *: "Failed to login"))
}
}
ProgressView()
}
}

View Slide

@Composable
) {
} else {
}
}
ProgressView()
}
}
Can’t validate ANYTHING

View Slide

@Composable
) {
} else {
}
}
ProgressView()
}
}
Can’t validate ANYTHING
Without validating EVERYTHING

View Slide

sealed class LoginUiModel {
object Loading : LoginUiModel()
object Content: LoginUiModel()
}
sealed class LoginUiEvent {
data class Submit(val username: String, val password: String): LoginUiEvent()
}

View Slide

@Composable
private fun LoginView(model: LoginUiModel, onEvent: (LoginUiEvent)*>Unit) {
when (model) {
is LoginUiModel.Loading *> ProgressView()
is LoginUiModel.Content *> {
LoginInputView(onSubmit = { login ->
onEvent(LoginUiEvent.Submit(login.username, login.password) )
})
}
}
}

View Slide

class LoginPresenter(
private val sessionService: SessionService,
private val goTo: (Screen)*>Unit,
) {
*/ implement some business logic here
}

View Slide

View Slide

Molecular Motivation
@askashdavies
@billjings

View Slide

@Suppress("DEPRECATION")
class CallbackLoginPresenter(
private val service: SessionService,
private val goTo: (Screen) *> Unit,
) {
var onModel: (LoginUiModel) *> Unit = {}
var task: AsyncTask? = null
fun start() {
onModel(Content)
}
fun stop() {
task*.cancel(true)
}
fun onEvent(event: LoginUiEvent) {
when (event) {
is Submit *> task = LoginAsyncTask()
.also { it.execute(event) }
}
}
**.
}

View Slide

@Suppress("DEPRECATION")
class CallbackLoginPresenter(
private val service: SessionService,
) {
**.
inner class LoginAsyncTask : AsyncTask() {
private var username: String = ""
override fun doInBackground(vararg events: Submit?): LoginResult {
val event = events[0]*!
username = event.username
return runBlocking { service.login(event.username, event.password) }
}
override fun onPostExecute(result: LoginResult?) {
when (result) {
is Success *> goTo(LoggedInScreen(username))
is Failure *> goTo(ErrorScreen(result.throwable*.message *: ""))
else *> {}
}
}
}
}

View Slide

Reactive Programming
RxJava
@askashdavies
@billjings
RxJava in 2022? Srsly?
● Reactive Pipelines (Push Updates)
● Explicit thread handling
● Inline error-handling
● Lifecycle awareness

View Slide

View Slide

class RxLoginPresenter(val service: SessionService, val goTo: (Screen) *> Unit) {
fun present(events: Observable): Observable = events.flatMap { event *>
when (event) {
is Submit *> service.loginSingle(event.username, event.password).toObservable().map { result *>
when (result) {
is Failure *> goTo(ErrorScreen(result.throwable*.message *: "Something went wrong"))
is Success *> goTo(LoggedInScreen(event.username))
}
Loading
}.startWith(Loading)
}
}.startWith(LoginUiModel.Content)
}

View Slide

Observable
.fromIterable(resourceDraft.getResources())
.flatMap(resourceServiceApiClient*:createUploadContainer)
.zipWith(Observable.fromIterable(resourceDraft.getResources()), Pair*:create)
.flatMap(uploadResources())
.toList()
.toObservable()
.flatMapMaybe(resourceCache.getResourceCachedItem())
.defaultIfEmpty(Resource.getDefaultItem())
.flatMap(postResource(resourceId, resourceDraft.getText(), currentUser, getIntent()))
.observeOn(AndroidSchedulers.mainThread())
.subscribeOn(Schedulers.io())
.subscribe(
resource *> repository.setResource(resourceId, resource, provisionalResourceId),
resourceUploadError(resourceId, resourceDraft, provisionalResourceId)
);
Well that escalated quickly...

View Slide

kotlin.coroutines
Imperative Strikes Back
@askashdavies
@billjings
● Native Library
● Less Yoda code (startWith)
● suspend fun rules
● Observable -> Flow

View Slide

class CoLoginPresenter(
private val sessionService: SessionService,
) {
fun present(events: Flow): Flow = flow {
emit(LoginUiModel.Content)
val loginEvent = events.filterIsInstance().first()
emit(LoginUiModel.Loading)
val result = sessionService.login(loginEvent.username, loginEvent.password)
when (result) {
is LoginResult.Success *> goTo(LoggedInScreen(loginEvent.username))
is LoginResult.Failure *> goTo(ErrorScreen(result.throwable*.message *: "Hmm"))
}
}
}

View Slide

class BigCombinePresenter(
private val connectivity: ConnectivityManager,
private val session: SessionService,
) {
suspend fun present(events: Flow, emit: (LoginUiModel) *> Unit) {
combine(connectivity.isActive(), session.sessionStatus(), events) { isActive, status, event *>
if (isActive) {
emit(LoginUiModel.Content)
val loginEvent = events.filterIsInstance().first()
emit(LoginUiModel.Loading)
if (status *= SessionStatus.Active) {
/** **. */

View Slide

Compose != Compose UI
Kotti knows it’s true, and so do you
Kotti
@askashdavies
@billjings

View Slide

Compose...?
The Last Framework?
@askashdavies
@billjings
● Can consume flows
● Compositional state (no more
ever-expanding combines!)
● Declarative job management with
LaunchedEffect

View Slide

@Composable
fun UiModel(events: Flow): LoginUiModel {
var login by remember { mutableStateOf(null) }
LaunchedEffect(events) {
events.filterIsInstance().collect {
login = it
}
}
return if (login *= null) {
LaunchedEffect(login) {
when (val result = sessionService.login(login*!.username, login*!.password)) {
Success *> goTo(LoggedInScreen(login*!.username))
is Failure *> goTo(ErrorScreen(result.throwable.message *: "Failed to login"))
}
}
Loading
} else {
Content
}
}

View Slide

But how?
@askashdavies
@billjings
● How do we test it?
● How do we fit it into our
architecture?

View Slide

Molecule: Turning
Compositions Into Flows
@askashdavies
@billjings

View Slide

View Slide

fun integersFlow() = flow {
emit(0)
for (i in 1*.5) {
delay(1000)
emit(i)
}
}

View Slide

fun integersFlow() = flow {
emit(0)
for (i in 1*.5) {
delay(1000)
emit(i)
}
}
@Composable
fun integersComposable(): Int {
var output by remember {
mutableStateOf(0)
}
LaunchedEffect(Unit) {
for (i in 1*.5) {
delay(1000)
output = i
}
}
return output
}

View Slide

View Slide

val recomposer = Recomposer(coroutineContext)

View Slide

val composition = Composition(applier, compositionContext)

View Slide

val composition = Composition(applier, recomposer)

View Slide

val composition = Composition(NoOpApplier, recomposer)

View Slide

launch(start = UNDISPATCHED) {
recomposer.runRecomposeAndApplyChanges()
}

View Slide

}
val snapshotHandle = Snapshot.registerGlobalWriteObserver {
Snapshot.sendApplyNotifications()
}

View Slide

}
val sendApplyNotification = Channel(CONFLATED)
launch {
for (notification in sendApplyNotification) {
}
}
}

View Slide

}
launch {
}
}
sendApplyNotification.trySend(Unit)
}

View Slide

}
launch {
}
}
}
composition.setContent {
val output = content()
}

View Slide

}
launch {
}
}
}
callback(output)
}

View Slide

}
launch {
}
}
}
callback(output)
}
coroutineContext.job.invokeOnCompletion {
composition.dispose()
snapshotHandle.dispose()
}

View Slide

}
launch {
}
}
}
callback(output)
}
}
That’s Molecule!

View Slide

}
launch {
}
}
}
callback(output)
}
}
For this to recompose, two things must happen:

View Slide

}
launch {
}
}
}
callback(output)
}
}
1. content() must be dirty (e.g. new snapshot
state)

View Slide

}
launch {
}
}
}
callback(output)
}
}
state)
2. Frame clock must be ticked

View Slide

}
launch {
}
}
}
callback(output)
}
}
Must have a frame
clock
state)
2. Frame clock must be ticked

View Slide

fun moleculeFlow(
clock: RecompositionClock,
body: @Composable () *> T,
): Flow
fun CoroutineScope.launchMolecule(
clock: RecompositionClock,
body: @Composable () *> T,
): StateFlow

View Slide

Turbine
github.com/cashapp/turbine
flowOf("one", "two").test {
assertEquals("one", awaitItem())
assertEquals("two", awaitItem())
awaitComplete()
}
@askashdavies
@billjings

View Slide

Pros/cons
Composables
● “Are” a StateFlow
● Composable state
Flows
● Defined number of items
● Meaning is (mostly) not contextual

View Slide

@Test
fun withContextClock() = runBlocking {
val goTos = Channel(UNLIMITED)
val sessionService = FakeSessionService()
val events = MutableSharedFlow()
val username = "username"
val password = "password"
val clock = BroadcastFrameClock()
val presenter = LoginPresenter(sessionService, goTos*:trySend)
withContext(clock) {
moleculeFlow(RecompositionClock.ContextClock) {
presenter.UiModel(events)
}.test {
...
}
}
}

View Slide

@Test
fun withContextClock() = runBlocking {
val clock = BroadcastFrameClock()
withContext(clock) {
moleculeFlow(RecompositionClock.ContextClock) {
}.test {
*/ Fire up initial LaunchedEffects (if any)
yield()
assertEquals(LoginUiModel.Content, awaitItem())
events.emit(LoginUiEvent.Submit(username, password))
*/ push event into composition
yield()
*/ wait for recomposer to request a new frame
yield()
clock.sendFrame(0)
val nextItem = awaitItem()
assertEquals(LoginUiModel.Loading, nextItem)
...
}

View Slide

@Test
fun works() = runBlocking {
moleculeFlow(RecompositionClock.Immediate) {
}.test {
*/ write a unit test!
}
}

View Slide

@Test
}.test {
yield()
}
}

View Slide

@Test
}.test {
yield()
assertEquals(LoginUiModel.Content, awaitItem())
events.emit(LoginUiEvent.Submit(username, password))
assertEquals(LoginUiModel.Loading, awaitItem())
assertEquals(LoginAttempt(username, password), sessionService.loginAttempts.awaitValue())
sessionService.loginResults.trySend(LoginResult.Success)
assertEquals(LoggedInScreen(username), goTos.awaitValue())
}
}

View Slide

View Slide

Role of Architecture
@askashdavies
@billjings

View Slide

class LoginViewModel(private val service: SessionService) : ViewModel() {
var viewState by mutableStateOf(null)
private set
fun login(username: String, password: String) {
viewModelScope.launch {
viewState = service.login(
username = username,
password = password
)
}
}
}

View Slide

View Lifecycle
Role of Architecture
@askashdavies
@billjings

View Slide

class MoleculeViewModel(private val presenter: LoginPresenter) : ViewModel() {
fun present(events: Flow): StateFlow =
viewModelScope.launchMolecule(RecompositionClock.ContextClock) {
}
}
@Composable
fun LoginScreen(viewModel: MoleculeViewModel = viewModel()) {
val events = remember { MutableSharedFlow() }
val viewState: LoginUiModel? by viewModel
.present(events)
.collectAsState()
}

View Slide

github.com/slackhq/circuit
🚧 Circuit
@askashdavies
@billjings

View Slide

@Parcelize object PetListScreen : Screen {
sealed interface State : Parcelable {
@Parcelize object Loading : State
@Parcelize object Success : State
}
}
val circuit: Circuit = ** **. */
val navigator = circuit.navigator(
{ content *> setContent { StarTheme { content() } } },
onBackPressedDispatcher*:onBackPressed,
)
navigator.goTo(PetListScreen)

View Slide

arkivanov.github.io/Decompose/child-stack/overview
Decompose
@askashdavies
@billjings

View Slide

class RootComponent(context: ComponentContext) : Root, ComponentContext {
private val navigation = StackNavigation()
override val childStack = childStack(** **. */)
fun createChild(config: Config, context: ComponentContext): Child = when (config) {
is Config.List *> Child.List(itemList(context))
is Config.Details *> ** **. */
}
private fun itemList(context: ComponentContext): ItemList =
ItemListComponent(context) { navigation.push(Config.Details(itemId = it)) }
}
private sealed class Config : Parcelable {
@Parcelize object List : Config()
@Parcelize data class Details(val itemId: Long) : Config()
}

View Slide

Obligatory Pet Photo
CENSORED
Py
@askashdavies
@billjings

View Slide

“Every existing thing is born without
reason, prolongs itself out of weakness,
and dies by chance.”
- Jean-Paul Sartre

View Slide

github.com/ashdavies/demystifying-molecule
Py
@askashdavies
@billjings
CENSORED

View Slide

Thanks!
Ash Davies
Android / Kotlin GDE Berlin
Bill Phillips
Supreme Android Overlord
Cash App
@askashdavies
@billjings
Sam dog

View Slide

Links
● State of Managing State with Compose [code.cash.app/the-state-of-managing-state-with-compose]
● Crouching Theme Hidden DI [code.cash.app/crouching-theme-hidden-di]
● Do iiiiiiit. [twitter.com/billjings/status/1514772865869967370]
● Feature [monkeyuser.com]
@askashdavies
@billjings

View Slide

Droidcon NYC: Demystifying Molecule

Droidcon NYC: Demystifying Molecule

Ash Davies

More Decks by Ash Davies

Other Decks in Programming

Featured

Transcript