A Practical Developer Reference

If you're learning Adobe Experience Manager (AEM) or returning to an existing project after some time away, remembering how every technology fits together can be challenging. Sling, HTL, OSGi Services, Dispatcher, React, Cloud Manager, Client Libraries, Content Fragments—each solves a different problem, but they're most useful when viewed as a complete system.

This guide is designed to provide that complete picture.

📄 Free Download: Save the printable AEM Cloud Service Cheat Sheet at the end of this guide.

Rather than exploring every topic in depth, it gives you a practical mental model of how AEM Cloud Service works from the moment a browser requests a page until the final HTML reaches the user. Think of it as a quick reference that helps reconnect the pieces before diving deeper into implementation.

Reading time: 12–15 minutes

If you prefer visual learning, the diagram below summarizes the entire AEM architecture discussed throughout this guide. You can refer back to it as you read each section.

The Big Picture

Everything in AEM revolves around one simple question:

How does a browser request become a rendered web page?

The answer is the foundation of the entire platform.

Every technology you'll encounter in AEM participates somewhere in this pipeline.

The Request Lifecycle

When a visitor opens a page, AEM follows a predictable sequence.

Once you understand this flow, debugging becomes significantly easier because every problem belongs to one of these layers.

Core Architecture

Where Does My Code Go?

One of the most common questions developers ask is:

"Where should I implement this?"

Use this table as your guide.

If you routinely ask yourself this question before writing code, your architecture will remain much cleaner.

The Component Pipeline

Every reusable AEM component follows roughly the same lifecycle.

Each layer has exactly one responsibility.

That separation is one of AEM's greatest strengths.

HTL vs React

Both render UI, but they solve different problems.

A common enterprise pattern is:

• HTL renders the page

• React enhances selected components

React complements AEM rather than replacing it.

Dispatcher at a Glance

Dispatcher sits between the internet and AEM Publish.

Dispatcher improves:

• Performance

• Security

• Scalability

A cache hit is almost always faster than rendering a page again.

React Integration

React typically enhances selected components rather than replacing AEM.

Typical React use cases include:

• Search

• Filters

• Pagination

• Dashboards

• AI Chat

• Dynamic Forms

Development to Production

Modern AEM Cloud Service deployments are automated.

Cloud Manager provides:

• Build automation

• Testing

• Quality Gates

• Security Scanning

• Deployment Pipelines

Debugging Checklist

When something breaks, investigate from the outside in.

1. Browser

↓

2. CDN

↓

3. Dispatcher

↓

4. Publish

↓

5. Sling Resource Resolution

↓

6. Sling Model

↓

7. OSGi Service

↓

8. HTL

↓

9. React

↓

10. Browser Output

This structured approach is usually much faster than jumping directly into code.

Common Mistakes

Avoid these common pitfalls:

• Putting business logic inside HTL

• Calling external APIs directly from Sling Models

• Building multiple components that solve the same problem

• Using React for components that only display static content

• Ignoring Dispatcher cache behavior during debugging

• Creating complex author dialogs with too many options

• Mixing presentation logic with business logic

• Treating accessibility as a final testing step instead of a design principle

Remember These Rules

Dispatcher caches.

Sling resolves.

JCR stores.

Components render.

Sling Models prepare.

OSGi executes.

HTL generates HTML.

React enhances.

Cloud Manager deploys.

If you remember only those eight statements, you'll already have a solid mental model of AEM.

Architecture in One Diagram

Read More

This guide is intended to be a quick reference. Each topic is explored in depth throughout the AEM Cloud Master Series:

• Part 1: Understanding Adobe Experience Manager Architecture

• Part 2: The Complete AEM Request Lifecycle

• Part 3: Inside Apache Sling

• Part 4: Sling Models & Dependency Injection

• Part 5: OSGi Services Explained

• Part 6: HTL Explained

• Part 7: Dispatcher Deep Dive

• Part 8: Building Enterprise Components in AEM

• Part 9: React + Adobe AEM Cloud Service

• Part 10: From Development to Production

📥 Download the AEM Cloud Service Developer Cheat Sheet (PDF)