Tweet
Tweet

Slide 1

Slide 1 text

luca_nicolett MVI with Jetpack Compose

Slide 2

Slide 2 text

luca_nicolett About me • Luca • Italian • Android Engineer • Based in London • @Babylon Health

Slide 3

Slide 3 text

luca_nicolett Topics • MVI • Jetpack Compose

Slide 4

Slide 4 text

MVI luca_nicolett

Slide 5

Slide 5 text

luca_nicolett MVI VIEW INTENT MODEL T USER Updates Manipulates Interacts Sees

Slide 6

Slide 6 text

luca_nicolett MVI Core principles: • Unidirectional • Immutability • Reactiveness • Functional

Slide 7

Slide 7 text

luca_nicolett MVI

Slide 8

Slide 8 text

luca_nicolett MVI UI REDUCER BUSINESS 
 LOGIC Actions Events State UI 
 Listens STATE

Slide 9

Slide 9 text

luca_nicolett MVI SOMETHING REDUCER ACTION
 RELAY Actions State
 Updates STATE
 RELAY TRANSFORMERS Actions States Events

Slide 10

Slide 10 text

luca_nicolett MVI • Actions • Transformers • Reducers • States

Slide 11

Slide 11 text

luca_nicolett MVI The middleware • Works as a glue • Binds actions to transformers • Transformations to reducers • Actions to reducers

Slide 12

Slide 12 text

luca_nicolett MVI perform("rating selection") .on() .withReducer(reducers::reduceRatingSelected)

Slide 13

Slide 13 text

luca_nicolett MVI perform("load logged in patient data") .on( LifecycleAction.Created::class.java, ProfileScreenAction.RetryConnection::class.java, ProfileScreenAction.MonitorReady::class.java ) .transform { transformers.loadPatient(this) } .withReducer(reducers::reduceLoggedInPatient)

Slide 14

Slide 14 text

luca_nicolett MVI perform("load logged in patient data") .on( LifecycleAction.Created::class.java, ProfileScreenAction.RetryConnection::class.java, ProfileScreenAction.MonitorReady::class.java ) .transform { transformers.loadPatient(this) } .withReducer(reducers::reduceLoggedInPatient)

Slide 15

Slide 15 text

luca_nicolett MVI How does it help? • Decoupling • Testing

Slide 16

Slide 16 text

luca_nicolett MVI

Slide 17

Slide 17 text

luca_nicolett MVI

Slide 18

Slide 18 text

luca_nicolett MVI Fragment Renderer Activity render()

Slide 19

Slide 19 text

luca_nicolett MVI private fun render(state: HomeScreenRedesignState) { loading_container .show(state.loadingState == LoadingState.Loading) unable_to_connect_error_container .show(state.loadingState == LoadingState.Error) /* ... */ }

Slide 20

Slide 20 text

luca_nicolett MVI fun View.show(isVisible: Boolean = true) { this.visibility = if (isVisible) View.VISIBLE else View.GONE }

Slide 21

Slide 21 text

luca_nicolett MVI private fun render(state: EditMoodState) { submitEditsButton?.isEnabled = state.hasAppliedChanges /* ... */ }

Slide 22

Slide 22 text

luca_nicolett MVI private fun render(state: AddMoodState) { if (state.showUrgentHelpDialog) { showUrgentHelpDialog() return } /* ... */ }

Slide 23

Slide 23 text

luca_nicolett MVI

Slide 24

Slide 24 text

Jetpack Compose luca_nicolett

Slide 25

Slide 25 text

luca_nicolett Jetpack Compose

Slide 26

Slide 26 text

luca_nicolett Jetpack Compose

Slide 27

Slide 27 text

luca_nicolett Jetpack Compose • Declarative UI • Concise & Idiomatic • Stateless or Stateful components • Reusable components • Compatible

Slide 28

Slide 28 text

luca_nicolett Jetpack Compose @Composable
 @GenerateView fun Greetings(name: String) { /* ... */ } val greetingsView = findViewById(R.id.greetings) greetingsView.name = "Luca"

