Sweet Architecture - Speaker Deck

Slide 1

Slide 1 text

weet Architecture

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Presenter UiModel UiEvent Ui

Slide 9

Slide 9 text

Presenter UiModel UiEvent Ui Ui

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

interface Ui { }

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

class DependentWelcomeView( context: Context, attrs: AttributeSet? = null, ) : View(context, attrs), Ui { }

Slide 17

Slide 17 text

class DependentWelcomeView( context: Context, attrs: AttributeSet? = null, ) : View(context, attrs), Ui { // views and buttons setup… }

Slide 18

Slide 18 text

Slide 19

Slide 19 text

class DependentWelcomeView( context: Context, attrs: AttributeSet? = null, ) : View(context, attrs), Ui { // views and buttons setup… override fun setEventReceiver(receiver: EventReceiver) { button.setOnClickListener { receiver.sendEvent(CtaClicked) } toolbar.setNavigationOnClickListener { receiver.sendEvent(Close) } } override fun setModel(model: DependentWelcomeViewModel) { } }

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Ui tests

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Paparazzi

Slide 25

Slide 25 text

class DependentWelcomeViewTest( ) { @get:Rule val paparazzi = Paparazzi( theme = "Theme.Cash.Default", ) @Test fun tests() { } } Paparazzi: Legacy UI Test https://github.com/cashapp/paparazzi

Slide 26

Slide 26 text

class DependentWelcomeViewTest( ) { @get:Rule val paparazzi = Paparazzi( theme = "Theme.Cash.Default", ) @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

Slide 27

Slide 27 text

@RunWith(TestParameterInjector::class) class DependentWelcomeViewTest( @TestParameter private val design: DesignTheme, ) { @get:Rule val paparazzi = Paparazzi( theme = "Theme.Cash.Default", ) @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

Slide 28

Slide 28 text

@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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Paparazzi: Reports

Slide 31

Slide 31 text

- 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 https://github.com/cashapp/paparazzi

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Presenter

Slide 37

Slide 37 text

interface Presenter { }

Slide 38

Slide 38 text

interface Presenter { val models: Flow fun sendEvent(event: UiEvent) }

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Presenter UiModel UiEvent Ui Ui

Slide 43

Slide 43 text

fun map(event): model

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Slide 50

Slide 50 text

@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() // Default model emitted. events.accept(CtaClicked) assertThat(navigator.takeNextScreen()).isEqualTo(InvestingHome()) } Observable Transformer

Slide 51

Slide 51 text

Molecule

Slide 52

Slide 52 text

@Composable fun Content(message: Message) { Column { Text(text = message.author) Text(text = message.body) } } Molecule https://github.com/cashapp/molecule

Slide 53

Slide 53 text

@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 https://github.com/cashapp/molecule

Slide 54

Slide 54 text

/** * 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 https://github.com/cashapp/molecule enum class RecompositionClock { ContextClock, Immediate, }

Slide 55

Slide 55 text

/** * 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 enum class RecompositionClock { ContextClock, Immediate, }

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Slide 60

Slide 60 text

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 { event -> when (event) { CtaClicked -> { // Start flow. } Close -> { // Navigate back. } } } } } } Molecule Presenter

Slide 61

Slide 61 text

private val stringManager: StringManager, @Io private val ioContext: CoroutineContext, ) : MoleculePresenter { @Composable override fun models(events: Flow): DependentWelcomeViewModel { LaunchedE f fect(events) { events.collect { event -> when (event) { 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

Slide 62

Slide 62 text

@Test fun models() = runTest { 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`() = runTest { presenter.test { awaitItem() // Default model emitted. sendEvent(CtaClicked) assertThat(navigator.awaitNextScreen()).isEqualTo(InvestingHome()) } } Molecule Presenter Test: Turbine https://github.com/cashapp/turbine

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

class SomethingStateManager( database: CashDatabase, 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

Slide 65

Slide 65 text

Navigation

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

interface Navigator { fun goTo(screen: Screen) } LaunchedE f fect(events) { events.collect { event -> when (event) { CtaClicked -> { // Start flow. } Close -> { // Navigate. } } } }

Slide 68

Slide 68 text

interface Navigator { fun goTo(screen: Screen) } LaunchedE f fect(events) { events.collect { event -> when (event) { CtaClicked -> { // Start flow. } Close -> { navigator.goTo(SomeScreen()) } } } }

Slide 69

Slide 69 text

Broadway

Slide 70

Slide 70 text

Factory

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

interface ViewFactory { fun createView( screen: Screen, parent: ViewGroup, ): Ui<*, *>? } interface PresenterFactory { fun create( screen: Screen, navigator: Navigator, ): Presenter<*, *>? } interface TransitionFactory { fun createTransition( fromScreen: Screen, fromView: View, toScreen: Screen, toView: View, parent: ViewGroup, back: Boolean, isTab: (Screen) -> Boolean, ): Animator? }

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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, navigator: Navigator, ): 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 } } }

Slide 80

Slide 80 text

Glue

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

FIN

Slide 86

Slide 86 text

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