Need Suggestion- Shared UI Library - Across Cross Platforms

[Rajashankar33]

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.

[Rajashankar33]

@Jörg_Hoh  @arunpatidar  Any thoughts/Suggestions please

[arunpatidar · Accepted solution]

Hi,

I can share the approach that we used.

We had SPA component which is reach based. Author can add app id and other wrapper tags and include extra js/css as well which is function to SPA.

Other JavaScript and CSS are common to the design and included from AEM clientlibs.