Slide 29

Slide 29 text

luca_nicolett Jetpack Compose @Composable
 @GenerateView fun Greetings(name: String) { /* ... */ } val greetingsView = findViewById(R.id.greetings) greetingsView.name = "Luca"

Slide 30

Slide 30 text

luca_nicolett Jetpack Compose @Composable
 @GenerateView fun Greetings(name: String) { /* ... */ } val greetingsView = findViewById(R.id.greetings) greetingsView.name = "Luca"

Slide 31

Slide 31 text

luca_nicolett Jetpack Compose • Declarative UI • Concise & Idiomatic • Stateless or Stateful components • Reusable components • Compatible • Unbundled from the OS

Slide 32

Slide 32 text

luca_nicolett Jetpack Compose

Slide 33

Slide 33 text

luca_nicolett Jetpack Compose mkdir ~/bin PATH=~/bin:$PATH curl https://storage.googleapis.com/git-repo-downloads/repo > ~/bin/repo chmod a+x ~/bin/repo

Slide 34

Slide 34 text

luca_nicolett Jetpack Compose mkdir androidx-master-dev cd androidx-master-dev repo init -u https://android.googlesource.com/platform/ manifest -b androidx-master-dev repo sync -j8 -c

Slide 35

Slide 35 text

luca_nicolett Jetpack Compose mkdir androidx-master-dev cd androidx-master-dev repo init -u https://android.googlesource.com/platform/ manifest -b androidx-master-dev repo sync -j8 -c Download the code (and grab a coffee while we pull down 6GB)

Slide 36

Slide 36 text

luca_nicolett Jetpack Compose cd path/to/checkout/frameworks/support/ ./studiow

Slide 37

Slide 37 text

luca_nicolett Jetpack Compose

Slide 38

Slide 38 text

luca_nicolett Jetpack Compose class MyActivity: Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyComposableFunction() } } }

Slide 39

Slide 39 text

luca_nicolett Jetpack Compose class MyActivity: Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyComposableFunction() } } }

Slide 40

Slide 40 text

luca_nicolett Jetpack Compose fun Activity.setContent(content: @Composable() () -> Unit) : CompositionContext? { /* ... */ }

Slide 41

Slide 41 text

