Architecture at cale

Activities, fragments, view models, navigation, layouts… Android APIs

« It is probably better to call the core Android APIs a "system framework." For the most part, the platform APIs we provide are there to de fi ne how an application interacts with the operating system; but for anything going on purely within the app, these APIs are often just not relevant. » by Dianne Hackborn Android APIs

Screen

class CardView( private val screen: CardViewScreen, private val presenterFactory: CardPresenter.Factory, context: Context, ) : ContourLayout(context) { private val events = PublishRelay.create() override fun onAttachedToWindow() { super.onAttachedToWindow() events .compose(presenterFactory.create(screen)) .takeUntil(detaches()) .subscribe(this::setModel) } } NO-NO

Presenter UiModel UiEvent Ui

Presenter UiModel UiEvent Ui Ui

No content

data class DependentWelcomeViewModel( val toolbarTitle: String, val title: String, val subTitle: String, val ctaLabel: String, ) sealed interface DependentWelcomeViewEvent { object Close : DependentWelcomeViewEvent object CtaClicked : DependentWelcomeViewEvent }

Ui

interface Ui { }

interface Ui { interface EventReceiver { fun sendEvent(event: UiEvent) } fun setEventReceiver(receiver: EventReceiver) }

interface Ui { interface EventReceiver { fun sendEvent(event: UiEvent) } fun setEventReceiver(receiver: EventReceiver) fun setModel(model: UiModel) }

class DependentWelcomeView( context: Context, attrs: AttributeSet? = null, ) : ContourLayout(context, attrs), Ui { } ContourLayout https://github.com/cashapp/contour

class DependentWelcomeView( context: Context, attrs: AttributeSet? = null, ) : ContourLayout(context, attrs), Ui { override fun setEventReceiver(receiver: EventReceiver) { } override fun setModel(model: DependentWelcomeViewModel) { } } ContourLayout https://github.com/cashapp/contour

class DependentWelcomeView( context: Context, attrs: AttributeSet? = null, ) : ContourLayout(context, attrs), Ui { private val palette = themeInfo().colorPalette private val toolbar = MooncakeToolbar(context) private val image = AppCompatImageView(context).apply { setImageResource(R.drawable.investing_components_dependent_welcome) } private val titleView = AppCompatTextView(context).apply { textSize = 32f ... } private val subtitleView = AppCompatTextView(context) private val button = MooncakePillButton(context) init { setBackgroundColor(palette.background) } override fun setEventReceiver(receiver: EventReceiver) { } override fun setModel(model: DependentWelcomeViewModel) { } } ContourLayout https://github.com/cashapp/contour

private val titleView = AppCompatTextView(context).apply { textSize = 32f ... } private val subtitleView = AppCompatTextView(context) private val button = MooncakePillButton(context) init { setBackgroundColor(palette.background) toolbar.layoutBy( x = matchParentX(), y = topTo { parent.top() } ) image.layoutBy( x = matchParentX(36.dip, 36.dip), y = bottomTo { titleView.top() }.topTo { toolbar.bottom() } ) titleView.layoutBy(...) subtitleView.layoutBy(...) button.layoutBy(...) } override fun setEventReceiver(receiver: EventReceiver) { } override fun setModel(model: DependentWelcomeViewModel) { } } ContourLayout https://github.com/cashapp/contour

x = matchParentX(), y = topTo { parent.top() } ) image.layoutBy( x = matchParentX(36.dip, 36.dip), y = bottomTo { titleView.top() }.topTo { toolbar.bottom() } ) titleView.layoutBy(...) subtitleView.layoutBy(...) button.layoutBy(...) } override fun setEventReceiver(receiver: EventReceiver) { button.setOnClickListener { receiver.sendEvent(CtaClicked) } toolbar.setNavigationOnClickListener { receiver.sendEvent(Close) } } override fun setModel(model: DependentWelcomeViewModel) { } } ContourLayout https://github.com/cashapp/contour

image.layoutBy( x = matchParentX(36.dip, 36.dip), y = bottomTo { titleView.top() }.topTo { toolbar.bottom() } ) titleView.layoutBy(...) subtitleView.layoutBy(...) button.layoutBy(...) } override fun setEventReceiver(receiver: EventReceiver) { button.setOnClickListener { receiver.sendEvent(CtaClicked) } toolbar.setNavigationOnClickListener { receiver.sendEvent(Close) } } override fun setModel(model: DependentWelcomeViewModel) { toolbar.title = model.toolbarTitle titleView.text = model.title subtitleView.text = model.subTitle button.text = model.ctaLabel } } ContourLayout https://github.com/cashapp/contour

