Sweet Architecture

weet
Architecture

View Slide

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

View Slide

Dianne Hackborn: « 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. »
Android APIs

View Slide

Ui

View Slide

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

}

}

View Slide

class CardView(



context: Context,





events

.compose(presenterFactory.create(screen))

.subscribe(this::setModel)

}

}

View Slide

class CardView(



context: Context,





events

.compose(presenterFactory.create(screen))

.takeUntil(detaches())

.subscribe(this::setModel)

}

}
NO-NO

View Slide

Presenter
UiModel
UiEvent
Ui

View Slide

Presenter
UiModel
UiEvent
Ui Ui

View Slide

View Slide

data class DependentWelcomeViewModel(

val toolbarTitle: String,

val title: String,

val subTitle: String,

val ctaLabel: String,

)

sealed interface DependentWelcomeViewEvent {

object Close : DependentWelcomeViewEvent

object CtaClicked : DependentWelcomeViewEvent

}

View Slide

Ui

View Slide

interface Ui {

}

View Slide

interface Ui {

interface EventReceiver {

fun sendEvent(event: UiEvent)

}

fun setEventReceiver(receiver: EventReceiver)

}

View Slide

interface Ui {

interface EventReceiver {


}

fun setEventReceiver(receiver: EventReceiver)

fun setModel(model: UiModel)

}

View Slide

class DependentWelcomeView(

context: Context,

attrs: AttributeSet? = null,

) : View(context, attrs),

Ui {

}

View Slide


context: Context,



Ui {

// views and buttons setup…

}

View Slide


context: Context,



Ui {


override fun setEventReceiver(receiver: EventReceiver) {

}
override fun setModel(model: DependentWelcomeViewModel) {

}

}

View Slide


context: Context,



Ui {



button.setOnClickListener { receiver.sendEvent(CtaClicked) }

toolbar.setNavigationOnClickListener { receiver.sendEvent(Close) }

}

}

}

View Slide


context: Context,



Ui {



button.setOnClickListener { receiver.sendEvent(CtaClicked) }

toolbar.setNavigationOnClickListener { receiver.sendEvent(Close) }

}

toolbar.title = model.toolbarTitle

titleView.text = model.title

subtitleView.text = model.subTitle

button.text = model.ctaLabel

}

}

View Slide

abstract class ComposeUiView(

context: Context,


) : AbstractComposeView(context, attrs), Ui {

@Composable

abstract fun Content(

model: UiModel?,

onEvent: (UiEvent) -> Unit,

) {

// Deal with setModel/eventReceiver stuff.

}

}

View Slide

Ui tests

View Slide

View Slide

Paparazzi

View Slide

class DependentWelcomeViewTest(

) {

@get:Rule val paparazzi = Paparazzi(

theme = "Theme.Cash.Default",

)

@Test fun tests() {

}

}
Paparazzi: Legacy UI Test

https://github.com/cashapp/paparazzi

View Slide


) {



)

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

}

}


View Slide

@RunWith(TestParameterInjector::class)


@TestParameter private val design: DesignTheme,

) {



)

@Test fun tests() {


view.setModel(






)

)


}

}


View Slide

@RunWith(TestParameterInjector::class)


@TestParameter private val design: DesignTheme,

) {



)

private val context: Context by lazy {

paparazzi.context

.wrapWithTheme { design.provide(paparazzi.context) }

}

@Test fun tests() {


view.setModel(






)

)


}

}


View Slide

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


View Slide

Paparazzi: Reports

View Slide

- Write tests.

- Record snapshots: ./gradlew module:recordPaparazziDebug

- Check snapshots into the repository.

- Run verify task on CI: ./gradlew module:verifyPaparazziDebug
Paparazzi: CI work
fl
ow


View Slide

Paparazzi: CI work
fl
ow


View Slide

runs on
JVM
Paparazzi


View Slide

Presenter

View Slide

interface Presenter {

}

View Slide


val models: Flow


}

View Slide


interface Binding {

val models: Flow


}

}

View Slide


fun start(scope: CoroutineScope): Binding

interface Binding {

val models: Flow


}

}

View Slide


fun start(scope: CoroutineScope): Binding

interface Binding {

// TODO: Change to StateFlow.

val models: Flow


}

}

View Slide

Presenter
UiModel
UiEvent
Ui Ui

View Slide

fun map(event): model

View Slide

interface ObservableTransformer {

fun apply(@NonNull Observable events): ObservableSource

}

View Slide


fun apply(@NonNull Observable events): ObservableSource

}

interface CoroutinePresenter {

suspend fun produceModels(

events: Flow,

emit: FlowCollector,

)

}

View Slide

