Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Headless AEM Implementation

Avatar

Level 10

Hi all,

What exactly is the meaning of Headless AEM Implementation? Often times, clients keep saying this.

1. A totally different front end accessing AEM Data store (JCR or so)? In this case, there are no AEM Templates, but AEM Components may be there connecting the new front end with AEM Data store.

2. A totally different front end uses AEM Templates, which in turn invokes AEM components, etc.

Ex: When we use Angular JS, AEM Templates use this, in place of regular JS.

So, in effect, the whole thing remains the same, except for the JS used.

Appreciate your replies.

Thanks,

Rama.

5 Replies

Avatar

Level 10

This is simply a term. More information here to give you an idea - https://www.mytechlogy.com/IT-blogs/11072/headless-web-development-everything-you-need-to-know/#.WyJ...

Anyhow the best practice with AEM now are these:

1 - Use Editable Templates to drive your site (no longer use Static Templates)- Adobe Experience Manager Help | Creating an Adobe Experience Manager 6.4 website using Editable Temp...

2 - When possible - use Core Components - http://www.aemcq5tutorials.com/tutorials/aem-core-components/

3 - Use HTL to develop new components (no longer use JSP) - Getting Started with HTL (many times you need to develop your own components - you should use HTL over other JS frameworks). Having said that - HTL works nicely with libs such as Bootstrap and JQuery.

4 - See this doc for an end to end -- Getting Started with AEM Sites - WKND Tutorial

These docs will show you best practice practice around building AEM sites.

Avatar

Level 10

Hi Rama,

I agree with Scott. That is just a term.

See this blog for more information: http://aempodcast.com/2017/aem-resources/aem-headless-cms/#.WyKOLKczbIU

headless.PNG

Hope this helps!!

Thanks,

Ratna Kumar.

Avatar

Level 10

Thanks Ratna Kumar.

This is a very useful link on this subject.

So, basically we could use any software for UI and as long as that UI is able to invoke DefaultGetServlet, Headless AEM could be achieved.

Ofcourse, we could customize this servlet, if it does not meet our needs.

In this case, in the whole of UI, there is no AEM at all. (including the templates).

Now, coming back to case#2 in my original query, is that a Headless AEM at all?

The UI has AEM templates in the front end.

So, I would say, it is partial Headless AEM.

Kindly throw your ideas.

Thanks,

Rama.

Avatar

Level 10

Hi Ratna Kumar/Scott,

Am I correct in my above observations?

Thanks,

Rama.

Avatar

Community Advisor

Sharing a blog that shares details on Headless CMS and how it compares against headless.

 

https://techrevel.blog/2023/10/02/a-developers-transition-from-headful-to-headless-understanding-the...

 

1. A totally different front end accessing AEM Data store (JCR or so)? In this case, there are no AEM Templates, but AEM Components may be there connecting the new front end with AEM Data store.

 

Answer: To expose data, we can use

- SlingModelExporters with Components OR

- GraphQL with content fragments 

 

2. A totally different front end uses AEM Templates, which in turn invokes AEM components, etc.

Ex: When we use Angular JS, AEM Templates use this, in place of regular JS.

So, in effect, the whole thing remains the same, except for the JS used.

 

Answer:

- Dummy pages to contain component data can be used for (SlingModelExporters with Components)

- No templates are need for GraphQL +CF approach. CF will hold all the data and GraphQL will fetch it for us


Aanchal Sikka