search

Adobe-Marketing-Cloud / aem-guides-wknd-events

Step by Step guide to creating a Single Page Application to use with AEM
48 stars 34 forks source link

Had a question about using React in AEM with Adobe Target. #20

Closed doriandevelops closed 5 years ago

doriandevelops commented 5 years ago

Where I work we are rebuilding our company's home page and incorporating Adobe Target is a big must have. We're being asked by stakeholders to build it using OOTB AEM with HTL and core components to avoid any possible issues that may occur with Adobe Target integration.

So my question. Is it possible to have full functionality of Target and any other features that are OOTB with AEM if we build this page using React the way you explain in your guide? Are there are any things to consider if we do build it using React?

We have a lot of custom components that will need to be built. Extending from AEM core components seems like it would be more work than if we were to build them in React.

godanny86 commented 5 years ago

hi @DorianDevelops! This is a fantastic question, I'll try to unpack it a little bit.

Both traditional AEM sites development (HTL + Core components) and SPA Editor (React, Angular) are supported approaches. There are a few considerations to consider:

Short Term

SPA editor is not currently at feature parity with traditional Sites features including:

Long Term

It is expected that SPA editor wil reach feature parity with traditional Sites components and features but may not be until later in 2019.

Adobe Target can be used with React with an extension: https://github.com/Adobe-Marketing-Cloud/target-atjs-extensions/wiki/React-Component to integrate into any React SPA. This will be a custom integration and may not give as much authoring features as the AEM Target mode.

I will reach out to a few others internally at Adobe to help add additional information/color.

pfauchere commented 5 years ago

On top of what @godanny86 said and as you are starting from an existing site, another valid approach could be to use HTL components in conjunction with web components to encapsulate React components. This way you would have a mature solution (Page Editor + HTL) with a modern architecture (React components)

doriandevelops commented 5 years ago

Awesome! Thanks @godanny86 and @pfauchere for taking the time to respond.

@pfauchere could you point me to where I can find documentation or examples on how to create encapsulated React components with HTL in AEM? This approach would be ideal but I am unsure how React components could be use outside of the SPA editor in AEM.

We are working with a fresh code base and the project hasn't officially been kicked off yet. We're still in a discovery phase and we would like to architect this to be easy to maintain and add features in the future.

Thanks again!

pfauchere commented 5 years ago

There is only a few public documentation for now. More will be published in the coming weeks hopefully. You can start by having a look at [0]

[0] https://experiencemanaged.com/posts/a-practical-guide-to-building-spas-on-aem-using-react.html

doriandevelops commented 5 years ago

Thanks I'll check that out.