class DependentWelcomePresenterOT(

private val stringManager: StringManager,

private val database: CashDatabase,

@Io private val ioScheduler: Scheduler,

) : ObservableTransformer {

override fun apply(

events: Observable

): ObservableSource {

}

}
Observable Transformer

View Slide

class DependentWelcomePresenterOT(


private val database: CashDatabase,

@Io private val ioScheduler: Scheduler,

) : ObservableTransformer {

override fun apply(

events: Observable


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

}

}

View Slide


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 {


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


View Slide

@Test fun models() {

val events = PublishRelay.create()

val models = events.compose(presenter).test(rxRule)

models.assertValue(


toolbarTitle = stringManager[R.string.investing_tab_title],




)

)

}


View Slide

@Test fun models() {



models.assertValue(






)

)

}

@Test fun `cta clicks navigates starts invest teen request authorization flow`() {



models.assertAnyValue() // Default model emitted.

events.accept(CtaClicked)

assertThat(navigator.takeNextScreen()).isEqualTo(InvestingHome())

}

View Slide

Molecule

View Slide

@Composable

fun Content(message: Message) {

Column {

Text(text = message.author)

Text(text = message.body)

}

}
Molecule

https://github.com/cashapp/molecule

View Slide

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

ProfileModel.Loading

} else {

ProfileModel.Data(user.name, balance)

}

}
Molecule


View Slide

