AEM CMS architecture options – Headless vs Hybrid vs Full Stack

When it comes to understanding of the CMS architecture specific to AEM, it gets difficult to search for an article with all the details of different architectures and their pros and cons.

Here you are at the right place to obtain all these details.

Let’s get started.

What are CMS and CMS architecture?

A Content Management System is a solution for managing, storing, publishing, optimizing and modifying the content to provide an excellent digital experience over the websites. Previously, people used to require technical knowledge to modify a very small piece of content. (For example, price updates of mobile plans on the telecommunication website.)  Nowadays with CMS in place, one can modify content easily without the need for high technical knowledge.

AEM (Adobe Experience Manager) is a Content Management System which manages the content, images, videos, publishing of the content, workflows, backend services to fetch the content, content fragments and experience fragments under one roof.  

CMS (Content Management System) architecture defines the underlying connection between backend and frontend. CMS architecture is a way the content management system is organized.

Why it’s essential to choose the right architecture?

It is crucial to define architecture in the early stage of development. From the business point of view, we should be clear on which architecture we choose to best fit our requirements.

Choosing the wrong architecture can increase costs or lead to project failure.

According to our requirements, we can determine the architecture.

In AEM, we should consider the number of frontend developers and backend developers, the cost of the project, the number of static components/templates in the project, functionalities involved in the project, the scope of the project and various channels to host the website like an app, multiple sites and kiosks.

We can make sure the architecture is robust enough to support timely growing projects.

Different architectures options

We have three CMS architecture options provided by Abode specific to AEM.

• Full Stack Architecture
• Hybrid Architecture
• Headless Architecture

AEM CMS Architecture Full Stack, Hybrid and Headless

Let’s get into details of each and its pros and cons.

1. AEM Full Stack Architecture:

Full stack AEM architecture refers to the architecture wherein frontend and backend are handled in the same system. It is also called Traditional CMS. In this architecture, we can use any frontend tool along with the AEM within a single system.

Here, the cost of managing the platforms gets reduced since we will be using all technology stacks included in a single architecture. Also, here we can leverage the OOTB (Out-of-the-box) components to make development a lot easier and faster.

Once we build the project the JS and CSS from the ui.frontend will be minified and stored into app/project name/clientlibs.

Inside the AEM component, we can use sightly (HTL – HTML Template Language) in the HTML to render dynamic content from sling models. Here all the content creation, styling, delivering, and presenting happens in AEM.

It provides full control of the content editing.

But we cannot expose and distribute the content to multiple channels outside of the system directly.

Pros and Cons of Full Stack

2. AEM Headless Architecture:

AEM as a headless service becoming popular these days.

Headless decouples the frontend and backend. The meaning of “Headless” refers to no selected head (presentation channel) attached to it.

AEM Headless Architecture could provide better performance. This architecture supports new channels.

It is API-driven. In AEM content is passed through JSON to different channels. Then these channels can utilize the content to create customized designs.

In Headless Architecture, the GraphQL API / Asset Rest API is used to fetch the content stored in content fragments and content fragment models. There is less dependency on the backend in this architecture. Here, content is served as a service API for interaction between the backend and any frontend to transfer content via any device. It requires more support from front-end developers. In this architecture, content is created in AEM, but styling it, presenting it, and delivering it all happen on another platform. It is a modern development pattern for implementing experiences across websites.

Pros and Cons of Headless

3. AEM Hybrid Architecture:

Hybrid CMS is the best of both worlds.  In AEM we can use Hybrid SPAs to get the combination of both Traditional and Headless architecture.

The efficiency and ease of use of a traditional CMS combined with the flexibility and scalability of a headless development framework.

Depending on the business needs we can choose the traditional and headless approach. But once we choose a designated frontend, the hybrid solution may not give the flexibility that headless can.

With a hybrid CMS, we can create our own or use prebuilt templates and make that same content available and easily reusable across any channel or device with the use of APIs.

We can use the Out of the Box components for delivering the content to the web.

Here in SPA Editor, we have a one-to-one mapping between the frontend and backend components.

In case of rich interaction between the user and our application, SPA (Single Page Applications) can be used.

The content and experiences are distributed to any channel and the content/experiences delivered are either as fully formatted HTML or as JavaScript Object Notation (JSON) over HTTP APIs.

In the case of the SPA Editor, the communication between the page editor and the SPA is made using JSON instead of HTML.

The SPA Editor offers a WYSIWYG (What You See Is What You Get) user interface that enables authors to modify the content, layout, and presentation, just as they would with traditional web pages.

Both front-end and backend developers can work independently on their components and those components can be combined with one-to-one mapping. Different frontend technologies like React and angular can be used. The JSON is generated for the content with the Sling Model exporter and can be consumed by React/angular.

Pros and Cons of Hybrid Architecture

Conclusion:

If we need static pages with more authoring control on a single channel we can go for the Traditional/ Full stack Approach. In case we need to expose our content over different devices, kiosks and mobile apps, Headless is the best-fit approach. If we need the best of both worlds with reusability, scalability and flexibility based on individual functionality and business need, the Hybrid architecture is better.

Please feel free to provide your thoughts and comments on this article based on your experience.
Reach out if you are looking for support in AEM CMS architecture options.
Email: personalisation@iamhelium.com.au
Contact Number: +61 4 0404 1227