Achieving Agility and Flexibility with AEM Hybrid Implementation

Hey there! Get ready for an exciting presentation where we dive into the world of Adobe Experience Manager (AEM) and its hybrid implementation using React. We'll be exploring the ins and outs of this approach, combining the best of both headless and headful strategies. And guess what? We're bringing along some practical tips, best practices, and real-world examples to spice things up and help you rock your own implementations.

With AEM Hybrid, you can supercharge your organization's digital experiences, making them more agile, scalable, and flexible across different channels and devices. But hold on tight, because we'll also be discussing the challenges you might encounter along the way. We've got your back with loads of insights, so you can avoid any potential pitfalls and make your hybrid solution robust and reliable.

But hey, it's not all talk! We'll take you on a journey through the "nice client" project, where we created user-friendly authoring environments and seamlessly integrated with third-party systems. You'll see firsthand how the hybrid implementation process can transform your digital experiences into something truly amazing.

So, if you're eager to learn how AEM Hybrid empowers organizations to leverage the coolest frontend technologies while tapping into the powerful content management and personalization features of AEM, then this presentation is a must-attend. Don't miss out on this awesome opportunity to level up your digital game!

Seeing the general trend in the industry to move AWAY from SPAs (e.g. for performance reasons, among others), do you see SPAs as a future-proof solution? Wouldn't MPA headless rendering be a more natural, simpler and stable approach?
(see answer in talk video)


Historically I've had many discrepancies between Storybook and AEM in how code actually ended up working. How do you test this interaction in a hybrid implementation?

(see answer in talk video)


Can the contract be defined outside of FE/BE as well in order to be more easily accessible to all devs instead of defined in the FE?


Definitely, it can reside in the GIT repository, for example, may be in another folder called 'docs'.

How the integration testing implemented ?

Juan Sanchez

For this client we did unit test on frontend. Unit test in backend and integration test done by a QA specialist per component

Where do you call the SSR from?

Juan Sanchez

Is done by AEM OOTB but it is implemented with a handler in the body.html of the page component in ui.apps. To enable this feature the SSR flag needs to be set to true in the mvn archetype

I am just curious to understand the difference between this approach and any traditional aem spa approach?

Juan Sanchez

The approach that we showed was the ootb way to do SPA with AEM, using Sites and SPA editor… is the couple solution for SPA. Feel free to reach out we can talk in more details

Lucian-Felix Ghita

Great presentation! It looks to me that the server components are implementing APIs (in transport or view domain) for the JS frontend. Is that true?

Juan Sanchez

You can see it like that like an specific api endpoint for the component… but since this is being handled by AEM, then you don’t need to care about the calls to certain endpoint. The requests are made per page not per component. 🤗 feel free to reach out if you need more info about it