luca_nicolett Jetpack Compose fun Activity.setContent(content: @Composable() () -> Unit) : CompositionContext? { val craneView = window.decorView .findViewById(android.R.id.content) .getChildAt(0) as? AndroidCraneView ?: AndroidCraneView(this) .also { setContentView(it) } val coroutineContext = Dispatchers.Main return Compose.composeInto(craneView.root, this) { WrapWithAmbients( craneView, this, coroutineContext ) {

Slide 42

Slide 42 text

luca_nicolett Jetpack Compose fun Activity.setContent(content: @Composable() () -> Unit) : CompositionContext? { val craneView = window.decorView .findViewById(android.R.id.content) .getChildAt(0) as? AndroidCraneView ?: AndroidCraneView(this) .also { setContentView(it) } val coroutineContext = Dispatchers.Main return Compose.composeInto(craneView.root, this) { WrapWithAmbients( craneView, this, coroutineContext ) {

Slide 43

Slide 43 text

luca_nicolett .findViewById(android.R.id.content) .getChildAt(0) as? AndroidCraneView ?: AndroidCraneView(this) .also { setContentView(it) } val coroutineContext = Dispatchers.Main return Compose.composeInto(craneView.root, this) { WrapWithAmbients( craneView, this, coroutineContext ) { content() } } } Jetpack Compose

Slide 44

Slide 44 text

luca_nicolett Jetpack Compose @Composable fun Greetings(name: String) { Text("Hello $name") }

Slide 45

Slide 45 text

luca_nicolett Jetpack Compose @Composable fun Text(/* ... */) { 
 /* ... */ Draw { canvas, _ -> internalSelection.value?.let { textDelegate.paintBackground( it.min, it.max, selectionColor, canvas ) } textDelegate.paint(canvas) }
 /* ... */ }

Slide 46

Slide 46 text

luca_nicolett Jetpack Compose @Composable fun Text(/* ... */) { 
 /* ... */ Draw { canvas, _ -> internalSelection.value?.let { textDelegate.paintBackground( it.min, it.max, selectionColor, canvas ) } textDelegate.paint(canvas) }
 /* ... */ }

Slide 47

Slide 47 text

luca_nicolett Jetpack Compose @Composable fun Text(/* ... */) { 
 /* ... */ Draw { canvas, _ -> internalSelection.value?.let { textDelegate.paintBackground( it.min, it.max, selectionColor, canvas ) } textDelegate.paint(canvas) 
 // Paints the text onto the given canvas. }
 /* ... */ }

Slide 48

Slide 48 text

luca_nicolett Jetpack Compose

Slide 49

Slide 49 text

luca_nicolett Jetpack Compose

Slide 50

Slide 50 text

luca_nicolett Jetpack Compose @Composable fun TextField(/* ... */) { // States val hasFocus = +state { false } val coords = +state { null } /* ... */ }

Slide 51

Slide 51 text

luca_nicolett Jetpack Compose @CheckResult("+") /* inline */ fun state(init: () -> T) = memo { State(init()) }

Slide 52

Slide 52 text

luca_nicolett Jetpack Compose /** * The State class is an @Model class meant to * wrap around a single value. * It is used in the `+state` and `+stateFor` effects. */ @Model class State @PublishedApi internal constructor(value:T) : Framed { /* ... */ }

Slide 53

Slide 53 text

luca_nicolett Jetpack Compose /** * [Model] can be applied to a class which represents your * application's data model, and will cause instances of the * class to become observable, such that a read of a property * of an instance of this class during the invocation of a * composable function will cause that component to be * "subscribed" to mutations of that instance. Composable * functions which directly or indirectly read properties * of the model class, the composables will be recomposed * whenever any properties of the the model are written to. */

Slide 54

Slide 54 text

luca_nicolett Jetpack Compose @Model data class TaskModel( var isDone: Boolean, val description: String )

Slide 55

Slide 55 text

luca_nicolett Jetpack Compose @Model data class TaskModel( var isDone: Boolean, val description: String ): BaseModel()

Slide 56

Slide 56 text

luca_nicolett Jetpack Compose @Model data class TaskModel( var isDone: Boolean, val description: String ): BaseModel() TaskModel.kt: (14, 3): Model objects do not support inheritance

Slide 57

Slide 57 text

luca_nicolett Jetpack Compose @Composable
 fun RallyBody() {
 Padding(padding = 16.dp) {
 Column {
 // TODO: scrolling container
 RallyAlertCard()
 HeightSpacer(height = 10.dp)
 RallyAccountsCard()
 }
 }
 }

Slide 58

Slide 58 text

luca_nicolett Jetpack Compose @Composable
 fun RallyBody() {
 Padding(padding = 16.dp) {
 VerticalScroller {
 Column {
 RallyAlertCard()
 HeightSpacer(height = 10.dp)
 RallyAccountsCard()
 }
 }
 } }

Slide 59

Slide 59 text

luca_nicolett Jetpack Compose

Slide 60

Slide 60 text

luca_nicolett Jetpack Compose

Slide 61

Slide 61 text

luca_nicolett Jetpack Compose @Composable fun DrawSeekBar(x: Float) { var paint = +memo { Paint() } Draw { canvas, parentSize -> /* ... */ canvas.drawRect(Rect(/* ... */), paint) canvas.drawRect(Rect(/* ... */), paint) canvas.drawCircle(/* ... */, paint) } }

Slide 62

Slide 62 text

luca_nicolett Jetpack Compose

Slide 63

Slide 63 text

luca_nicolett Jetpack Compose @Composable fun AlertDialog( onCloseRequest: () -> Unit, title: (@Composable() () -> Unit)? = null, text: (@Composable() () -> Unit), confirmButton: (@Composable() () -> Unit), dismissButton: (@Composable() () -> Unit)?, buttonLayout: AlertDialogButtonLayout ) { Dialog(onCloseRequest = onCloseRequest) { /* ... */ } }

Slide 64

Slide 64 text

luca_nicolett Jetpack Compose @Composable fun Dialog( onCloseRequest: () -> Unit, children: @Composable() () -> Unit ) { val context = +ambient(ContextAmbient) val dialog = +memo { DialogWrapper(context, onCloseRequest) } }

Slide 65

Slide 65 text

luca_nicolett Jetpack Compose @Composable fun Dialog( onCloseRequest: () -> Unit, children: @Composable() () -> Unit ) { +onActive { dialog.show() onDispose { dialog.dismiss() dialog.disposeComposition() } } }

Slide 66

Slide 66 text

luca_nicolett Jetpack Compose @Composable fun Dialog( onCloseRequest: () -> Unit, children: @Composable() () -> Unit ) { +onCommit { dialog.setContent(children) } }

Slide 67

Slide 67 text

luca_nicolett Jetpack Compose

Slide 68

Slide 68 text

luca_nicolett Jetpack Compose @Composable fun RippleRect() { val radius = withDensity(+ambientDensity()) { TargetRadius.toPx() 
 } val toState = +state { 
 ButtonStatus.Initial 
 } val rippleTransDef = +memo { 
 createTransDef(radius.value) 
 } val onPress: (PxPosition) -> Unit = 
 { position -> down.x = position.x.value

Slide 69

Slide 69 text

luca_nicolett val rippleTransDef = +memo { 
 createTransDef(radius.value) 
 } val onPress: (PxPosition) -> Unit = 
 { position -> down.x = position.x.value down.y = position.y.value toState.value = ButtonStatus.Pressed } val onRelease: () -> Unit = { toState.value = ButtonStatus.Released } PressGestureDetector(onPress = onPress, onRele Container(expanded = true) { Transition( definition = rippleTransDef, toState = toState.value Jetpack Compose

Slide 70

Slide 70 text

luca_nicolett val onRelease: () -> Unit = { toState.value = ButtonStatus.Released } PressGestureDetector( onPress = onPress, onRelease = onRelease ) { Container(expanded = true) { Transition( definition = rippleTransDef, toState = toState.value ) { state -> RippleRectFromState(state) } } } } Jetpack Compose

Slide 71

Slide 71 text

luca_nicolett @Composable fun RippleRectFromState(state: TransitionState) { // TODO: file bug for when "down" is not a 
 // file level val, it's not memoized 
 // correctly val x = down.x val y = down.y val paint = Paint().apply { color = Color( alpha = /* ... */ red = 0, green = 235, Jetpack Compose

Slide 72

Slide 72 text

luca_nicolett // file level val, it's not memoized 
 // correctly val x = down.x val y = down.y val paint = Paint().apply { color = Color( alpha = /* ... */ red = 0, green = 235, blue = 224 ) } val radius = state[radius] Draw { canvas, _ -> Jetpack Compose

Slide 73

Slide 73 text

luca_nicolett red = 0, green = 235, blue = 224 ) } val radius = state[radius] Draw { canvas, _ -> canvas.drawCircle(
 Offset(x, y), radius, paint
 ) } } Jetpack Compose

Slide 74

Slide 74 text

luca_nicolett Jetpack Compose @RunWith(JUnit4::class) @get:Rule val composeTestRule = createComposeRule() @Test
 fun topAppBar_expandsToScreen() {
 val dm = composeTestRule.displayMetrics
 composeTestRule
 .setMaterialContentAndCollectSizes {
 TopAppBar()
 }
 .assertHeightEqualsTo(appBarHeight)
 .assertWidthEqualsTo { dm.widthPixels.ipx } }

Slide 75

Slide 75 text

luca_nicolett Jetpack Compose @RunWith(JUnit4::class) @get:Rule val composeTestRule = createComposeRule() @Test
 fun topAppBar_expandsToScreen() {
 val dm = composeTestRule.displayMetrics
 composeTestRule
 .setMaterialContentAndCollectSizes {
 TopAppBar()
 }
 .assertHeightEqualsTo(appBarHeight)
 .assertWidthEqualsTo { dm.widthPixels.ipx } }

Slide 76

Slide 76 text

luca_nicolett Jetpack Compose @RunWith(JUnit4::class) @get:Rule val composeTestRule = createComposeRule() @Test
 fun topAppBar_expandsToScreen() {
 val dm = composeTestRule.displayMetrics
 composeTestRule
 .setMaterialContentAndCollectSizes {
 TopAppBar()
 }
 .assertHeightEqualsTo(appBarHeight)
 .assertWidthEqualsTo { dm.widthPixels.ipx } }

Slide 77

Slide 77 text

All together luca_nicolett

Slide 78

Slide 78 text

luca_nicolett All together OOP approach Functional approach

Slide 79

Slide 79 text

All together Object Oriented luca_nicolett

Slide 80

Slide 80 text

luca_nicolett All together interface BaseViewState { @Composable fun buildUI() }

Slide 81

Slide 81 text

luca_nicolett All together object InProgress : BaseViewState(true, null) { @Composable override fun buildUI() { Container(expanded = true) { CircularProgressIndicator() } } }

Slide 82

Slide 82 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 viewModel = /* view model init */
 setContent {
 CustomTheme {
 render(viewModel.states())
 }
 }
 /* .. */
 }

Slide 83

Slide 83 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 viewModel = /* view model init */
 setContent {
 CustomTheme {
 render(viewModel.states())
 }
 }
 /* .. */
 }

Slide 84

Slide 84 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 viewModel = /* view model init */
 setContent {
 CustomTheme {
 render(viewModel.states())
 }
 }
 /* .. */
 }

Slide 85

Slide 85 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 viewModel = /* view model init */
 setContent {
 CustomTheme {
 render(viewModel.states())
 }
 }
 /* .. */
 }

Slide 86

Slide 86 text

luca_nicolett All together override fun render( observableState: Observable ) { val state = +observe(ViewState.Idle, observableState) state.buildUI() }

Slide 87

Slide 87 text

luca_nicolett All together override fun render( observableState: Observable ) { val state = +observe(ViewState.Idle, observableState) state.buildUI() }

Slide 88

Slide 88 text

luca_nicolett All together override fun render( observableState: Observable ) { val state = +observe(ViewState.Idle, observableState) state.buildUI() }

Slide 89

Slide 89 text

luca_nicolett All together fun observe(initialState: T, data: Observable) = effectOf { val result = +state { initialState } +onActive { val disposable = data.subscribe { newValue -> result.value = newValue } onDispose { disposable.dispose() } } } return result.value }

Slide 90

Slide 90 text

luca_nicolett All together fun observe(initialState: T, data: Observable) = effectOf { val result = +state { initialState } +onActive { val disposable = data.subscribe { newValue -> result.value = newValue } onDispose { disposable.dispose() } } } return result.value }

Slide 91

Slide 91 text

luca_nicolett All together fun observe(initialState: T, data: Observable) = effectOf { val result = +state { initialState } +onActive { val disposable = data.subscribe { newValue -> result.value = newValue } onDispose { disposable.dispose() } } } return result.value }

Slide 92

Slide 92 text

luca_nicolett All together fun observe(initialState: T, data: Observable) = effectOf { val result = +state { initialState } +onActive { val disposable = data.subscribe { newValue -> result.value = newValue } onDispose { disposable.dispose() } } } return result.value }

Slide 93

Slide 93 text

luca_nicolett All together fun observe(initialState: T, data: Observable) = effectOf { val result = +state { initialState } +onActive { val disposable = data.subscribe { newValue -> result.value = newValue } onDispose { disposable.dispose() } } } return result.value }

