Adobe Experience Manager, commonly referred to as AEM, is a
cloud-native, API-first content management system (CMS) and Digital Asset
Management (DAM) platform that enables you to structure and deliver headless
content across multiple channels. AEM enables headless delivery of immersive
and optimized media to customers that can automatically adapt to any platform
or device.
This headless CMS will help you create immersive content that allows
marketing teams to manage channel-agnostic content using an enterprise-level
DAM. It supports a content as a service model that doesn’t need you to recreate
your content for different channels. Moreover, businesses seeking content
delivered as packed HTML (HTML/CSS/JS)
can acquire the same with AEM.
Taking the above into
consideration, in this article, we’ll be shedding some light on everything you
need to know about AEM and its unique headless content management feature.
Headless CMS Vs. Traditional CMS
To understand what headless CMS is, we need to understand what a
traditional CMS is first. Traditional CMS uses more of a ‘server side’ approach
to deliver content and involves managing content by placing everything
(content, images, HTML, CSS) in the same bucket. Doing so takes away the
ability to reuse content as it was blended with the code.
HTML is rendered on the servers, and users can generate content with
WYSIWYG editors using predefined templates. Headless CMS, on the other hand,
works a bit differently. It’s a backend CMS that decouples the content repository
“body” from the presentation layer “head”.
The content present in a headless content management system is
delivered seamlessly via APIs (Application Programming Interface) to multiple
channels or devices. Finally, the presentation of content on each platform or
channel is then done independently. But since the content is not linked to a
predefined template, the author cannot preview the content.
Adobe Experience Manager is a hybrid CMS that supports both headless
and traditional delivery models. You can create and distribute content in the
classic way or distribute via an API. This content, as a service model, is the
best of both worlds, coupled with seamless multi-channel delivery and a
simplified administration.
Adobe Experience Manager’s
headless mode for SPAs
Single page application refers to a webpage that interacts with the
user by dynamically rewriting the current page with new data from the server,
instead of loading an entirely new page. AEM supports the SPA paradigm with SPA
editor since version 6.4. With AEM’s hybrid CMS approach, you can enable
dynamic page creation, layouts and components in SPA with a visual content
editor.
Let us now look at various facets of how Adobe Experience Manager
implements the headless CMS approach.
SPAs are vital for rendering HTML in the backend
Traditionally, the HTML of a webpage is rendered by the backend server
and loads again every time the user navigates to another page. But now that
websites are much more complex and behave like full-fledged applications, SPA
is a necessity.
SPA first loads an empty HTML and JavaScript/CSS, and then the JavaScript dynamically assembles the webpage. Any additional content is
requested from backend APIs.
The single page application WYSIWYG content editor
The AEM WYSIWYG editor was extended to support SPAs. You can see the
content created directly in the app, and an author comfortable with AEM can
create content without learning a new tool. You can also reuse other assets or
content from the traditional webpage.
Content Application
Programming Interface
AEM works on the RESTful sling network. The visualization layer is already wholly decoupled from
the data through the Java Content Repository. This allows you to change the
extension from .html to .json, and AEM will return all the content for the
request page.
But due to issues like
unstructured data format, instability post changes, etc., an additional layer
called Sling Exporter Framework was introduced. This maps your data to exposed
data in APIs and defines how existing sling models should be transformed to
formats like JSON or XML.
The perks of using AEM for SPAs
Here are a few benefits of developing SPA with AEM:
●
Supports
creating SPA project template with AEM base setup, core components, etc.
●
Has a front
end build chain that directly deploys all assets into AEM.
●
Front-end
developers get total power over the front end without knowing a lot about or
installing AEM.
●
You can run a
whole integration test suite in the frontend without having to move large
amounts of data to a different stage.
Server-Side Rendering (SSR)
The single page application approach faces massive concerns with the
initial page loading screen. SSR solves the problem of slow initial page
loading times by executing JavaScript in the backend in a headless browser or NodeJS
server and returning the populated initial HTML to the client. This way, the
browser directly renders the HTML and users get immediate feedback.
Leveraging Headless AEM for clients who aren’t web-based
The content as a service model enables many use cases like Android or iOS Apps, Social Media
Snippets, digital signage systems to small IOT devices. Therefore, loosely
structured web content will cause issues. To overcome this issue, AEM was
recently extended to allow consuming content fragments with GraphQL.
In simple words, GraphQL is a
query used for an API instead of a database. It will enable clients to query
the API according to their own needs. The API won’t have to provide different
endpoints returning different amounts of data for different clients.
When should businesses implement Headless AEM?
A headless CMS can be implemented if the following points are met:
●
You want to
deliver the same user experience and code for a content-focused webpage and
hybrid mobile app.
●
When you
experience a shortage of AEM developers but have a mighty frontend development
team.
●
You want to
deliver un content from AEM to platforms that are headless (not web
technology-based).
These are only some use-cases of a headless CMS.
Bottom Line
Adobe Experience Manager is the
future of content management systems as it allows you to reuse content across
all platforms seamlessly. Furthermore, its integration into Adobe Experience
Cloud enables you to reuse the content in emails, personalization and many more
tools and technologies.
Comments
Post a Comment