Droidcon London: Demystifying Molecule

Demystifying Molecule
Running Your Own Compositions for Fun and Profit
Droidcon London - Oct 22’ 󰏅
Ash Davies
Android / Kotlin GDE - Berlin
@askashdavies
@[email protected]

View Slide

View Slide

Compose UI
A Brief Introduction
@[email protected]

View Slide

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

View Slide

@Composable
RhythmSpacer()
RhythmSpacer()
RhythmSpacer()
}
}
LoginInputView("billjings", "12345")
@Composable
RhythmSpacer()
RhythmSpacer()
RhythmSpacer()
}
}
LoginInputView("billjings", "12345")
@Composable
RhythmSpacer()
RhythmSpacer()
RhythmSpacer()
}
}
LoginInputView("ashdavies", "12345")
@Composable
RhythmSpacer()
RhythmSpacer()
RhythmSpacer()
}
}
LoginInputView("ashdavies", "12345")

View Slide

@Composable
RhythmSpacer()
RhythmSpacer()
RhythmSpacer()
}
}
@Composable
val currentUsername = remember { mutableStateOf(email) }
val currentPassword = remember { mutableStateOf(pass) }
RhythmSpacer()
RhythmSpacer()
RhythmSpacer()
}
}
@Composable
RhythmSpacer()
LabeledTextField(state = currentUsername, hidden = false, label = "Username")
RhythmSpacer()
LabeledTextField(state = currentPassword, hidden = true, label = "Password")
RhythmSpacer()
}
}
@Composable
fun LoginInputView(email: String, pass: 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(service: 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 = service.login(username.value, password.value)) {
LoginResult.Success *> goTo(LoggedInScreen(username.value))
is LoginResult.Failure *> goTo(ErrorScreen("${result.throwable.message}"))
}
}
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

Molecular Motivation
@[email protected]

View Slide

@Suppress("DEPRECATION")
class CallbackLoginPresenter(val service: SessionService, 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)
}
}
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 *> Unit
}
}
}

View Slide

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

View Slide

View Slide

class RxLoginPresenter(val service: SessionService, val goTo: (Screen) *> Unit) {
fun present(events: 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
● Native Library
● Less Yoda code (startWith)
● suspend fun rules
● Observable -> Flow
@[email protected]

View Slide

class CoLoginPresenter(val sessionService: SessionService, val goTo: (Screen) *> Unit) {
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}"))
}
}
}

View Slide

class BigCombinePresenter(
val connectivity: ConnectivityManager,
val session: SessionService,
val goTo: (Screen) *> Unit,
) {
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 should you
Kotti
@[email protected]

View Slide

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

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?
● How do we test the presenters?
● How do we fit it into our
architecture?
@[email protected]

View Slide

Molecule: Turning
Compositions Into Flows
@[email protected]

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 {
val output by produceState(0) {
for (i in 1*.5) {
delay(1000)
value = i
}
}
return output
}

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 CoroutineScope.launchMolecule(
clock: RecompositionClock,
body: @Composable () *> T,
): StateFlow
fun moleculeFlow(
clock: RecompositionClock,
body: @Composable () *> T,
): Flow

View Slide

Turbine
github.com/cashapp/turbine
flowOf("one", "two").test {
assertEquals("one", awaitItem())
assertEquals("two", awaitItem())
awaitComplete()
}
@[email protected]

View Slide

Pros / Cons
Composables
● “Are” a StateFlow
● Composable state
Flows
● Defined number of items
● Meaning is (mostly) not contextual
@[email protected]

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 (username, password) = "username" to "password"
val clock = BroadcastFrameClock()
val presenter = LoginPresenter(FakeSessionService(), goTos*:trySend)
withContext(clock) {
moleculeFlow(RecompositionClock.ContextClock) { presenter.UiModel(events) }.test {
yield() */ Fire up initial LaunchedEffects (if any)
assertEquals(LoginUiModel.Content, awaitItem())
events.emit(LoginUiEvent.Submit(username, password))
yield() */ push event into composition
yield() */ wait for recomposer to request a new frame
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
fun works() = runBlocking {
moleculeFlow(RecompositionClock.Immediate) {
}.test {
*/ Fire up initial LaunchedEffects (if any)
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

Role of Architecture
@[email protected]

View Slide

Jetpack ViewModel

View Slide

View Lifecycle
Role of Architecture
@[email protected]

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

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

https://developer.android.com/guide/topics/resources/runtime-changes#HandlingTheChange

View Slide

@Composable
fun rememberSaveable(
vararg inputs: Any?,
stateSaver: Saver,
key: String? = null,
init: () *> MutableState
): MutableState = rememberSaveable(
*inputs,
saver = mutableStateSaver(stateSaver),
key = key,
init = init
)
https://developer.android.com/jetpack/compose/state

View Slide

slackhq.github.io/circuit/
🚧 Circuit
@[email protected]

View Slide

@Parcelize object PetListScreen : Screen {
sealed interface State : Parcelable {
@Parcelize object Loading : State
@Parcelize object Success : State
}
}
val backstack = rememberSaveableBackStack {
push(PetListScreen)
}
val navigator = rememberCircuitNavigator(
onRootPop = onBackPressedDispatcher*:onBackPressed,
backstack = backstack,
)
navigator.goTo(** **. */)

View Slide

arkivanov.github.io/Decompose/child-stack/overview
Decompose
@[email protected]

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

“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
CENSORED
@[email protected]

View Slide

Ash Davies
Android & Kotlin GDE Berlin
@askashdavies
Thanks!
Kotti
Follow for more cat pics!
@[email protected]

View Slide

Links
● Demystifying Molecule - DC NYC
[droidcon.com/2022/09/29/demystifying-molecule-running-your-own-compositions-for-fun-and-profit/]
● 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]
@[email protected]

View Slide

Droidcon London: Demystifying Molecule

Droidcon London: Demystifying Molecule

Ash Davies

More Decks by Ash Davies

Other Decks in Programming

Featured

Transcript