Modularisation and Abstracted Approach for building flexible UI/UX Apps

With technology disruption taking over our everyday lives and with the advent of smart phone revolution, multiple mobile apps are released each day to simplify the lives of the customers. However, the success rate of all the apps released may not be foolproof.

Comviva builds and deploys secure, robust & user friendly apps as per client needs.

To stay ahead in this digital transformation journey, Comviva uses a Re-usable, Scalable, Abstracted & Optimised approach for Mobile App Development — MicroApp Approach.

Problems with Monolithic Architecture

Developing separate apps to deploy same functionalities but with different UI & UX using Monolithic Approach was getting tedious for us –

  • Code Maintainability: Multiple duplicate codes are used across different apps/modules which have the same set of features
  • Change Management: Adding / removing / changing feature in one of the existing deployments maintaining backward compatibility and extensibility was getting into a challenging task
  • UI/UX Flexibility: Extremely difficult to manage different UI / UX across different deployments using same set of features
  • Turn Around Time: On-boarding new deployment/change management was taking a lot of time to get into hands of end users

App Development Strategy — Micro Apps

Comviva’s App Development Strategy is to use the MicroApp Approach to:

  • Deliver mobile app functionality fast enough with limited development resources
  • Deliver apps with the high quality user experience (UX) needed to spark adoption
  • Features are developed using MicroAppsconcept
  • Product apps are developed by adding MicroApps as dependencies and stitching them using Routers
  • Product apps can have their own user journey and them

MicroApps — An independently developable, deployable and testable module

Root MicroApp (#RMA)

Setup in a separate git repo which is –

  • Developed independently as per MXVM architecture
  • Deployed independently, as dependency, which can be used in any #FMAor ProductAppas per any UX / UI
  • Tested independently for Unit Tests using mock

Feature MicroApp (#FMA)

Setup in a separate git repo which is –

  • Combination of #RMA along with Router
  • Feature specific UI is designed and passed to #RMAas per MXVM architecture
  • Feature specific User Journeyis defined using Router
  • Tested independently for unit and UI tests using mock

MXVM Architecture

Micro apps are developed following MXVM architecture where –

  • M — Model
  • X — Replaceable Views
  • VM — ViewModel

MXVM Architecture — Facilitating the replaceable views

Replaceable Views

Defined in feature micro app or product app — must follow defined nomenclature as declared in respective micro app. These views can be configured using below approaches

  • No Code : Create only XML / XIB files and connect respective outlets / identifiers. Additional static display elements can be added without any hassle. Any alignment / positioning can be implemented.
  • Low Code : If any additional functionality is required inside view, then micro app view can be extended and additional functionality can be added.

Data Flow

  • Flow Delegate: Outflow protocols for micro apps. Routers will implement these protocols and define user journey.
  • Dependency and Component: Inflow protocols for micro apps, Routers will implement these protocols and provide consumable data to micro apps.

Router

  • For each user journey, router will be defined
  • FMA or Product App Router will implement respective flow delegates of micro apps.
  • Flow delegate Method implementations will decide launch of next micro app.
  • Router will have further component classes for each micro app dependency protocols.

Product Apps

Product apps are a collection of micro apps (#RMA & #FMA), Assets and Routers

Product Apps Approach — Architecture

  • Bridge pattern is followed where implementation is done in router and abstraction is defined as micro app dependencies.
  • Product apps are a collection of micro apps with router.

Local Configurations

Micro app has its own assets — template assets — local configurations

  • Icons
  • Localized Strings
  • Colour Theme
  • Fonts

Global Configuration

  • Product app has additional configurations, which can be shared with all micro apps via Core Library Builder
  • End-point URLs
  • Configurations JSONs (Events / Firebase etc)
  • Payload Encryption Configuration
  • SSL Pinning
  • Request & Response Interceptors
  • Validation RegEx

Scaling

  • #RMAare scaled horizontally as per data layer
  • #FMAs — #RMAs are combined together to build different flows as per UI & UX
  • #FMAare scaled horizontally to build various UI / UX for particular feature
  • Product apps are vertical to #FMA
  • #FMAs & #RMAs are combined to build final product app

Robustness

  • Each Micro App is
    • Unit Tested
    • Static Code Analysis — Sonar Verified,
    • SAST — Checkmarx Verified
  • Dependency Management — Gradle / CocoaPod

Success Stories

  • Faster and Robust Deployments
  • Faster Change Management
  • Increased Productivity

Final Thoughts

  • Features are developed using micro apps approach
  • Product apps are developed by adding micro apps as dependencies and stitching using routers
  • Product apps can have their own user journey and theme

 

This blog is also accessible on Medium, via https://medium.com/@mfs.techblog/modularisation-and-abstracted-approach-for-building-flexible-ui-ux-apps-3fae0bc5a7dd?sk=325adbea9aed9181a1c14de80e970be9

Rakesh Chander

Rakesh Chander

Rakesh Chander is an iOS Architect @Comviva Technologies. He has been working on iOS apps for 10 years and loves to build abstraction & templates adhering to best coding practices. He believes in modular...