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’ 󰑔 😷

Who We Are Ash Davies 󰏅 󰎲 Android & Kotlin
GDE Senior Android Developer 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)

A Brief Introduction Compose UI @askashdavies @billjings

@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") } }

) { 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") } } “billjings” “12345”

) { 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") } } “ashdavies” “12345”

) { 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") } }

) { Column(modifier = Modifier.padding(all = 48.dp)) { Text(style = cursiveTextStyle, text = "Login") RhythmSpacer() val currentUsername = remember { mutableStateOf(username) } val currentPassword = remember { mutableStateOf(password) } LabeledTextField(text = username, hidden = false, label = "Username") RhythmSpacer() LabeledTextField(text = password, hidden = true, label = "Password") RhythmSpacer() TextButton(onSubmit, "Login") } }

) { Column(modifier = Modifier.padding(all = 48.dp)) { Text(style = cursiveTextStyle, text = "Login") RhythmSpacer() val currentUsername = remember { mutableStateOf(username) } val currentPassword = remember { mutableStateOf(password) } LabeledTextField(state = currentUsername, hidden = false, label = "Username") RhythmSpacer() LabeledTextField(state = currentPassword, hidden = true, label = "Password") RhythmSpacer() TextButton(onSubmit, "Login") } }

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

@Composable private fun LoginView( sessionService: SessionService, goTo: (Screen) *> Unit,
) { val username = remember { mutableStateOf("") } val password = remember { mutableStateOf("") } var click by remember { mutableStateOf<Int?>(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() } }

) { val username = remember { mutableStateOf("") } val password = remember { mutableStateOf("") } var click by remember { mutableStateOf<Int?>(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() } } Can’t validate ANYTHING

) { val username = remember { mutableStateOf("") } val password = remember { mutableStateOf("") } var click by remember { mutableStateOf<Int?>(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() } } Can’t validate ANYTHING Without validating EVERYTHING

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

@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) ) }) } } }

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

Demystifying Molecule Molecular Motivation @askashdavies @billjings

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

@Suppress("DEPRECATION") class CallbackLoginPresenter( private val service: SessionService, private val goTo:
(Screen) *> Unit, ) { **. inner class LoginAsyncTask : AsyncTask<Submit,Void,LoginResult>() { 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 *> {} } } } }

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

class RxLoginPresenter(val service: SessionService, val goTo: (Screen) *> Unit) {
fun present(events: Observable<LoginUiEvent>): Observable<LoginUiModel> = events.flatMap<LoginUiModel> { 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) }

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...

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

