This article will talk about server-driven UI, its implementation using re-usable components called UIComponents, and creating a generic vertical list view for rendering UI components. It will conclude with a brief discussion of how UI components can serve different purposes.
What is that contract?- The server defines the list of components. For each of the…
Whichever architecture you choose, be it the MVVM, MVP, MVC, or MVI, the data-layer is the one that goes through minimal changes. It almost remains the same during architectural migrations.
The data-layer has minimal dependencies, which makes it very easy to test. It can be unit-tested using Robolectric (saves time)
It is the layer responsible for providing the data for the app with the help of network…
Creating loosely-coupled Reactive Feature Components
Re-usability is a pattern that solves the problem of duplication. It can be as simple as creating Functions, Classes, Interfaces to more complex UI-Components and Feature-Components.
The article focuses initially on the re-usability of UI-Views(UIComponents) and then the FeatureComponents. Emphasis is on the Dependency-Inversion Principle, where both the Low-level(Feature Component) and High-level component (One incorporating the low-level components) both depend on abstraction, to create loosely-coupled systems.
Before proceeding to Feature Components, we’ll start with a brief overview of UI-Components(re-usability of Views).
Scope refers to the lifetime of an object. Consider an example of a simple class.
largeScope
— Its scope is tied to the lifetime of the class. It can be accessed anywhere in the class.smallerScope
— Its scope is limited to the lifetime of a function. It can only be accessed inside the myFunction
block. It is not recognized outside this function.Scopes in dagger are nothing different. Consider a shopping app where you browse through the different screens(👇), add the products in the cart, and finally make payment.
Model-View-Intent (MVI) is a popular architecture in the Android world. It was introduced by Hannes Dorfmann. You can find it here. For the purpose of this article, a brief introduction to MVI is presented below.
MVI is a cyclical and unidirectional data-flow architecture.
In my previous article, we created reusable UIComponents using Jetpack Compose:
It had limited capability, as UIComponents could only be laid out on the screen. This article will cover user interactions, like click events, that were not handled.
It is an event on the UIComponents (e.g. a click event on the MovieUI
component).
The interaction on the UIComponent will be handled by the ComposeActivity
class that includes UIComponents. For example, a click event on the MovieView
in the HomeScreen
is handled by HomeScreen Activity
.
We have HomeScreen
and MovieDetailScreen
. Both of them contain movies (MovieView
). …
Motivation: You might have run through apps like Netflix/Amazon Prime, where an individual screen contains a lot of views that are re-used throughout the application. For example, consider the Amazon Prime Video application.
Mobile App Developer