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
