Extending Edge Delivery Services with micro-frontends

Introduction

What is Edge Delivery Services?

Edge Delivery Services is a modern content delivery framework that re-imagines how websites are built and delivered, optimizing for speed, simplicity, and scalability. It is a core part of Adobe Experience Manager (AEM) and enables faster digital experiences by pushing rendering and delivery closer to the user, at the edge of the network.

What is da.live?

In essence, da.live is the new lightweight default content provider for Edge Delivery Services. It is an alternative to using systems like SharePoint, Google Docs, or even Java-based AEM for content storage and user experience.

What are micro-frontends?

With Edge Delivery Services, gone are the days of esoteric technology stacks you must learn to empower your creators and authors. You can bring your own preferred frontend technologies (vanilla, Lit, Preact, React, Angular, Vue, etc.), pair them with simple Edge Delivery APIs, and start adding value almost immediately.

One of the key drivers to this paradigm shift is an architecture pattern called micro-frontends. If you want to learn more about them, you can visit https://microfrontend.dev, but we'll put a brief description below:

Micro-frontends are the result of breaking down large user interfaces into smaller, more manageable and independently deployable pieces, with benefits at an organizational level.
- Natalia Venditto

Almost all apps on da.live and tools.aem.live are micro-frontends. What makes them such?

  1. De-coupled from the main application - Built and deployed separate from our main applications means fewer checks necessary when deploying, and far less risk an author-facing tool impacts the delivery of our main applications.
  2. Low dependency count - While not a hard requirement, this directly influences the "manageable" and "independent" aspect of micro-frontends. The teams who work on these tools spend less time battling build systems and more time adding value.
  3. Abstractions kept to a minimum - Again, not a requirement, but allows easier development and nimbleness due to the lack of blast radius when making a change. You don't have to learn about ABCDEFG before you can change XYZ... you can just go improve XYZ directly.

So much of building software involves people and process. With Edge Delivery, it becomes feasible to have an entire project singularly focused on author and creator productivity rather than trying to shoehorn your authoring tools into the same bundle as the website itself. Larger teams will appreciate the flexibility to work in smaller isolated groups while not worrying about impacting the main application.

What we're building today

In this lab we will be building three micro-frontends:

  1. A GenAI tag / keyword generating author plugin
  2. A fullscreen tag audit application
  3. An AEM Sidekick plugin to surface tags a page uses

What you will need

  1. Node 20+
  2. A GitHub account
  3. An Adobe account
  4. The AEM CLI - npm install -g @adobe/aem-cli
  5. A code editor - Cursor or VS Code is recommended.
  6. AEM Sidekick
  7. Basic HTML, JS, and CSS skills
  8. An Edge Delivery Project - we'll quickly scaffold one out in the first 5 minutes.

What you won't need

  1. Any browser extensions that manipulate headers - please disable them in your browser (do not use the extension's own "off" toggle)
  2. Grammarly - Please disable this extension as well. It does not play well with DA's Library.