Android Clean Architecture

Handling lifecycle events, maintaining view state, and persisting data are all common challenges on Android that have contributed to the widespread adoption of clean architecture patterns like Model-View-Presenter (MVP) and Model-View-ViewModel (MVVM).

Android Architecture Components is a new collection of libraries announced at Google I/O to help developers manage these same nagging issues. This talk explores how Architecture Components can be leveraged in an app already using clean architecture principles to help make your code even more flexible, maintainable, and testable.

This talk was presented at GDG coast Lebanon event.
https://www.meetup.com/GDG-Coast-Lebanon/events/250065254/

Transcript

1. Android Clean Architecture BAU Mobile Application Fair
 GDG
 27th April 2018 Mohammed Touban
2. ideatolife.me
5. View Activity Web Service Activity Lifecycle System Services User Input Dependency Injection Repository Storage Presenter View EditText EditText Button
6. Clean Architecture
13. “Elegance in design… is a lack of unnecessary complexity”
14. Clean Architecture Separation of Concerns Build layered applications with clear separation of responsibilities including view, presentation, and domain logic. State Synchronization Synchronize data across screen state, session state, and server state. Testability Enables pure unit tests to test presentation logic and domain models in isolation. Integration and UI tests for components that interact with the framework and/or display.
15. visual representation of the Clean Architecture. All credit for this images goes to Uncle Bob
19. “Those who do not remember the past are condemned to repeat it.” — George Santayana
20. Clean Architecture Separation of Concerns Build layered applications with clear separation of responsibilities including view, presentation, and domain logic. State Synchronization Synchronize data across screen state, session state, and server state. Testability Enables pure unit tests to test presentation logic and domain models in isolation. Integration and UI tests for components that interact with the framework and/or display.
21. Separation of Concerns • • • View layer Presentation model Domain model
22. Clean Architecture Separation of Concerns Build layered applications with clear separation of responsibilities including view, presentation, and domain logic. State Synchronization Synchronize data across screen state, session state, and server state. Testability Enables pure unit tests to test presentation logic and domain models in isolation. Integration and UI tests for components that interact with the framework and/or display.
23. State Synchronization • • • Screen state Session state Server state
24. State Synchronization • • • Screen state Session state Server state
25. Clean Architecture Separation of Concerns Build layered applications with clear separation of responsibilities including view, presentation, and domain logic. State Synchronization Synchronize data across screen state, session state, and server state. Testability Enables pure unit tests to test presentation logic and domain models in isolation. Integration and UI tests for components that interact with the framework and/or display.
26. T estability • • • Android framework dependencies encapsulated in view layer Pure JVM unit tests for presenters and domain models Espresso, Robolectric, or UI Automator tests for view layer
27. Test Pyramid - mike cohen book in 2009 “succeeding with agile”
28. Android Test Pyramid
29. Integration Tests
30. Clean Architecture Separation of Concerns Build layered applications with clear separation of responsibilities including view, presentation, and domain logic. State Synchronization Synchronize data across screen state, session state, and server state. Testability Enables pure unit tests to test presentation logic and domain models in isolation. Integration and UI tests for components that interact with the framework and/or display.
31. GUI Architectures
32. GUI Architectures • • • • • • MVC MVP MVVM MVI MV… …
34. Supervising Controller (MVC) • • • • Smalltalk-80 One way flow of information Controller handles user input and UI events View observes changes in domain model State Sync: Data Binding Controller Model onLoginButtonClick() setUser() View View.onClick()
35. activity_login.xml <data> <variable name="user" type="com.example.loginator.User"/> </data> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.firstName}"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.lastName}"/>
36. Passive View (MVP) • • • • Also called Humble View No dependency between view and domain model Bi-directional flow of information View replaced by fake in unit tests State Sync: Flow Synchronization View View.onClick() showUser() Presenter onLoginButtonClick() Model getUser() View showUser()
37. class LoginPresenter(private val view: LoginView) { fun onLoginButtonClick(email: String?, password: String?) { if (email != null && password != null) { val user = Model.getUser(email, password) if (user != null) { view.showUser(user) } else { view.showError(“Invalid credentials") } } } } LoginPresenter.kt
38. Presentation Model (MVVM) • • • View forwards user input to presentation model Presentation model mutates state using domain model View observes changes in the presentation model State Sync: Observer Pattern ViewModel Model onLoginButtonClick() getUser() View View.onClick() onUpdateUser( ) updateUser()
39. Supervising Controller (MVC) Passive View (MVP ) Presentation Model (MVVM ) Flow of Information One way Two way Two way Model <> View Dependency Yes No No Sync Logic View Presenter View State Synchronization Data binding Flow synchronization Observer pattern GUI Architectures
40. • • • • Passive view migrates all sync logic into presentation layer MVC and MVVM require sync logic in the view layer For simpler apps, MVC or MVVM may be sufficient MVP tests are more verbose and require a fake view Humble View is the real MVP
41. Android Passive View Presenter Activity Presentation Logic Model Domain Logic User Interface User Input Lifecycle Events System Services View
42. Android Passive View Presenter Activity Presentation Logic Model Domain Logic View User Interface User Input Lifecycle Events System Services View
43. Android Passive View Presenter Activity Presentation Logic Controller Model Domain Logic View User Interface User Input Lifecycle Events System Services
44. Android Passive View Presenter Activity Presentation Logic Controller Model Domain Logic View User Interface User Input Lifecycle Events System Services
45. Presenter Fake Controller Presentation Logic Controller Model Domain Logic Stub Implementation Passive View: Unit Tests Presenter Test Test Cases Model Test Test Cases
46. Presenter Activity Presentation Logic Controller Model Domain Logic View User Interface User Input Lifecycle Events System Services Passive View: UI Tests Activity Test Test Cases
47. class LoginActivity : AppCompatActivity(), LoginView { lateinit var presenter: LoginPresenter override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_login) presenter = LoginPresenter(this) login_button.setOnClickListener({ presenter.onLoginButtonClick(login_view.email, login_view.password) }) } // ... } LoginActivity.kt
48. interface LoginView { fun showUser(user: User) fun showError(error: String) } LoginView.kt
49. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.login.LoginView android:id="@+id/ login_view" android:layout_width="match_parent" android:layout_height="match_parent"/> <com.example.login.UserView android:id="@+id/ user_view" android:layout_width="match_parent" android:layout_height="match_parent"/> </FrameLayout> activity_login.xml
50. class LoginView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : LinearLayout(context, attrs, defStyleAttr) { var email: String? = null get() = login_email.text.toString() var password: String? = null get() = login_password.text.toString() var error: String? = null set(value) { login_error.text = value } init { (getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater).inflate(R.layout.view_login, this, true) } } LoginView.kt
51. <EditText android:id="@+id/login_email" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <EditText android:id="@+id/login_password" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:id="@+id/login_button" android:layout_width="wrap_content" android:layout_height=“wrap_content"/> <TextView android:id=“@+id/login_error" android:layout_width="wrap_content" android:layout_height="wrap_content"/> view_login.xml
52. class LoginPresenter(private val view: LoginView) { fun onLoginButtonClick(email: String?, password: String?) { if (email != null && password != null) { // … get user from REST API call if (user != null) { view.showUser(user) } else { view.showError(“Invalid credentials") } } } } LoginPresenter.kt
53. class LoginActivity : AppCompatActivity(), LoginView{ // ... override fun showUser(user: User) { login_view.visibility = View.GONE user_view.visibility = View.VISIBLE user_view.user = user } override fun showError(error: String) { login_view.error = error } } LoginActivity.kt
54. class UserView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : LinearLayout(context, attrs, defStyleAttr) { var user: User? = null set(value) { user_name.text = value?.name user_email.text = value?.email } init { (getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater).inflate(R.layout.view_user, this, true); } } UserView.kt
55. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/user_name" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@+id/user_email" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> view_user.xml
56. Android-y challenges • • • • • Foreground/background events Configuration change Presenter scope Long-running operations Data persistence
57. Android Architecture Components Android Architecture Components
58. Android Architecture Components • • • • • Lifecycle ViewModel LiveData Room Paging Library
59. Controller LifecycleActivity Web Service Activity Lifecycle System Services User Input Dependency Injection Repository Model Model Storage Presenter View EditText EditText Button
60. Controller LifecycleActivity Web Service Activity Lifecycle System Services User Input Dependency Injection Repository Model LiveData Room Storage Presenter ViewModel View EditText EditText Button
61. Some thoughts for the future… • • • • • Community-driven architecture Mix and match components Fragments? Lifecycle aware libraries We are all in this together
62. Android Clean Architecture BAU Mobile Application Fair
 GDG
 27th April 2018 Mohammed Touban