Berlindroid: Demystifying Molecule

Molecule is a library for turning Composables into Flows. But how does that happen? What are the advantages and disadvantages to building and running your own Compositions, and where to even start?

In this talk we’ll cover the history of reactive design patterns with Kotlin, Coroutines, Compose, and how Molecule gives you the ability to compose your own business logic into functional units. How you might use this for unit testing, and how the role of architecture components fits into the equation.

We’ll show you why you might want to do such a thing, and where it might make sense not to. How Molecule works under the hood, and help you to understand where, when and how you should use it.

Transcript

1. Demystifying Molecule
   Running Your Own Compositions for Fun and Profit
   Berlindroid - Nov 22’
   Ash Davies
   Android / Kotlin GDE - Berlin
   @askashdavies
   ashdavies@androiddev.social
   

   View Slide

2. View Slide

3. Compose UI
   A Brief Introduction
   ashdavies@androiddev.social
   

   View Slide

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

5. @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")
   }
   }
   LoginInputView("billjings", "12345")
   @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")
   }
   }
   LoginInputView("billjings", "12345")
   @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")
   }
   }
   LoginInputView("ashdavies", "12345")
   @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")
   }
   }
   LoginInputView("ashdavies", "12345")
   

   View Slide

6. @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")
   }
   }
   @Composable
   fun LoginInputView(email: String, pass: String, onSubmit: () *> Unit) {
   val currentUsername = remember { mutableStateOf(email) }
   val currentPassword = remember { mutableStateOf(pass) }
   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")
   }
   }
   @Composable
   fun LoginInputView(email: String, pass: String, onSubmit: () *> Unit) {
   val currentUsername = remember { mutableStateOf(email) }
   val currentPassword = remember { mutableStateOf(pass) }
   Column(modifier = Modifier.padding(all = 48.dp)) {
   Text(style = cursiveTextStyle, text = "Login")
   RhythmSpacer()
   LabeledTextField(state = currentUsername, hidden = false, label = "Username")
   RhythmSpacer()
   LabeledTextField(state = currentPassword, hidden = true, label = "Password")
   RhythmSpacer()
   TextButton(onSubmit, "Login")
   }
   }
   @Composable
   fun LoginInputView(email: String, pass: String, onSubmit: (String, String) *> Unit) {
   val currentUsername = remember { mutableStateOf(email) }
   val currentPassword = remember { mutableStateOf(pass) }
   Column(modifier = Modifier.padding(all = 48.dp)) {
   Text(style = cursiveTextStyle, text = "Login")
   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

7. View Slide

8. @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()
   }
   }
   

   View Slide

9. Cannot validate anything without
   validating everything
   Validation
   ashdavies@androiddev.social
   

   View Slide

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

    View Slide

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

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

    View Slide

13. Molecular Motivation
    Demystifying Molecule
    ashdavies@androiddev.social
    

    View Slide

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

15. Reactive Programming
    RxJava
    RxJava in 2022? Srsly?
    ● Reactive Pipelines (Push Updates)
    ● Explicit thread handling
    ● Inline error-handling
    ● Lifecycle awareness
    ashdavies@androiddev.social
    

    View Slide

16. View Slide

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

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

19. kotlin.coroutines
    Imperative Strikes Back
    ● Native Library
    ● Less Yoda code (startWith)
    ● suspend fun rules
    ● Observable -> Flow
    ashdavies@androiddev.social
    

    View Slide

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

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

22. Compose != Compose UI
    Kotti knows it’s true, and so should you
    Kotti
    ashdavies@androiddev.social
    

    View Slide

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

    View Slide

24. @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}”))
    }
    }
    Loading
    } else {
    Content
    }
    }
    

    View Slide

25. But how?
    ● How do we test the presenters?
    ● How do we fit it into our
    architecture?
    ashdavies@androiddev.social
    

    View Slide

26. Molecule: Turning
    Compositions Into Flows
    Demystifying Molecule
    ashdavies@androiddev.social
    

    View Slide

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

    View Slide

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

29. Demystifying Molecule
    val recomposer = Recomposer(coroutineContext)
    ● Owns recomposition process
    ● Runs loop with context
    ● Lives in a Coroutine
    Recomposer
    

    View Slide

30. Demystifying Molecule
    val recomposer = Recomposer(coroutineContext)
    val composition = Composition(NoOpApplier, recomposer)
    ● Composition builds content
    ● Pass recomposer as context
    ● Applier builds slot allocation
    Composition
    

    View Slide

31. Demystifying Molecule
    val recomposer = Recomposer(coroutineContext)
    val composition = Composition(NoOpApplier, recomposer)
    launch(start = UNDISPATCHED) {
    recomposer.runRecomposeAndApplyChanges()
    }
    ● Launch undispatched coroutine
    ● Runs in background
    runRecomposeAndApplyChanges()
    

    View Slide

32. Demystifying Molecule
    val recomposer = Recomposer(coroutineContext)
    val composition = Composition(NoOpApplier, recomposer)
    launch(start = UNDISPATCHED) {
    recomposer.runRecomposeAndApplyChanges()
    }
    val snapshotHandle = Snapshot.registerGlobalWriteObserver {
    sendApplyNotification.trySend(Unit)
    }
    ● Owns mutable composition state
    ● Send notifications on change
    ● Triggers often
    SnapshotState
    

    View Slide

