Peter Mahlen - Mobius A Loopy UI Architecture

Transcript

1. Petter Måhlén Android @ Spotify a loopy ui architecture
2. agenda 01 Android @Spotify 02 Objectives 03 Inspiration 04 Mobius Walkthrough 05 Discoveries & Learnings
3. android @spotify • 100+ monthly contributors. • 6 cities. • 50+ teams. • 400+ Android Studio Modules.
4. android @spotify a year ago • Model-View-Presenter • RxJava for everything asynchronous
5. objectives • A framework, not just a pattern • Reactive in nature • Strong separation of concerns • Explicit about side-effects • Simpler code
6. FP aspects inspiration • Data • Immutability
7. FP aspects inspiration • Pure Functions Testable Composable fun add(x: Int, y: Int): Int = x + y • Impure Functions Declared side-effects
8. Prior Art • “Managing State with RxJava” • Redux • Cycle.js/MVI • Elm • Andy Matuschak’s state machines
9. Mobius Walkthrough
10. the nature of programs • Can be modelled as a State Machine • State represented through data • State transitions are triggered by Events
11. User Interface Program State Events the nature of programs
12. model // For Java we can use AutoValue data class Model(val email: String, val pass: String) Data class representing the internal state of the program.
13. events sealed class Event data class EmailInputChanged(val email: String) : Event() data class PasswordInputChanged(val pass: String) : Event() Data classes representing different types of events that can happen in your domain.
14. events in java @DataEnum interface Event_dataenum { dataenum_case EmailInputChanged(String email); dataenum_case PasswordInputChanged(String password); } DataEnum annotation processor allows you to create ADTs in Java.
15. User Interface Program State Events the nature of programs
16. update(model, event) ➞ newModel Interaction Events Model Event Model User Interface Update M O B I U S P U R E I M P U R E
17. update fun update(model: Model, event: Event): Model = when (event) { ... }
18. update fun update(model: Model, event: Event): Model = when (event) { is EmailInputChanged -> model.copy(email = event.email) }
19. update fun update(model: Model, event: Event): Model = when (event) { is EmailInputChanged -> model.copy(email = event.email) is PasswordInputChanged -> model.copy(pass = event.pass) }
20. update fun update(model: Model, event: Event): Model = when (event) { is EmailInputChanged -> onEmailChanged(model, event) is PasswordInputChanged -> model.copy(pass = event.pass) } fun onEmailChanged(model: Model, event: EmailInputChanged): Model = model.copy(email = event.email)
21. update fun update(model: Model, event: Event): Model = when (event) { is EmailInputChanged -> onEmailChanged(model, event) is PasswordInputChanged -> onPassChanged(model, event) } fun onEmailChanged(model: Model, event: EmailInputChanged): Model = model.copy(email = event.email) fun onPassChanged(model: Model, event: PasswordInputChanged): Model = model.copy(pass = event.pass)
22. update more state data class Model(..., val canLogin: Boolean)
23. more state update data class Model(..., val canLogin: Boolean) fun verifyCreds(email: String, password: String): Boolean = ...
24. more state update data class Model(..., val canLogin: Boolean) fun verifyCreds(email: String, password: String): Boolean = ... fun onEmailChanged(model: Model, event: EmailInputChanged): Model = model.copy(email = event.email)
25. more state update data class Model(..., val canLogin: Boolean) fun verifyCreds(email: String, password: String): Boolean = ... fun onEmailChanged(model: Model, event: EmailInputChanged): Model = model.copy(email = event.email, canLogin = verifyCreds(event.email, model.pass))
26. more state update data class Model(..., val canLogin: Boolean) fun verifyCreds(email: String, password: String): Boolean = ... fun onEmailChanged(model: Model, event: EmailInputChanged): Model = model.copy(email = event.email, canLogin = verifyCreds(event.email, model.pass)) fun onPassChanged(model: Model, event: PasswordInputChanged): Model = model.copy(pass = event.pass)
27. more state update data class Model(..., val canLogin: Boolean) fun verifyCreds(email: String, password: String): Boolean = ... fun onEmailChanged(model: Model, event: EmailInputChanged): Model = model.copy(email = event.email, canLogin = verifyCreds(event.email, model.pass)) fun onPassChanged(model: Model, event: PasswordInputChanged): Model = model.copy(pass = event.pass, canLogin = verifyCreds(model.email, event.pass))
28. update(model, event) ➞ newModel Interaction Events Model Event Model User Interface Update M O B I U S P U R E I M P U R E
29. more events sealed class Event data class EmailInputChanged(val email: String) : Event() data class PasswordInputChanged(val pass: String) : Event() object LoginRequested : Event()
30. update more state data class Model(..., val loggingIn: Boolean)
31. more state update data class Model(..., val loggingIn: Boolean) when (event) { ... is LoginRequested -> onLoginRequested(model) }
32. more state update data class Model(..., val loggingIn: Boolean) when (event) { ... is LoginRequested -> onLoginRequested(model) } fun onLoginRequested(model: Model): Model = if (!model.loggingIn && model.canLogin) model.copy(loggingIn = true) else model
33. update(model, event) ➞ (newModel, effects) Interaction Events Model Event Model User Interface Update Effects Effect Handler ? M O B I U S P U R E I M P U R E
34. effects sealed class Effect data class AttemptLogin(val email: String, val pass: String) : Effect() data class ShowErrorMessage(val msg: String) : Effect() Data classes representing different types of effects your program would like to happen.
35. Next<M,F> Next.next(M model) Next.next(M model, Set<? extends F> effects) Next.dispatch(Set<? extends F> effects) Next.noChange() A special type that tells Mobius what should happen next.
36. returning next fun update(model: Model, event: Event): Model = ... fun onEmailChanged(model: Model, event: EmailInputChanged): Model = model.copy(email = event.email, canLogin = verifyCreds(event.email, model.password)) fun onPassChanged(model: Model, event: PasswordInputChanged): Model = model.copy(pass = event.password, canLogin = verifyCreds(model.email, event.password))
37. returning next fun update(model: Model, event: Event): Next<Model, Effect> = ... fun onEmailChanged(model: Model, event: EmailInputChanged): Model = model.copy(email = event.email, canLogin = verifyCreds(event.email, model.password)) fun onPassChanged(model: Model, event: PasswordInputChanged): Model = model.copy(pass = event.password, canLogin = verifyCreds(model.email, event.password))
38. returning next fun update(model: Model, event: Event): Next<Model, Effect> = ... fun onEmailChanged(model: Model, event: EmailInputChanged): Next<Model, Effect> = model.copy(email = event.email, canLogin = verifyCreds(event.email, model.password)) fun onPassChanged(model: Model, event: PasswordInputChanged): Model = model.copy(pass = event.password, canLogin = verifyCreds(model.email, event.password))
39. returning next fun update(model: Model, event: Event): Next<Model, Effect> = ... fun onEmailChanged(model: Model, event: EmailInputChanged): Next<Model, Effect> = next(model.copy(email = event.email, canLogin = verifyCreds(event.email, model.password))) fun onPassChanged(model: Model, event: PasswordInputChanged): Model = model.copy(pass = event.password, canLogin = verifyCreds(model.email, event.password))
40. returning next fun update(model: Model, event: Event): Next<Model, Effect> = ... fun onEmailChanged(model: Model, event: EmailInputChanged): Next<Model, Effect> = next(model.copy(email = event.email, canLogin = verifyCreds(event.email, model.password))) fun onPassChanged(model: Model, event: PasswordInputChanged): Next<Model, Effect> = next(model.copy(pass = event.password, canLogin = verifyCreds(model.email, event.password)))
41. returning next fun onLoginRequested(model: Model): Model = if (!model.loggingIn && model.canLogin) model.copy(loggingIn = true) else model
42. returning next fun onLoginRequested(model: Model): Next<Model, Effect> = if (!model.loggingIn && model.canLogin) model.copy(loggingIn = true) else model
43. returning next fun onLoginRequested(model: Model): Next<Model, Effect> = if (!model.loggingIn && model.canLogin) next(model.copy(loggingIn = true)) else next(model)
44. dispatching effects no change fun onLoginRequested(model: Model): Next<Model, Effect> = if (!model.loggingIn && model.canLogin) next(model.copy(loggingIn = true)) else noChange()
45. dispatching effects no change fun onLoginRequested(model: Model): Next<Model, Effect> = if (!model.loggingIn && model.canLogin) next(model.copy(loggingIn = true), effects(AttemptLogin(model.email, model.pass))) else noChange()
46. dispatching effects no change fun onLoginRequested(model: Model): Next<Model, Effect> = if (!model.loggingIn && model.canLogin) next(model.copy(loggingIn = true), effects(AttemptLogin(model.email, model.pass))) else dispatch(effects(ShowErrorMessage("Can't login”)))
47. where do these effects go? Interaction Events Model Event Model User Interface Update Effects Effect Handler ? M O B I U S P U R E I M P U R E
48. effect handlers • Do exactly what the name suggests.. Handle Effects • Effect handlers are impure • Can generate more Events to communicate results, progress or anything really
49. effect handlers Interaction Events Model Event Model User Interface Update Effect Feedback Events Effects Effect Handler M O B I U S P U R E I M P U R E ?
50. feedback events sealed class Event data class EmailInputChanged(val email: String) : Event() data class PasswordInputChanged(val pass: String) : Event() object LoginRequested : Event() object LoginSuccessful : Event() data class LoginFailed(val errorMsg: String) : Event()
51. navigation effects sealed class Effect data class AttemptLogin(val email: String, val pass: String) : Effect() data class ShowErrorMessage(val msg: String) : Effect() object NavigateToHome : Effect()
52. update chaining effects when (event) { ... is LoginSuccessful -> onLoginSuccess(model) is LoginFailed -> ... } fun onLoginSuccess(model: Model): Next<Model, Effect> = dispatch(effects(NavigateToHome))
53. update chaining effects when (event) { ... is LoginSuccessful -> onLoginSuccess(model) is LoginFailed -> onLoginFailed(model, event) } fun onLoginSuccess(model: Model): Next<Model, Effect> = dispatch(effects(NavigateToHome)) fun onLoginFailed(model: Model, event: LoginFailed): Next<Model, Effect> = next(model.copy(loggingIn = false), effects(ShowErrorMessage(event.errorMsg)))
54. effect handlers RxMobius.subtypeEffectHandler<Effect, Event>() .addAction(NavigateToHome.javaClass, { showPage(HOME_PAGE) }) .addConsumer(ShowErrorMessage::class.java, { view.showErrorMessage(it.message) }) .addTransformer(AttemptLogin::class.java, ::loginHandler) .build()
55. effect handlers fun loginHandler(attemptLogins: Observable<AttemptLogin>) = attemptLogins.switchMap { loginService.login(it.email, it.password) .map { result -> when (result) { is Success -> LoginSuccessful is Timeout -> LoginFailed("Login request timed out!") is Failure -> LoginFailed(result.message) } } }
56. kind of events • UI interactions (user intent) • Effect handlers (effect feedback) • External events • System events (eg. network changes) • Application global state changes
57. mobius loops Interaction Events Model Event Model User Interface Update Effect Feedback Events Effects Effect Handler M O B I U S P U R E I M P U R E External Events Event Source
58. mobius-rx • Handle effects using RxJava chains ObservableTransformer<Effect, Event> • Attach MobiusLoop to an Observable<Event> ObservableTransformer<Event, Model> • Create EventSource out of Observables Observable<Event>
59. mobius-test val model: Model = Model(email = "foo@bar.com", pass = "Hunter2", canLogin = true, loggingIn = false) spec.given(model) .whenEvent(LoginRequested) .then(assertThatNext( hasModel(model.copy(loggingIn = true)), hasEffects(AttemptLogin("foo@bar.com", "Hunter2")) )) • TDD your Update with UpdateSpec and write behavior tests • Hamcrest Next matchers
60. objectives recap • A framework, not just a pattern • Reactive • Separation of concerns • Explicit about side-effects • Simpler code
61. comparing to mvi • Events instead of intent • Less Rx intense • MVI: intent -> action / state change • Mobius: event -> state change -> effect
62. some nice side effects • Better debuggability • A unified modeling approach Collaborative and inclusive Answers the important questions as early as possible Easy to use and follow • Better planning
63. coming up, maybe • IntelliJ/Android Studio plugin • Mobius.Swift • And more?
64. Thanks! Petter Måhlén - petter@spotify.com mobius https://github.com/spotify/mobius dataenum https://github.com/spotify/dataenum