EUROPE'S LEADING AEM DEVELOPER CONFERENCE
25
th
– 27
th
SEPTEMBER 2023
AEM Headless: A Glimpse of Developer Tools
D. Filipovic, Netcentric & D. Nguyen, Adobe
Agenda
2
§ AEM Headless
§ Tooling Overview
§ Use cases
§ GraphQL / REST API
§ SDK / CLI
§ Demo: Dev Journey
3
AEM Headless
AEM is a Headless CMS
4
§ All content can be created, updated and retrieved with APIs
§ REST
§ GraphQL
§ Rendering and delivery can be fully decoupled from AEM
§ Integrations made easy
§ Customized developer workflows
§ Third party extensibility
AEM is a Headless CMS
5
Content
Management
HTTP APIs
</>
Mobile App
SPA
IoT
Social Media
Headless CMS
Content
Management
HTTP APIs
Headless CMS
Author
Developer
UI Editor
6
"As a marketing practitioner, I
want to create content without
having to mind about its
layout, so that I can reuse my
content in numerous contexts
of my experience, scaling my
content strategy."
Developer tools – API, CLI, SDK
7
"As a developer, I want to
build apps faster and deliver
exceptional experiences
using the languages,
frameworks, and tools I am
already familiar with."
8
Developer API
API Overview
9
§ GraphQL API
§ Client facing apps
§ Focused B2C use cases
§ REST API
§ Management apps, Integrations
§ Focused B2E use cases
10
AEM Headless REST API & Tools
REST * Use Cases
11
§ Admin tasks
§ Bulk import / export
§ Automated jobs
§ AEM UI Extensibility
§ Integrations
REST * Use Cases – Content Import & Events
12
App Builder
Events
Serverless
Actions
REST API
AEM
Webhooks
3rd party system
Ø CRM
Ø E-Commerce
Ø Marketplace
Ø Forms
REST * Use Cases – UI Extensibility
13
AEM CF UI
OOTB
Extensions
AEM
REST API
REST API
Extension
Ø Content picker
Ø Apps mgmt
Ø Events pub-sub
Ø Campaign launch
Ø GenAI, etc.
REST API Tools
14
§ CRUD
§ Content fragment models
§ Content fragments
§ Open API, Swagger docs
§ SDK, CLI
Open API Playground
15
CLI Examples
16
§ Listing CF models
% aio headless model list
Id Name Status Path
────── ──────────────────────── ──────── ─────────────────────────────────────────────────────────
abc123 adaptTo() 2022 Sessions enabled /conf/global/settings/dam/cfm/models/adaptto-2022-sessions
def456 adaptTo() 2023 Sessions enabled /conf/global/settings/dam/cfm/models/adaptto-2023-sessions
ghi789 adaptTo() 2024 Sessions enabled /conf/global/settings/dam/cfm/models/adaptto-2024-sessions
CLI Examples
17
§ Getting CF model
% aio headless model get def456
created: at: '2023-08-08T18:49:27.058+02:00', by: 'admin'
description: Adobe Developer Live Conf 2022 sessions
fields: type: 'text', name: 'name', label: 'Name', required: true, multiple:
false, maxLength: 255, validationType: 'none'
type: 'long-text', name: 'description', label: 'Description', required:
false, multiple: false, mimeType: 'text/html'
id: def456
locked: false
modified: at: '2023-08-17T12:52:58.73+02:00', by: 'admin'
name: adaptTo() 2023 Sessions
path: /conf/global/settings/dam/cfm/models/adaptto-2023-sessions
status: enabled
SDK Examples
18
§ JavaScript
import sdk from '@adobe/aio-lib-headless-crud'
// initialize sdk
const client = await sdk.init({
serviceURL: '<aem_host>',
auth: '<aem_token>' || ['<aem_user>', '<aem_pass>']
})
// call methods
try {
// get all models
const result = await client.getModels()
console.log(result)
} catch (e) {
console.error(e)
}
SDK Examples
19
§ TypeScript
import aemLib from '@adobe/aio-lib-headless-crud'
// initialize sdk
const client: aemLib.AioLibHeadlessCrud = await aemLib.init({
serviceURL: '<aem_host>',
auth: '<aem_token>' || ['<aem_user>', '<aem_pass>']
})
// call methods
try {
// get specific model
const model: aemLib.ContentFragmentModel = await client.getModel('def456')
console.log(model)
} catch (e) {
console.error(e)
}
20
AEM Headless GraphQL API & Tools
GraphQL API Use Cases
21
§ Client facing applications
§ Web apps
§ SPA, MPA, PWA
§ Mobile apps
§ IoTs
GraphQL API
22
§ GraphQL queries
§ Deep control on content (variables, queries)
§ Flexible use of content on layout
§ Persistent queries
§ Less control
§ Cacheable, improved performance
GraphQL Examples
23
GraphQL query
{
modelList {
items {
label
}
}
}
Result
{
"data": {
"modelList": {
"items": [
{ "label": "Apple" },
{ "label": "Orange" },
{ "label": "Banana" }
]
}
}
}
GraphQL Examples (Paginated)
24
GraphQL query
{
modelPaginated {
pageInfo {...}
edges [
node {...}
cursor
]
}
}
Result
{
"data": {
"modelPaginated": {
"pageInfo": {
"startCursor": "abc",
"endCursor": "abc",
"hasNextPage": true,
"hasPreviousPage": true
},
"edges": [{
"node": {...},
"cursor": "abc"
}]
GraphQL Query Types
25
§ modelList
§ modelByPath
§ modelPaginated
§ persistedQueries
GraphQL SDK Examples
26
// Persisted query
const data = await sdk.runPersistedQuery(path)
// Build query
const queryString = sdk.buildQuery(model, fields, config, args)
// Regular query
const data = await sdk.runQuery(queryString)
// Paginated query: Loop all pages
const cursorQuery = sdk.runPaginatedQuery(model, fields, config)
for await (let value of cursorQuery) { console.log(value) }
// OR: Manually get next page
const { done, value } = await cursorQuery.next()
27
Developer Journey
Demo – adaptTo() sessions
28
§ Create CFMs & CFs remotely – bulk import
§ React app
§ Create GraphQL to fetch CFs
§ Use persistent queries in the app
29
Takeaways
Key learnings
30
ExtensibilityEasy to use
Flexibility
References
31
§ AEM Headless GraphQL Client SDK
§ https://github.com/adobe/aem-headless-client-js
§ AEM Headless REST Client SDK (released soon)
§ https://github.com/adobe/aio-lib-aem-headless
§ AEM Headless CLI plugin (released soon)
§ https://github.com/adobe/aio-cli-plugin-aem-headless
§ AEM Headless API doc & playground
§ https://developer.adobe.com/experience-cloud/experience-manager-
apis/api/stable/sites
§ AEM Headless Developer Journey
§ https://experienceleague.adobe.com/landing/experience-
manager/headless/developer.html
Images licensed from https://stock.adobe.com
33
THANK YOU!