33. Demystifying Molecule
    val recomposer = Recomposer(coroutineContext)
    val composition = Composition(NoOpApplier, recomposer)
    launch(start = UNDISPATCHED) {
    recomposer.runRecomposeAndApplyChanges()
    }
    val sendApplyNotification = Channel(CONFLATED)
    launch {
    for (notification in sendApplyNotification) {
    Snapshot.sendApplyNotifications()
    }
    }
    val snapshotHandle = Snapshot.registerGlobalWriteObserver {
    sendApplyNotification.trySend(Unit)
    }
    ● Conflated coroutine Channel
    ● Sends notifications via channel
    ● Marks state as invalidated
    Rate Limit
    

    View Slide

34. Demystifying Molecule
    val recomposer = Recomposer(coroutineContext)
    val composition = Composition(NoOpApplier, recomposer)
    launch(start = UNDISPATCHED) {
    recomposer.runRecomposeAndApplyChanges()
    }
    val sendApplyNotification = Channel(CONFLATED)
    launch {
    for (notification in sendApplyNotification) {
    Snapshot.sendApplyNotifications()
    }
    }
    val snapshotHandle = Snapshot.registerGlobalWriteObserver {
    sendApplyNotification.trySend(Unit)
    }
    ● Conflated coroutine Channel
    ● Sends notifications via channel
    ● Marks state as invalidated
    Rate Limit
    

    View Slide

35. Demystifying Molecule
    val recomposer = Recomposer(coroutineContext)
    val composition = Composition(NoOpApplier, recomposer)
    launch(start = UNDISPATCHED) {
    recomposer.runRecomposeAndApplyChanges()
    }
    val sendApplyNotification = Channel(CONFLATED)
    launch {
    for (notification in sendApplyNotification) {
    Snapshot.sendApplyNotifications()
    }
    }
    val snapshotHandle = Snapshot.registerGlobalWriteObserver {
    sendApplyNotification.trySend(Unit)
    }
    composition.setContent {
    val output = content()
    callback(output)
    }
    ● Conflated coroutine Channel
    ● Sends notifications via channel
    ● Marks state as invalidated
    Content
    

    View Slide

36. Demystifying Molecule
    val recomposer = Recomposer(coroutineContext)
    val composition = Composition(NoOpApplier, recomposer)
    launch(start = UNDISPATCHED) {
    recomposer.runRecomposeAndApplyChanges()
    }
    val sendApplyNotification = Channel(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()
    }
    ● Invoke on completion
    ● Dispose composition
    ● Dispose snapshot
    Dispose
    

    View Slide

37. Demystifying Molecule
    val recomposer = Recomposer(coroutineContext)
    val composition = Composition(NoOpApplier, recomposer)
    launch(start = UNDISPATCHED) {
    recomposer.runRecomposeAndApplyChanges()
    }
    val sendApplyNotification = Channel(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!
    

    View Slide

38. Demystifying Molecule
    ● Content must be invalidated
    ● Context Frame Clock
    ● Clock independent of state
    Note:
    val recomposer = Recomposer(coroutineContext)
    val composition = Composition(NoOpApplier, recomposer)
    launch(start = UNDISPATCHED) {
    recomposer.runRecomposeAndApplyChanges()
    }
    val sendApplyNotification = Channel(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()
    }
    

    View Slide

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

    View Slide

40. Turbine
    github.com/cashapp/turbine
    flowOf("one", "two").test {
    assertEquals("one", awaitItem())
    assertEquals("two", awaitItem())
    awaitComplete()
    }
    ashdavies@androiddev.social
    

    View Slide

41. Pros / Cons
    Composables
    ● “Are” a StateFlow
    ● Composable state
    Flows
    ● Defined number of items
    ● Meaning is (mostly) not contextual
    ashdavies@androiddev.social
    

    View Slide

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

43. @Test
    fun withContextClock() = runBlocking {
    val (username, password) = "username" to "password"
    val events = MutableSharedFlow()
    val goTos = Channel(UNLIMITED)
    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

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

    View Slide

45. @Test
    fun works() = runBlocking {
    val goTos = Channel(UNLIMITED)
    val sessionService = FakeSessionService()
    val events = MutableSharedFlow()
    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())
    }
    }
    

    View Slide

46. Role of Architecture
    Demystifying Molecule
    ashdavies@androiddev.social
    

    View Slide

47. Jetpack ViewModel
    

    View Slide

48. View Lifecycle
    Role of Architecture
    ashdavies@androiddev.social
    

    View Slide

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

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

    View Slide

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

    View Slide

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

53. slackhq.github.io/circuit/
    🚧 Circuit
    ashdavies@androiddev.social
    

    View Slide

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

55. arkivanov.github.io/Decompose/child-stack/overview
    Decompose
    ashdavies@androiddev.social
    

    View Slide

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

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

    View Slide

58. Demystifying Molecule
    github.com/ashdavies/demystifying-molecule
    Py
    CENSORED
    ashdavies@androiddev.social
    

    View Slide

59. Ash Davies
    Android & Kotlin GDE Berlin
    @askashdavies
    Thanks!
    Kotti
    Follow for more cat pics!
    ashdavies@androiddev.social
    

    View Slide

60. Demystifying Molecule
    Demystifying Molecule - DC NYC
    droidcon.com/2022/09/29/demystifying-molecule-running-your-own-compositions-for-fun-and-profit/
    Using Jetpack Compose with Square’s Molecule Library
    codingwithmohit.com/mobile/jetpack-compose-square-molecule-library
    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
    ashdavies@androiddev.social
    

    View Slide