/**

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

}

Molecule

enum class RecompositionClock {

ContextClock,

Immediate,

}

View Slide

/**

* 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

enum class RecompositionClock {

ContextClock,

Immediate,

}

View Slide

val flow: Flow = moleculeFlow(Immediate) {

profilePresenter(userFlow, balanceFlow)

}

val stateFlow: StateFlow = scope.launchMolecule(ContextClock) {

profilePresenter(userFlow, balanceFlow)

}
Molecule


View Slide


fun apply(@NonNull Observable upstream): ObservableSource

}



events: Flow,


)

}

View Slide



events: Flow,


)

}

interface MoleculePresenter {

@Composable

fun models(

events: Flow

): UiModel

}

View Slide

class DependentWelcomePresenter(

database: CashDatabase,


@Io private val ioContext: CoroutineContext,

) : MoleculePresenter {

@Composable

override fun models(events: Flow): DependentWelcomeViewModel {

}

}
Molecule Presenter

View Slide

class DependentWelcomePresenter(





@Composable


LaunchedE
f
fect(events) {

events.collect { event ->

when (event) {

CtaClicked -> { // Start flow. }

Close -> { // Navigate back. }

}

}

}

}

}
Molecule Presenter

View Slide




@Composable


LaunchedE
f
fect(events) {


when (event) {


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,




)

}

}
Molecule Presenter

View Slide

@Test fun models() = runTest {

presenter.test {

assertThat(awaitItem()).isEqualTo(






)

)

}

}

@Test fun `cta clicks navigates starts invest teen request authorization flow`() = runTest {

presenter.test {

awaitItem() // Default model emitted.

sendEvent(CtaClicked)

assertThat(navigator.awaitNextScreen()).isEqualTo(InvestingHome())

}

}
Molecule Presenter Test: Turbine

https://github.com/cashapp/turbine

View Slide

class SomethingStateManager(

) {

@Composable

fun somethingStates(): SomethingState {

}

}
Composable Producer

View Slide

class SomethingStateManager(


private val ioContext: CoroutineContext,

) {

private val somethingQueries = database.somethingStateQueries

@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

View Slide

Navigation

View Slide

interface Screen : Parcelable
@Parcelize

data class StockDetails(

val investmentEntityToken: InvestmentEntityToken,

) : Screen

View Slide

interface Navigator {

fun goTo(screen: Screen)

}
LaunchedE
f
fect(events) {


when (event) {


Close -> { // Navigate. }

}

}

}

View Slide

interface Navigator {

fun goTo(screen: Screen)

}
LaunchedE
f
fect(events) {


when (event) {


Close -> {

navigator.goTo(SomeScreen())

}

}

}

}

View Slide

Broadway

View Slide

Factory

View Slide

interface ViewFactory {

fun createView(

screen: Screen,

parent: ViewGroup,

): Ui<*, *>?

}
interface PresenterFactory {

fun create(

screen: Screen,

navigator: Navigator,

): Presenter<*, *>?

}

View Slide

Presenter Factory
fun ObservableTransformer.asPresenter()

: Presenter {

return object : Presenter {

override fun start(

scope: CoroutineScope,

): Presenter.Binding {

// Stuff.

}

}

}

View Slide

fun CoroutinePresenter.asPresenter()

: Presenter {


override fun start(



// Stuff.

}

}

}
Presenter Factory

View Slide

fun MoleculePresenter.asPresenter()

: Presenter {


override fun start(



// Stuff.

}

}

}
Presenter Factory

View Slide

fun ObservableTransformer.asPresenter(): Presenter

fun CoroutinePresenter.asPresenter(): Presenter

fun MoleculePresenter.asPresenter(): Presenter
Presenter Factory

View Slide


fun createView(

screen: Screen,

parent: ViewGroup,

): Ui<*, *>?

}

fun create(

screen: Screen,


): Presenter<*, *>?

}

View Slide


fun createView(

screen: Screen,

parent: ViewGroup,

): Ui<*, *>?

}

fun create(

screen: Screen,


): Presenter<*, *>?

}
interface TransitionFactory {

fun createTransition(

fromScreen: Screen,

fromView: View,

toScreen: Screen,

toView: View,

parent: ViewGroup,

back: Boolean,

isTab: (Screen) -> Boolean,

): Animator?

}

View Slide

class InvestingViewFactory @Inject internal constructor(

private val customOrder: InvestingCustomOrderView.Factory,

private val featureFlag: FeatureFlagManager,

) : BroadwayViewFactory {

override fun createView(screen: Screen, context: Context, parent: ViewGroup): View? {

val view = when (screen) {

is DependentWelcomeScreen -> DependentWelcomeView(context)

is CustomOrderScreen -> customOrder.build(context)

is NotificationSettings -> if (featureFlag.something()) {

InvestingNotificationSettingsNew(context)

} else {

InvestingNotificationSettingsLegacy(context)

}

else ->

XmlFactory.inflate(

context = context,

layoutResId = when (screen) {

is InvestingHome -> R.layout.investing_home

else -> return null

},

parent = parent,

)

}

return view

}

}

View Slide

class InvestingPresenterFactory @Inject internal constructor(

private val notificationSettingsPresenter: InvestingNotificationSettingsPresenter.Factory,

private val customOrderPresenter: InvestingCustomOrderPresenter.Factory,

private val investingHomePresenter: InvestingHomePresenter.Factory,

private val dependentWelcomePresenter: DependentWelcomePresenter.Factory,

) : PresenterFactory {

override fun create(

screen: Screen,


): Presenter<*, *>? {

return when (screen) {

is DependentWelcomeScreen -> dependentWelcomePresenter.construct(navigator).asPresenter()

is CustomOrderScreen -> customOrderPresenter.create(screen, navigator).asPresenter()

is InvestingHome -> investingHomePresenter.create(navigator, screen).asPresenter()

is NotificationSettings -> notificationSettingsPresenter.create(screen, navigator).asPresenter()

else -> null

}

}

}

View Slide

Glue

View Slide

@Provides

fun provideBroadway(

viewFactories: Set,

presenterFactories: Set,

): Broadway {

return Broadway(

viewFactories = viewFactories.toList(),

presenterFactories = presenterFactories.toList(),

)

}
Glue

View Slide

class RealNavigator(

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

View Slide

- Hook up your factories into Broadway.

- Draw the rest of the owl.
Glue: try it at home!

View Slide

Glue: try it at Cash App!
- navigator.goTo(SomeScreen)

- Determine the screen type: full, overlay, meta.

- Back stack management

- Tear down old presenter

- currentPresenterScope.cancel()

- Save UI state

- Spin up new presenter

- val newPresenter = presenterFactories.asSequence()
 
.mapNotNull { it.create(screen, navigator) }
 
.firstOrNull()

- newPresenter.start(scope)

- Create UI

- val newUi = uiFactories.asSequence()
 
.mapNotNull { it.createUi(screen, themedContext, parent) }
 
.firstOrNull()

- Restore UI state if adequate

- Bind UI to Presenter

- newPresenterScope.launch {
 
ui.setEventReceiver(presenter::sendEvent)
 
presenter.models.collect(ui::setModel)
 
}

- Deliver results

- Attach UI and runs transition

- Remove old UI

View Slide

FIN

View Slide

References
• Molecule

• https://github.com/cashapp/molecule

• Turbine

• https://github.com/cashapp/turbine

• Paparazzi

• https://github.com/cashapp/paparazzi

• Android Jetpack Compose

• https://developer.android.com/jetpack/compose

• Kotlin Coroutines

• https://kotlinlang.org/docs/coroutines-overview.html

• TestParameterInjector

• https://github.com/google/TestParameterInjector

• RxJava

• https://github.com/ReactiveX/RxJava

• Circuit

• https://github.com/slackhq/circuit
FIN

View Slide

Sweet Architecture

Sweet Architecture

Benoît Quenaudon

More Decks by Benoît Quenaudon

Other Decks in Programming

Featured

Transcript