Streamlining Component Architecture in AEM for a Fintech Giant

About Customer

Our customer is a fintech leader in India. They operate in various sectors, including lending, asset management, wealth management, and insurance.

Their other services include loans, EMI financing, insurance, and investment options such as mutual funds and fixed deposits.

Business Challenges

They wanted seamless handling of their unique components in their present Adobe Experience Manager (AEM) project. Their requirement was to end the redundancy of components with overlapping functionalities and curb high maintenance costs and complexity in component selection.

Our customer’s Adobe Experience Manager (AEM) project faced a significant challenge with the management of over 380 distinct components, each integral to rendering data to end-users.

The components are various AEM elements like banner, banner with CTA, banner with forms etc. The core issue stemmed from the existence of multiple components with similar use cases but minor differences, resulting in unnecessary variations and duplicates.

The project had over 25 components dedicated to displaying images in banners, each with slight feature variations, which hindered the reusability and scalability of components.

Our Solution

The proposed solution aimed at enhancing usability and efficiency through the consolidation of similar components into a unified ‘Master Component’. This Master Component would encompass all necessary features and variations, thereby reducing the overall component count and simplifying maintenance.

Implementation Steps

1. Develop a Master Component inclusive of all essential keys and special features, capable of inheriting functionalities from all child components.
2. Map the Master Component’s keys to the corresponding keys of individual components sharing the same use case, such as “Banner Title” and “Banner Header”.
3. Utilize a Groovy script (JS language used in migration) to migrate all values from existing components to the new Master Component nodes, preserving previously authored values.
4. Update the ‘sling:resourceType’ references to point to the Master Component. ‘Sling:resouceType’ is a property used in Apache Sling and AEM to define the type of resource or component. It helps in mapping a resource to the appropriate script or servlet for rendering.
5. Remove redundant child component nodes from the JCR repository.

Embitel Impact

Post-implementation, all user interfaces previously associated with the old components were seamlessly transitioned to align with the Master Component’s structure, leading to a more streamlined and maintainable system.
 

Technologies

Groovy Script

Adobe Experience Manager