class CoLoginPresenter( private val sessionService: SessionService, private val goTo: (Screen)
*> Unit, ) { fun present(events: Flow<LoginUiEvent>): Flow<LoginUiModel> = flow { emit(LoginUiModel.Content) val loginEvent = events.filterIsInstance<LoginUiEvent.Submit>().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")) } } }

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

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

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

@Composable fun UiModel(events: Flow<LoginUiEvent>): LoginUiModel { var login by remember
{ mutableStateOf<Submit?>(null) } LaunchedEffect(events) { events.filterIsInstance<Submit>().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 } }

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

Demystifying Molecule Molecule: Turning Compositions Into Flows @askashdavies @billjings

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

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 }

val recomposer = Recomposer(coroutineContext)

val recomposer = Recomposer(coroutineContext) val composition = Composition(applier, compositionContext)

val recomposer = Recomposer(coroutineContext) val composition = Composition(applier, recomposer)

val recomposer = Recomposer(coroutineContext) val composition = Composition(NoOpApplier, recomposer)

val recomposer = Recomposer(coroutineContext) val composition = Composition(NoOpApplier, recomposer) launch(start
= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() }

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val snapshotHandle = Snapshot.registerGlobalWriteObserver { Snapshot.sendApplyNotifications() }

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { Snapshot.sendApplyNotifications() }

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { sendApplyNotification.trySend(Unit) }

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { sendApplyNotification.trySend(Unit) } composition.setContent { val output = content() }

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { sendApplyNotification.trySend(Unit) } composition.setContent { val output = content() callback(output) }

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { sendApplyNotification.trySend(Unit) } composition.setContent { val output = content() callback(output) } coroutineContext.job.invokeOnCompletion { composition.dispose() snapshotHandle.dispose() }

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { sendApplyNotification.trySend(Unit) } composition.setContent { val output = content() callback(output) } coroutineContext.job.invokeOnCompletion { composition.dispose() snapshotHandle.dispose() } That’s Molecule!

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { sendApplyNotification.trySend(Unit) } composition.setContent { val output = content() callback(output) } coroutineContext.job.invokeOnCompletion { composition.dispose() snapshotHandle.dispose() } For this to recompose, two things must happen:

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { sendApplyNotification.trySend(Unit) } composition.setContent { val output = content() callback(output) } coroutineContext.job.invokeOnCompletion { composition.dispose() snapshotHandle.dispose() } For this to recompose, two things must happen: 1. content() must be dirty (e.g. new snapshot state)

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { sendApplyNotification.trySend(Unit) } composition.setContent { val output = content() callback(output) } coroutineContext.job.invokeOnCompletion { composition.dispose() snapshotHandle.dispose() } For this to recompose, two things must happen: 1. content() must be dirty (e.g. new snapshot state) 2. Frame clock must be ticked

= UNDISPATCHED) { recomposer.runRecomposeAndApplyChanges() } val sendApplyNotification = Channel<Unit>(CONFLATED) launch { for (notification in sendApplyNotification) { Snapshot.sendApplyNotifications() } } val snapshotHandle = Snapshot.registerGlobalWriteObserver { sendApplyNotification.trySend(Unit) } composition.setContent { val output = content() callback(output) } coroutineContext.job.invokeOnCompletion { composition.dispose() snapshotHandle.dispose() } Must have a frame clock For this to recompose, two things must happen: 1. content() must be dirty (e.g. new snapshot state) 2. Frame clock must be ticked

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

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

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

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

@Test fun withContextClock() = runBlocking { val goTos = Channel<Screen>(UNLIMITED)
val sessionService = FakeSessionService() val events = MutableSharedFlow<LoginUiEvent>() val username = "username" val password = "password" val clock = BroadcastFrameClock() val presenter = LoginPresenter(sessionService, goTos*:trySend) withContext(clock) { moleculeFlow(RecompositionClock.ContextClock) { presenter.UiModel(events) }.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) ... }

@Test fun works() = runBlocking { val goTos = Channel<Screen>(UNLIMITED)
val sessionService = FakeSessionService() val events = MutableSharedFlow<LoginUiEvent>() val username = "username" val password = "password" val presenter = LoginPresenter(sessionService, goTos*:trySend) moleculeFlow(RecompositionClock.Immediate) { presenter.UiModel(events) }.test { */ write a unit test! } }

val sessionService = FakeSessionService() val events = MutableSharedFlow<LoginUiEvent>() val username = "username" val password = "password" val presenter = LoginPresenter(sessionService, goTos*:trySend) moleculeFlow(RecompositionClock.Immediate) { presenter.UiModel(events) }.test { */ Fire up initial LaunchedEffects (if any) yield() } }

val sessionService = FakeSessionService() val events = MutableSharedFlow<LoginUiEvent>() val username = "username" val password = "password" val presenter = LoginPresenter(sessionService, goTos*:trySend) moleculeFlow(RecompositionClock.Immediate) { presenter.UiModel(events) }.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()) } }

Demystifying Molecule Role of Architecture @askashdavies @billjings

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

View Lifecycle Role of Architecture @askashdavies @billjings

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

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

@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)

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

class RootComponent(context: ComponentContext) : Root, ComponentContext { private val navigation
= StackNavigation<Config>() 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() }

Obligatory Pet Photo CENSORED Py @askashdavies @billjings

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

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

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

Demystifying Molecule 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

Droidcon NYC: Demystifying Molecule

Droidcon NYC: Demystifying Molecule

More Decks by Ash Davies

Other Decks in Programming

Featured

Transcript