The Elm Architecture in prod
- 1. TEA in Prod Artur Badretdinov, Squire 1
- 2. Artur Badretdinov Digital Nomad, Lead Android Developer at Squire https://t.me/travelernote https://t.me/ohmyeventbot 2
- 3. The Elm Architecture in prod 3
- 4. Live demo ahead Real app approach, 160 Fragments Demo Repo: https://github.com/Gaket/MvuMovieDb 4
- 5. The goal of this talk » Not about theory » But about a real example 5
- 6. 6
- 7. Elm is a functional language for web apps 7
- 8. Elm Architecture is one of the UDF band 8
- 9. Really Quick Recap 1 » Unidirectional data flow » Pure functions » Immutability » Higher order functions » State machine » MVI » TEA (MVU) » Redux » The Composable Architecture 1 https://www.youtube.com/watch?v=FPbUAgyMPAc 9
- 10. 10
- 11. 11
- 12. 12
- 15. updated state = f(state, message) 15
- 16. What do we want? » Explicit state » Making state handling visible » Clear responsibilities » Increased testability » No mocks, No flakiness » Easy to reason about 16
- 17. Explicit state requirements » Same way as no platform dependencies » No side effects in Update » Otherwise, we can't guarantee repeatability 17
- 18. One way to implement Model 18
- 19. One way to implement Model Feature 19
- 20. One way to implement Feature » State » Messages » Update » Commands » Dependencies 20
- 22. Real Unidirectional Flow (UDF) 22
- 23. State » Contains everything needed to render the View » Never updated manually data class State( val loading: Boolean, val movies: List<Movie>, val message: Text, val lastRequestTime: LocalTime ) 23
- 24. Messages Whatever can lead to state change sealed class Message { // user data class SearchUpdated(val query: String, val time: LocalTime) : Message() data class MovieClicked(val movie: Movie) : Message() // system data class MoviesResponse(val response: Try<List<Movie>>) : Message() 24
- 25. Update Pure boy "Old state in, new state out" fun update(message: Message, state: State) : Pair<State, Set<Command>> = when (message) { is Message.MovieClicked -> handleMovieClick(message.movie, state) is Message.SearchUpdated -> handleSearchUpdate(message.query, state) is Message.MoviesResponse -> handleMoviesResponse(message.response, state) } 25
- 26. Commands We live in a real world * DB * Network * Random class GetMovies(query: String) : Message ({ deps -> val movies = deps.repository.searchMovies(query) return@single Message.MoviesResponse(movies) }) 26
- 27. View class MoviesFragment { override fun initDispatchers() { binding.searchInput.afterTextChanged { query -> dispatch(MoviesFeature.Message.SearchUpdated(query, LocalTime.now())) } } override fun render(state: MoviesFeature.State) { if (state.loading) { binding.searchIcon.visibility = View.GONE binding.searchProgress.visibility = View.VISIBLE } else { binding.searchIcon.visibility = View.VISIBLE binding.searchProgress.visibility = View.GONE } } } 27
- 28. How to debug 1. Check what state gets to View 2. Check the update function calls 3. Roll back a few messages if needed 28
- 29. Logs 18:00:00 Init: State {...} 18:00:03 Message: OnMovieClick(Movie(...)) 18:00:03 Render: State {...} 18:00:04 Message: OnMoviesResult(Movies(...)) 18:00:04 Render: State {...} 29
- 30. Live demo Real app approach, 160 Fragments Demo Repo: https://github.com/Gaket/MvuMovieDb 30
- 31. Other cases » One-time events » Navigation » Seperate classes for UI models 31
- 32. Imperfect world » View is expected to be stateless » Still we have scroll position, animations 32
- 33. Conclusion Not a silver bullet, but worth trying! » Clear responsibilities » Increased testability » No flakiness » Easy to reason about » A bit more code 33
- 34. Acknowledgements » Tim Plotnikov, https://twitter.com/timofeipl » Sergey Opivalov » Evgeniy Ekgardt 34
- 35. Questions? Artur Badretdinov @ Squire Repo: https://github.com/Gaket/MvuMovieDb https://twitter.com/ArtursTwit https://t.me/gaket 35