EDS: New Patterns for Component Development in AEM

Edge Delivery Services changes how developers build with Adobe Experience Manager (AEM). Instead of relying on traditional component development patterns, it introduces a more frontend-driven approach in which content structure and presentation are handled differently from how they are in classic AEM implementations.

By shifting more logic to the frontend, development teams gain greater flexibility to work with modern tools and frameworks while building reusable, performance-oriented experiences that can be delivered and iterated on more efficiently. For enterprises running on AEM, that translates directly to faster page performance and shorter development cycles.

This article shows how we take a traditional AEM component and rebuild it as an Edge Delivery block to illustrate the structural and development differences.

Key Takeaways

• Edge Delivery Services changes how developers build with Adobe Experience Manager, introducing a more frontend-driven approach in which content structure and presentation are handled differently from how they are in classic AEM implementations.

• Each block defines its own structure, styling, and behavior using standard frontend technologies such as HTML, CSS, and JavaScript, replacing the repository-node and dialog-based model used in traditional AEM component development.

• Oshyn's Adobe expertise covers the full AEM lifecycle, from strategic design planning and development through post-launch enhancements and maintenance, supporting enterprise teams across both traditional component development and modern Edge Delivery Services implementations.

Defining the AEM Component

Before implementing the solution, define the component's structure and the information it needs to render correctly. In traditional Adobe Experience Manager development, this usually starts by identifying the fields that authors will configure through the component dialog.

For this example, we will create a Card component that displays structured content, including a title, category, and description.

Component Fields

Component Structure in AEM

In Adobe Experience Manager, components are defined through a hierarchy of repository nodes. These nodes describe different aspects of the component, such as its metadata and the authoring fields exposed to content authors.

To illustrate this, the Card component can be broken down into two main parts: the component definition and the authoring dialog.

Component Definition

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
          jcr:primaryType="cq:Component"
          jcr:title="Card"
          componentGroup="My Site - Content"/>

Component Dialog

Component dialogs are typically built using Touch UI, leveraging Coral UI components provided by the Granite UI framework. These configurations define the fields that are displayed in the component dialog and used by authors when configuring the component.

<items jcr:primaryType="nt:unstructured">
    <title
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="Title"
        name="./title"/>
    <category
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        fieldLabel="Category"
        name="./category"/>
    <description
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
        fieldLabel="Description"
        name="./description"/>
</items>

The Block-Based Approach in Edge Delivery Services

Edge Delivery Services introduces a different development model based on blocks. Instead of building components through the traditional AEM component structure, functionality is implemented as reusable blocks.

Each block defines its own structure, styling, and behavior, typically implemented using standard frontend technologies such as HTML, CSS, and JavaScript.

Component Structure in AEM

card

├── .content.xml

└── _cq_dialog

└── .content.xml

Block Structure in EDS

blocks

└── card

├── card.js

├── card.css

└── _card.json

Defining the Block in Edge Delivery Services

In Edge Delivery Services, blocks are configured using JSON files that define both the block registration and the fields available for authors. This configuration replaces the dialog-based approach used in traditional Adobe Experience Manager components.

Inside the blocks/cards folder, the block configuration is defined in a JSON file. This file typically includes three sections: definitions, models, and filters.

The definition registers the block so it becomes available in the editor:

{
  "definitions": [
    {
      "title": "Card",
      "id": "card",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block/item",
            "template": {
              "name": "Card",
              "model": "card"
            }
          }
        }
      }
    }
  ]
}

The model defines the editable fields that authors can configure when working with the block:

{
  "models": [
    {
      "id": "card",
      "fields": [
        {
          "component": "text",
          "name": "title",
          "label": "Title",
          "valueType": "string"
        },
        {
          "component": "select",
          "name": "category",
          "label": "Category",
          "valueType": "string",
          "options": [
            {
              "name": "News",
              "value": "news"
            },
            {
              "name": "Events",
              "value": "events"
            }
          ]
        },
        {
          "component": "text",
          "name": "description",
          "label": "Description",
          "valueType": "string"
        }
      ]
    }
  ]
}

Rendering the Block

In traditional Adobe Experience Manager development, components are typically rendered using HTL scripts that read the component properties and generate the final markup.

In contrast, Edge Delivery Services blocks implement their rendering logic directly in JavaScript within the block itself. The script receives the authored content and restructures it into the final HTML layout displayed on the page.

export default function decorate(block) {
  // Convert children of the block into an array for easier iteration
  const rows = [...block.children];
  rows.forEach((row) => {
    // Destructure row children into title, category, and description
    const [title, category, description] = row.children;
    // Create a new card element
    const card = document.createElement('div');
    card.classList.add('card');
    // Append title if it exists
    if (title) {
      const titleEl = document.createElement('h3');
      titleEl.textContent = title.textContent;
      card.append(titleEl);
    }
    // Append category if it exists
    if (category) {
      const categoryEl = document.createElement('span');
      categoryEl.classList.add('card-category');
      categoryEl.textContent = category.textContent;
      card.append(categoryEl);
    }
    // Append description if it exists
    if (description) {
      const descEl = document.createElement('p');
      descEl.textContent = description.textContent;
      card.append(descEl);
    }
    // Replace original row with the new card
    row.replaceWith(card);
  });
}

Wrapping up

Rebuilding a component as a block in Edge Delivery Services demonstrates the flexibility it brings to frontend development. Blocks can seamlessly integrate with modern frameworks, support server-side rendering, and adapt to different rendering strategies, giving developers more control over performance and user experience, and enabling enterprises to achieve faster delivery cycles and measurable performance gains.

If you're using Adobe Experience Manager and exploring Edge Delivery Services, Oshyn is available to help, as our Adobe expertise covers the full lifecycle, from strategic design planning and development through post-launch enhancements and maintenance. Reach out to see how we can support your digital experience needs.