Developer Guide to Document Authoring with Edge Delivery Services. Part 0

Author: Tom Cranstoun

Introduction to Document Authoring with Edge Delivery Services

I discuss how Edge Delivery Services works with providers, focusing on Document Authoring with Edge Delivery Services.

I create a Hello World block.

Back to Top

Introduction

I am a developer; arrays start at element 0, or I began writing with part 1 and now need an introduction. You choose.

This series of articles discusses developing with Adobe’s Edge Delivery Services in the Context of Document Authoring.

What is Document Authoring?

Creating and publishing content in the digital landscape involves multiple steps and stakeholders. Subject Matter Experts generate original content, which goes through an approval process. The approved content is then passed to Content Authors, who copy and paste sub-edited content into the Content Management System (CMS) for publishing. This process can be time-consuming, especially in regulated industries, where the approval process can take a long time.

Content Authors dislike CMS systems. They are forced to use “components” and “templates” created by technicians, using “page properties” and “dialog boxes” to pull the whole piece together; they have to sub-edit the copy because it often won’t fit in the constraints of the CMS. They usually have to backport the content to the original document format as a system of record. Returning the document to the SME with a link to the final web-page page.

Product Owners dislike CMS systems, especially in regulated industries. They must get approval for every line of text they place on the web. Regulated industries, like pharmaceuticals, automobile makers, insurers, etc., are legally bound by the content they publish and the corporation's stringent requirements. One product owner I know of asked that pre-approved Excel spreadsheets drive the entire CMS; however, the technicians have built the components and templates around dialogue boxes. He, too, had to use the copy-paste methodology.

Enter Document Authoring with Edge Delivery Services from Adobe, sometimes called EDS. This system stands out for its innovative approach to web publishing and promises to redefine efficiency and simplicity in the industry.

It is a cutting-edge document-based CMS, named in tribute to Rosalind Franklin, whose work was crucial in deciphering DNA's structure. It has transformed from the "Helix" concept to the current "Edge Delivery Services," signifying its growth from a rudimentary tool to a comprehensive digital content management solution. It has shared all three names in its lifetime: Franklin, Helix and now Edge Delivery Services.

Why Document Authoring with Adobe Edge Delivery Services Matters

Edge Delivery Services' significance lies in its speed and serverless architecture, which eliminates the complexities of server management and offers a seamless experience for content creators. It integrates effortlessly with tools that users are already familiar with, making content editing and management as intuitive as using everyday office applications. It offers a rapid development and release environment for document-based content creation, keeping the Content Authors and Product Managers happy and using tools they know well.

Key features:

Benefits:

Use cases:

Conclusion:

Edge Delivery Services is a powerful tool for businesses looking to enhance their online presence. Its focus on speed, scalability and ease of use can help companies to create engaging and compelling digital experiences.

Weighing the Benefits and Limitations

Edge Delivery Services is designed to deliver content with unparalleled efficiency, addressing the challenges of handling extensive information without compromising performance. It opens the content management field to a broader audience, enabling more professionals to contribute effectively. However, it's essential to acknowledge that Document Authoring with Edge Delivery Services may not be the one-size-fits-all solution for every scenario, mainly where intricate customization and deep content modelling and structuring are paramount. Edge Delivery Services offers deeper integration with traditional AEM for requests that require content modelling and deeper integration with the back-end. Adobe has you covered. Think of Document Authoring with Edge Delivery Services as the rapid delivery of traditional documents - ‘a Content Marketing System’. When customers require more sophisticated back-ends, AEM Authoring with Edge Delivery Services is ready to take up the workload and continue to integrate with the document authoring solutions in place.

Is it Edge Delivery Service or Edge Delivery Services?

Good question. It is Edge Delivery Services, as many different services are involved in delivery at the Edge (close to the customer). There are asset services, authentication services, JSON services, content services, and CDN (Content Delivery Network) services. The Adobe-provided services run on ADOBE IO, a serverless environment.

Edge Delivery Services is the final publishing point; many projects provide content for this platform.

At the time of writing, there are three providers (in order of appearance):

The last one supports:

Crosswalk, Commerce, and Dark Alley. Universal Editor is something that is sitting on top of Crosswalk (from the perspective of Edge Delivery Services)

Project Helix (which was later extended into Franklin) covers delivery, authoring (through Sidekick), and integration (through the Admin API). To refer to the Word and Google integration only as Helix isn't how the Adobe team has been looking at it - and still isn't, as they use Helix now to refer to the same core architecture.

Edge Delivery Services (for AEM Sites) includes only the delivery part, as far as the product is packaged. There is no official name for the whole stack.

This is a complex relationship, making discussion challenging. I will focus on Document Authoring with Edge Delivery Services.

Each provider creates digital entities that are stored in a content bus. This includes content from cloud-based sources, including code, assets, text, HTML, JSON and configuration data. The platform serves the content bus.

It is essential to keep these two entities separate in your mind. There are providers, and Edge Delivery Services is the platform.

