Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Need Suggestion- Shared UI Library - Across Cross Platforms

Level 1
Level 1

Hi All,

I need suggestion for the below business problem:


We have two set of sites 1) All Marketing sites built in Adobe AEM and 2) All transaction (Authenticated) sites hosted in React Web application.

Now each of these platform has their own set of shared UI Library.I mean AEM has its own UI Library built from Core WCM components and similarly React Application has its own UI Shared lib built using React components.

Now there is a requirement to produce a unified shared library across organization.


Below are the Options i can think off:


1) Hybrid SPA Editor Approach : In this approach i am thinking of managing two separate Library one with AEM(Non SPA) and one by Bringing in React Library inside AEM by mapping each react component with AEM SPA Component. In this method as per my understanding both spa and non spa components cannot live in same page. We may need to create two separate page comp one to support spa and one to support non spa(Which is a disadvantage). In this way we can build pages from both library components and reuse them.


2) Hybrid Non SPA Editor Approach: In this approach i am thinking of managing two separate Library same like abobe.Only difference is i dont want to use AEM SPA Editor component.Instead i want to directly inject the react component inside AEM component by using Rehydration/Custom tag method with data props.So  that we can use both spa and non spa in same page using same page component(Which is an advantage compared to above approach)

- I am  leaning slightly towards this approach.


3) Complete AEM MPA (Non SPA) Components approach - In this method i am thinking of rewriting all react components into AEM components.(I know its very expensive and time consuming) In that way we have only one shared library which is AEM Comp library by which we can also suggest to Migrate React Application to AEM Eco system.


4) Complete AEM SPA Component Approach - Remove/Rewrite all AEM components to SPA based Components mapped to react shared library.So that we maintain only one library which is react library.Same disadvantage like above method time consuming, also cannot use oob components provided by AEM.

- I am against this approach



Please suggest your thoughts and Ideas.



1 Reply