Make changes to your app on the fly without submitting to Apple

Image for post
Image for post
Photo by Charles Deluvio on Unsplash

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 Server-Driven UI?

  • It is an architecture where the server decides the UI views that need to be rendered on the application screen.
  • There exists a contract between the application and the server. The basis of this contract gives the server control over the UI of the application.

What is that contract?- The server defines the list of components. For each of the…


Unit test the Room database to build robust apps

Image of smartphone.
Image of smartphone.
Photo by Stephen Frank on Unsplash
  • Why start with the database layer for testing?
  • An overview of the data-layer
  • Classifies the types of data in the database systems, and
  • Testing them using the popular existing libraries(Jetpack, Rx, and Coroutines).

Firstly, Why Start Testing With the Database Layer?

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)

What Is a Data-Layer?

It is the layer responsible for providing the data for the app with the help of network…


Creating loosely-coupled Reactive Feature Components

Image for post
Image for post
Photo by Robert V. Ruggiero on Unsplash

Overview

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.

A peek into UI Component [UI-level]

Before proceeding to Feature Components, we’ll start with a brief overview of UI-Components(re-usability of Views).


Image for post
Image for post
Photo by Chris Lawton on Unsplash

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 are meant to define the Object’s lifetime.

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 for iOS

Image for post
Image for post
Photo by Jeremy Perkins on Unsplash

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.

  • The Model represents the state of the application. It contains the properties necessary to render the screen.
  • An Intent is an event to change the state of the system — e.g., user click is an event to change the state of the system. Also, call it [Interaction].
  • View observes the state change and updates itself accordingly.


Make UIComponents interactive with ComposeActivity

Image for post
Image for post
Photo by Maarten Deckers on Unsplash.

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.

What Is Interaction?

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.

What Are We Building?

We have HomeScreen and MovieDetailScreen. Both of them contain movies (MovieView).


A different way to think of your UI, in the form of declarative functions and consequent architecture

Image for post
Image for post
Photo by Natalia Y on Unsplash

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.

Anup Ammanavar

Mobile App Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store