Getting started with Headless Architecture in AEM

Today we are going to talk about Headless Architecture with Adobe Experience Manager.

The headless CMS concept was born from the demands of this digital era and the business’ needs to focus on engaging customers with personalized content via multiple channels at all stages of the customer journey.

Headless architecture offers a new way of presenting AEM content. Unlike the traditional AEM solutions, headless does it without the presentation layer (the “head”) that would dictate how the content should be displayed. Instead, you control the presentation completely with your own code in any programming language.


PRE-REQUISITES:
All examples are based on AEM 6.5, an angular project and a react project. In order to run these projects, you will require:
• NodeJS: https://nodejs.org
• Apache Cordova: https://cordova.apache.org
• Ionic Framework: https://ionicframework.com
• Angular: https://angular.io
• AEM 6.5 author and publish instances

FINAL APPS:



How to create them
There are three different ways of implementing AEM as an API:
• Model.json
• Assets HTTP API
• Java selector

All examples use Content Fragment which are defined as an Asset with multiple data.


The content fragment model used for all the examples is the following.


Implementing AEM as an API
1 – Model.json
Firstly, we will explain about model.json extension, which can be added to any AEM page and obtain an .json file with the structure and content.

Example:


Heroes tabs on both, react or angular project, consume data from this API http://localhost:4503/content/we-retail/us/en/api/speakers.model.json. This is just an AEM page with content fragments inside, where you can edit and publish them; and see how it changes on angular and react apps. Also, if you add the word “tidy” to the URL to have a better view of the json http://localhost:4503/content/we-retail/us/en/api/speakers.model.tidy.json .

It requires some parse from the front-end app.


The outcomes you may have are the following.



2 – Assets HTTP API
Secondly, with Assets HTTP API you are able to consume any folder asset from AEM as a json. It only contains information about assets.

Example:


As you can see, it doesn’t contain any information about pages and it’s easier to parse it.

With the json you can create components like the following one:


3 – Selector
Thirdly, you can create a java selector class and parse json of any page into a new one with the structure that you need.

Example:

It’s products we-retail page json parsed by the next selector.

By doing this you can replicate the product we-retail page on any front-end app, like this:



Conclusion
As a result, with Headless Architecture in AEM, you can develop in a shorter time and without much effort two different apps by using three different methods to expose data from AEM. Also, you can re-use them to create any app for any channel, rising the opportunity to select any of these methods to show the data from AEM.

You can write your websites or mobile applications using any programming language, your favorite tools, and your own development process, while it also provides higher security and much easier scalability.
The question now is, what are you waiting to try it with your favorite front-end framework?