Why invest in this technology?

Performance. Edge Delivery Services is faster, which increases customer engagement. There are lots of studies showing that speed counts. Adobe wants to create the world's fastest websites, so it experimented to see what would happen if all our customers had the world's fastest sites! So Adobe did this.

Surely a CDN does this for AEM?

It helps, but there is more than just CDN delivery. CDNs are great for global audiences, but users usually have multiple CDNs, dispatcher caches, Akamai, etc. Edge Delivery Services is not a CDN. It sits side by side, feeding one CDN! It runs next to your CDN, not in parallel.

What speed do we expect?

Lighthouse has its challenges. Edge Delivery Services sends pages optimally, not including any JS cumulative layout shift. If you get 100 on Lighthouse, you will be among the fastest in the world. Adobe aimed for 80-100 for Edge Delivery Services, and they achieved it.

Is this just for static content?

Great question. The magic is caused by rethinking resources, with a server component that organises the resources and a client part that personalises. Working together, these two parts allow super-fast dynamic page content. Adobe first focused on what was visible to the user, improving static and dynamic pages. There is no such thing as a static page in Edge Delivery Services.

Did Adobe create a new JS framework to do this?

Current front-end frameworks are designed around limitations in the stack, but browsers have improved, protocols have changed, HTTP/3 is available, and limitations are gone. So Adobe does not call what they are doing a “framework”; it is the web platform. Adobe uses the best bits from the new world. In the old world, software used a bundler to consume assets and placed it on a server for a client to consume. Edge Delivery Services is a no-bundler; source code coordination is used instead. The goal was to make Edge Delivery Services easy to use and make the time to rebuild a site super fast. Instead of incrementally adapting a site to a new design, authors use the tools they have learnt: Excel, Word, Google Drive, etc.

What does the platform bring?

Why Edge Delivery Services Matters

Website speed and user experience are crucial. Edge Delivery Services helps businesses achieve:

How does Edge Delivery Services differ from AEM?

Unlike traditional content management systems (CMSs), this solution does not require a dedicated authoring or publishing environment. Instead, it leverages platforms like Google Drive or SharePoint to create and manage content published directly to Edge Delivery Services for fast and reliable delivery to end-users. This serverless approach eliminates the need for complex infrastructure and maintenance, making it a cost-effective and scalable option for content delivery.

Components can be used immediately as the pages have been built beforehand, eliminating the need to wait for a CDN call to the dispatcher or for the components to run on a publisher.

No bundling of JS/CSS (Clientlibs).

The code relies solely on modern JavaScript and CSS without needing external JavaScript libraries such as jQuery.

Pages are controlled through spreadsheets, redirects, indexes, and metadata, all converted into JSON by Edge Delivery Services.

Paths in Google Drive/SharePoint control the tree structure of pages.

Plug-in tools like Asset Picker from Adobe and Translate from Google can be used.

Developers store code in GitHub: no build to deploy.

Each branch in GitHub has a separate live preview.

Zero pipelines, no delay in publishing. Fast.

Did I say fast and easy using tools you already know?

To end this introduction, I must create a ‘hello world’ for Document Authoring with Edge Delivery Services.

Code is coordinated by scripts.js in the scripts folder.

You can see the code in scripts that control loading:

//js
/**
 * Loads everything that happens a lot later,
 * without impacting the user experience.
 */
function loadDelayed() {
  // eslint-disable-next-line import/no-cycle
  window.setTimeout(() => import('./delayed.js'), 3000);
  // load anything that can be postponed to the latest here
}

async function loadPage() {
  await loadEager(document);
  await loadLazy(document);
  loadDelayed();
}

loadPage();

This pattern is known as E-L-D, Eager, Lazy, Delayed, which optimizes the page loading sequence to help us get to the 100/100/100/100 model.

Earlier in the sequence, scripts.js inspects the page held in the content bus and modified to be the intermediate state; the code scans for ‘blocks’ and when finding one, it injects the cs and javascript, executing the JS if any is placed in line.

Creating HelloWorld

I will assume that you have cloned the https://github.com/adobe/aem-boilerplate repo and setup your Edge Delivery Services folder following Getting Started – Developer Tutorial (www.aem.live)


To create a simple "Hello World" block in Edge Delivery Services, you'll need to create a CSS file for styling and a JavaScript file for functionality. Here's how you can do it:

/* css */
.helloworld {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

//js
export default function decorate(block) {
    const greeting = document.createElement('div');
    greeting.textContent = 'Hello World';
    block.textContent = '';
    block.appendChild(greeting);
}

In your Google document, insert a table, one cell wide and one cell deep.

In this cell, add the text ‘helloworld’

The existence of the table with the first cell name is the link to the code; Edge Delivery Services looks in the blocks folder and cell-name folder for similarly named js and css, applying the js and the css to the DOM. Magic completed, and the results look like this.

Keep reading the series to find out more.

Related Articles

guide
/fragments/ddt/proposition
style
bg-dark
Return to Top