Slide 94

Slide 94 text

luca_nicolett All together fun observe(initialState: T, data: Observable) = effectOf { val result = +state { initialState } +onActive { val disposable = data.subscribe { newValue -> result.value = newValue } onDispose { disposable.dispose() } } } return result.value }

Slide 95

Slide 95 text

All together Functional luca_nicolett

Slide 96

Slide 96 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // viewModel = /* ... */ not needed anymore setContent { PostListScreen( processIntents(intents()), reloadPostListIntentPublisher ) } }

Slide 97

Slide 97 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // viewModel = /* ... */ not needed anymore setContent { PostListScreen( processIntents(intents()), reloadPostListIntentPublisher ) } }

Slide 98

Slide 98 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // viewModel = /* ... */ not needed anymore setContent { PostListScreen( processIntents(intents()), reloadPostListIntentPublisher ) } }

Slide 99

Slide 99 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // viewModel = /* ... */ not needed anymore setContent { PostListScreen( processIntents(intents()), reloadPostListIntentPublisher ) } }

Slide 100

Slide 100 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // viewModel = /* ... */ not needed anymore setContent { PostListScreen( processIntents(intents()), reloadPostListIntentPublisher ) } }

Slide 101

Slide 101 text

luca_nicolett All together fun processIntents(intents: Observable): PostListViewState { intents.subscribe(intentsObserver) return modelState()
 } }