abstract class ComposeUiView( context: Context, attrs: AttributeSet? = null, ) : AbstractComposeView(context, attrs), Ui { @Composable abstract fun Content( model: UiModel?, onEvent: (UiEvent) -> Unit, ) // Deal with setModel/eventReceiver stuff. }

Ui tests

No content

Paparazzi

@RunWith(TestParameterInjector::class) class DependentWelcomeViewTest( @TestParameter private val design: DesignTheme, ) { @get:Rule val paparazzi = Paparazzi( theme = "Theme.Cash.Default", ) private val context: Context by lazy { paparazzi.context .wrapWithTheme { design.provide(paparazzi.context) } } @Test fun tests() { } } Paparazzi: Legacy UI Test https://github.com/cashapp/paparazzi

@RunWith(TestParameterInjector::class) class DependentWelcomeViewTest( @TestParameter private val design: DesignTheme, ) { @get:Rule val paparazzi = Paparazzi( theme = "Theme.Cash.Default", ) private val context: Context by lazy { paparazzi.context .wrapWithTheme { design.provide(paparazzi.context) } } @Test fun tests() { val view = DependentWelcomeView(context = context) view.setModel( DependentWelcomeViewModel( toolbarTitle = "Stocks", title = "Stocks are now available for anyone 13+", subTitle = "Request approval from your account sponsor to...”, ctaLabel = "Continue", ) ) paparazzi.snapshot(view) } } Paparazzi: Legacy UI Test https://github.com/cashapp/paparazzi

class HelloComposeTest { @get:Rule val paparazzi = Paparazzi() @Test fun compose() { paparazzi.snapshot { HelloPaparazzi() } } } @Composable fun HelloPaparazzi() { Column( Modifier .background(Color.White) .fillMaxSize() .wrapContentSize() ) { // Stuff. } Paparazzi: Compose UI Test https://github.com/cashapp/paparazzi

Paparazzi: Reports

- Write tests. - Record snapshots: ./gradle module:recordPaparazziDebug - Check snapshots into the repository. - Run verify task on CI: ./gradle module:verifyPaparazziDebug Paparazzi: CI work fl ow https://github.com/cashapp/paparazzi

Paparazzi: CI work fl ow https://github.com/cashapp/paparazzi

Paparazzi: CI work fl ow https://github.com/cashapp/paparazzi

Paparazzi: CI work fl ow https://github.com/cashapp/paparazzi

runs on JVM Paparazzi https://github.com/cashapp/paparazzi

No content

Presenter

interface Presenter { }

interface Presenter { fun start(scope: CoroutineScope): Binding }

interface Presenter { fun start(scope: CoroutineScope): Binding interface Binding { val models: Flow fun sendEvent(event: UiEvent) } }

interface Presenter { fun start(scope: CoroutineScope): Binding interface Binding { // TODO: Change to StateFlow. val models: Flow fun sendEvent(event: UiEvent) } }

Presenter UiModel UiEvent Ui Ui

fun map(event): model

interface ObservableTransformer { fun apply(@NonNull Observable upstream): ObservableSource }

interface ObservableTransformer { fun apply(@NonNull Observable upstream): ObservableSource } interface CoroutinePresenter { suspend fun produceModels( events: Flow, emit: FlowCollector, ) }

class DependentWelcomePresenterOT( private val stringManager: StringManager, private val database: CashDatabase, @Io private val ioScheduler: Scheduler, ) : ObservableTransformer { override fun apply( events: Observable ): ObservableSource { } } Observable Transformer

class DependentWelcomePresenterOT( private val stringManager: StringManager, private val database: CashDatabase, @Io private val ioScheduler: Scheduler, ) : ObservableTransformer { override fun apply( events: Observable ): ObservableSource { return events.publish { events -> Observable.merge( events.filterIsInstance().startFlow(), events.filterIsInstance().goBack(), ) } } private fun Observable.startFlow(): Observable { return consumeOnNext { // Start f l ow. } } private fun Observable.goBack(): Observable { return consumeOnNext { // Navigate back. } } } Observable Transformer

): ObservableSource { return events.publish { events -> Observable.merge( events.filterIsInstance().startFlow(), events.filterIsInstance().goBack(), models(), ) } } private fun models(): Observable { return database.stateQueries.select().asObservable(ioScheduler).mapToOne() .map { it.toolbar_title } .startWith(stringManager[R.string.investing_tab_title]) .map { DependentWelcomeViewModel( toolbarTitle = it, title = stringManager[R.string.dependent_welcome_title], subTitle = stringManager[R.string.dependent_welcome_subtitle], ctaLabel = stringManager[R.string.dependent_welcome_cta_label], ) } } private fun Observable.startFlow(): Observable { return consumeOnNext { // Start f l ow. } } private fun Observable.goBack(): Observable { return consumeOnNext { // Navigate back. } Observable Transformer

@Test fun models() { val events = PublishRelay.create() val models = events.compose(presenter).test(rxRule) models.assertValue( DependentWelcomeViewModel( toolbarTitle = stringManager[R.string.investing_tab_title], title = stringManager[R.string.dependent_welcome_title], subTitle = stringManager[R.string.dependent_welcome_subtitle], ctaLabel = stringManager[R.string.dependent_welcome_cta_label], ) ) } @Test fun `cta clicks navigates starts invest teen request authorization flow`() { val events = PublishRelay.create() val models = events.compose(presenter).test(rxRule) models.assertAnyValue() events.accept(CtaClicked) assertThat(navigator.takeNextScreen()).isEqualTo(InvestingHome()) } Observable Transformer

Molecule

@Composable fun Content() { // Create views and stuff. } Molecule https://github.com/cashapp/molecule

@Composable fun profilePresenter( userFlow: Flow, balanceFlow: Flow, ): ProfileModel { val user: User? by userFlow.collectAsState(null) val balance: Long by balanceFlow.collectAsState(0L) return if (user == null) { Loading } else { Data(user.name, balance) } } Molecule https://github.com/cashapp/molecule

/** * Create a [Flow] which will continually recompose `body` to produce * a stream of [T] values when collected. */ fun moleculeFlow( clock: RecompositionClock, body: @Composable () -> T, ): Flow { // Stuff. } enum class RecompositionClock { ContextClock, Immediate, } Molecule https://github.com/cashapp/molecule

/** * Launch a coroutine into this [CoroutineScope] which will * continually recompose `body` to produce a [StateFlow] stream * of [T] values. */ fun CoroutineScope.launchMolecule( clock: RecompositionClock, body: @Composable () -> T, ): StateFlow { // Stuff. } Molecule https://github.com/cashapp/molecule

val flow: Flow = moleculeFlow(Immediate) { profilePresenter(userFlow, balanceFlow) } val stateFlow: StateFlow = scope.launchMolecule(ContextClock) { profilePresenter(userFlow, balanceFlow) } Molecule https://github.com/cashapp/molecule

interface ObservableTransformer { fun apply(@NonNull Observable upstream): ObservableSource } interface CoroutinePresenter { suspend fun produceModels( events: Flow, emit: FlowCollector, ) }

interface CoroutinePresenter { suspend fun produceModels( events: Flow, emit: FlowCollector, ) } interface MoleculePresenter { @Composable fun models( events: Flow ): UiModel }

class DependentWelcomePresenter( database: CashDatabase, private val stringManager: StringManager, @Io private val ioContext: CoroutineContext, ) : MoleculePresenter { @Composable override fun models(events: Flow): DependentWelcomeViewModel { } } Molecule Presenter

class DependentWelcomePresenter( database: CashDatabase, private val stringManager: StringManager, @Io private val ioContext: CoroutineContext, ) : MoleculePresenter { @Composable override fun models(events: Flow): DependentWelcomeViewModel { LaunchedE f fect(events) { events.collect { item -> when (item) { CtaClicked -> { // Start flow. } Close -> { // Navigate back. } } } } } } Molecule Presenter

class DependentWelcomePresenter( database: CashDatabase, private val stringManager: StringManager, @Io private val ioContext: CoroutineContext, ) : MoleculePresenter { @Composable override fun models(events: Flow): DependentWelcomeViewModel { LaunchedE f fect(events) { events.collect { item -> when (item) { CtaClicked -> { // Start flow. } Close -> { // Navigate back. } } } } val toolbarTitle by remember { database.stateQueries.select().asFlow().mapToOne(ioContext) .map { it.toolbar_title } }.collectAsState(stringManager[R.string.investing_tab_title]) return DependentWelcomeViewModel( toolbarTitle = toolbarTitle, title = stringManager[R.string.dependent_welcome_title], subTitle = stringManager[R.string.dependent_welcome_subtitle], ctaLabel = stringManager[R.string.dependent_welcome_cta_label], ) } } Molecule Presenter

@Test fun models() = runBlocking { presenter.test { assertThat(awaitItem()).isEqualTo( DependentWelcomeViewModel( toolbarTitle = stringManager[R.string.investing_tab_title], title = stringManager[R.string.dependent_welcome_title], subTitle = stringManager[R.string.dependent_welcome_subtitle], ctaLabel = stringManager[R.string.dependent_welcome_cta_label], ) ) } } @Test fun `cta clicks navigates starts invest teen request authorization flow`() = runBlocking { presenter.test { awaitItem() sendEvent(CtaClicked) assertThat(navigator.awaitNextScreen()).isEqualTo(InvestingHome()) } } Molecule Presenter Test: Turbine https://github.com/cashapp/turbine

class SomethingStateManager( ) { @Composable fun somethingStates(): SomethingState { } } Composable Producer

class SomethingStateManager( database: CashDatabase, private val ioContext: CoroutineContext, ) { private val somethingQueries = database.investingStateQueries @Composable fun somethingStates(): SomethingState { val dbSomethingState: Investing_state? by remember { somethingQueries.select().asFlow().mapToOne(ioContext) }.collectAsState(null) if (dbSomethingState == null) return Loading return Content( hasOneThing = dbSomethingState!!.has_one_thing, ) } } Composable Producer

No content

Navigation

interface Screen : Parcelable @Parcelize data class StockDetails( val investmentEntityToken: InvestmentEntityToken, ) : Screen

interface Navigator { fun goTo(screen: Screen) }

Broadway

Factory

interface ViewFactory { fun createView( screen: Screen, parent: ViewGroup, ): Ui<*, *>? } interface PresenterFactory { fun create( screen: Screen, navigator: Navigator, ): Presenter<*, *>? }

Presenter Factory fun ObservableTransformer.asPresenter() : Presenter { return object : Presenter { override fun start( scope: CoroutineScope, ): Presenter.Binding { // Stuff. } } }

fun CoroutinePresenter.asPresenter() : Presenter { return object : Presenter { override fun start( scope: CoroutineScope, ): Presenter.Binding { // Stuff. } } } Presenter Factory

fun MoleculePresenter.asPresenter() : Presenter { return object : Presenter { override fun start( scope: CoroutineScope, ): Presenter.Binding { // Stuff. } } } Presenter Factory

fun ObservableTransformer.asPresenter(): Presenter fun CoroutinePresenter.asPresenter(): Presenter fun MoleculePresenter.asPresenter(): Presenter Presenter Factory

interface ViewFactory { fun createView( screen: Screen, parent: ViewGroup, ): Ui<*, *>? } interface PresenterFactory { fun create( screen: Screen, navigator: Navigator, ): Presenter<*, *>? }

Glue

@Provides fun provideBroadway( viewFactories: Set, presenterFactories: Set, ): Broadway { return Broadway( viewFactories = viewFactories.toList(), presenterFactories = presenterFactories.toList() ) } Glue

class Container( private val broadway: Broadway, ) : FrameLayout(context), Navigator { fun goTo(screen: Screen) { val presenter = broadway.createPresenter(screen, navigator = this) val ui = broadway.createUi(screen, context) bindAndAttachAndSwapAndStuff(ui, presenter) } } Glue

- Hook up your factories into Broadway. - Draw the rest of the owl. Glue: try it at home!

- View swapping. - Animation. - Overlay. - Backstack. - Con fi g changes. - Stu ff . Glue

FIN

References • Molecule • https://github.com/cashapp/molecule • Turbine • https://github.com/cashapp/turbine • Paparazzi • https://github.com/cashapp/paparazzi • Contour • https://github.com/cashapp/contour • Broadway • https://github.com/cashapp/broadway coming soon™ • Android Jetpack Compose • https://developer.android.com/jetpack/compose • Kotlin Coroutines • https://kotlinlang.org/docs/coroutines-overview.html • RxJava • https://github.com/ReactiveX/RxJava FIN