Slide 102

Slide 102 text

luca_nicolett All together fun modelState() = +effectOf { val result = +state { PostListViewState.Idle } var disposable: Disposable? = null +onActive { disposable = intentsObserver .applyBusinessLogic() .subscribe { result.value = it } } +onDispose { disposable?.dispose() } result.value

Slide 103

Slide 103 text

luca_nicolett All together fun modelState() = +effectOf { val result = +state { PostListViewState.Idle } var disposable: Disposable? = null +onActive { disposable = intentsObserver .applyBusinessLogic() .subscribe { result.value = it } } +onDispose { disposable?.dispose() } result.value

Slide 104

Slide 104 text

luca_nicolett fun modelState() = +effectOf { val result = +state { PostListViewState.Idle } var disposable: Disposable? = null +onActive { disposable = intentsObserver .applyBusinessLogic() .subscribe { result.value = it } } +onDispose { disposable?.dispose() } result.value } All together

Slide 105

Slide 105 text

luca_nicolett fun modelState() = +effectOf { val result = +state { PostListViewState.Idle } var disposable: Disposable? = null +onActive { disposable = intentsObserver .applyBusinessLogic() .subscribe { result.value = it } } +onDispose { disposable?.dispose() } result.value } All together

Slide 106

Slide 106 text

luca_nicolett fun modelState() = +effectOf { val result = +state { PostListViewState.Idle } var disposable: Disposable? = null +onActive { disposable = intentsObserver .applyBusinessLogic() .subscribe { result.value = it } } +onDispose { disposable?.dispose() } result.value } All together

Slide 107

Slide 107 text

luca_nicolett All together override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // viewModel = /* ... */ not needed anymore setContent { PostListScreen( processIntents(intents()) ) } }

Slide 108

Slide 108 text

luca_nicolett All together @Composable fun PostListScreen( state: PostListViewState ) { when (state) { PostListViewState.InProgress -> { Container(expanded = true) { CircularProgressIndicator() } } /* ... */ } }

Slide 109

Slide 109 text

luca_nicolett All together PostListScreen(processIntents(intents()))

Slide 110

Slide 110 text

luca_nicolett All together

Slide 111

Slide 111 text

luca_nicolett All together PostListScreen( processIntents( intents() ) )

Slide 112

Slide 112 text

luca_nicolett References MVI http://hannesdorfmann.com/android/model-view-intent https://www.novatec-gmbh.de/en/blog/mvi-in-android/ https://cycle.js.org/model-view-intent.html Jetpack Compose https://www.youtube.com/watch?v=VsStyq4Lzxo https://medium.com/q42-engineering/android-jetpack-compose-895b7fd04bf4 https://blog.karumi.com/android-jetpack-compose-review

Slide 113

Slide 113 text

luca_nicolett Thank you!

Slide 114

Slide 114 text

luca_nicolett Questions?