Develop for AEM Authoring with Edge Delivery Services

In this presentation and demo, we will illustrate the seamless integration of AEM authoring with Edge Delivery Services. We will explore the architecture underpinning this integration, highlighting how various components synergize to empower a rich authoring experience alongside fast content delivery. Specifically, we will elucidate the design of a new set of components available in AEM as a Cloud Service, demonstrating how developers can configure them to harmonize effortlessly with the Universal Editor. Furthermore, we will outline the integration's mechanics, spotlighting the role of the Multitenant Service, which is responsible for managing publication and configuring the mapping of AEM paths to Edge Delivery Services.

Presentation Highlights:

Architecture overview: How AEM authoring seamlessly integrates with Edge Delivery Services.
Design insights: The development of new components within AEM as a Cloud Service, configured to work nicely with the Universal Editor.
Multitenant Service: Managing publication and path mapping from AEM to Edge Delivery Services.
Live demonstration: Importing an existing site into AEM using the AEM Importer Tool and editing content via the Universal Editor, prior to publication to Edge Delivery Services.
Case study: Working with sections of the adapt.to conference page to exemplify the integration's efficacy.

This session will provide AEM developers with actionable insights into leveraging AEM authoring alongside Edge Delivery Services as an alternative to document-based authoring in Google Docs and SharePoint.

puradawid

Can other git repo provider be used instead of GitHub?

Jean-Christophe

No, only GitHub is supported. You may want to use other providers but they would need to pull their code into a GitHub repo.

WietseV

will you improve on the error handling when the site is not being imported?

Jean-Christophe

Absolutely! I've already opened a ticket in our issue tracker.

Vlad

Setting everything up looks a bit tedious and error-prone (as seen in the demo), how about a 1-click setup?

Tomasz Sobczyk

I personally think it was a bit of a demo effect. I did set it up myself just based on the guide available and it was quick and straightforwrd in my opinion. Its based on AEM so this will not be offered to general public anyway (and setting up an aem cloud takes a moment :))

Ina

It fails if you e.g. have some leftovers in the folders from tests before. So outside of demos it works usually quite well;-) but better error handling would be nice

Does the UE support some kind of multifields?

Bryan

Field objects have a `multi` config attribute but it's not required and not sure if all fields support it. https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/universal-editor/field-types#fields

BipinChandra

Can it be possible with aem 6.5 on premise and also if some other documents types can be used instead of Google docs?

Jean-Christophe

No, Crosswalk is not yet supported on AEM 6.5 on premise.

Diego

How would you test new code in a published environment that is not a live production environment?

Tomasz Sobczyk

You have a preview env

Tomasz Sobczyk

Does it work well with RDE? Any limitations?

Jean-Christophe

yes, no limitations, as confirmed by a RDE expert during the talk :)

Masoud Rozati

Can we utilize all AEM sites features too? For example using sling:alias, AEM Launches, live copies, etc?

Markus Haack - Adobe

Yes, all AEM Author features like MSM, Launches, Workflows, Asset Integration, etc. can be used as well.

Tomek Niedzwiedz

The JavaScript code for the custom block appears to take elements from the DOM as input, letting the developer manipulate the HTML. This requires some fiddling with the document structure. Other Static Site Generators (such as Gatsby) allow us to work with structured JSON documents and GraphQL, rather than HTML. Are there any plans to support a similar flow?

Jean-Christophe

I haven't heard about such plans but best would be to get confirmation from the Edge Delivery Services core team.

Wojtek

How about non-static content, e.g. you want to add prices for these adapt2 tickets which are changing dynamically? Is it still possible to create a site this way?

Luka Miroić

There is a repo available in Github with commerce components blueprint with few components which work well with Adobe Commerce ans support complete product handling. If needed they can be extended or new components can be created.

Will the AEM Importer be open Source?

Jean-Christophe

the importer code is available at : https://github.com/adobe/helix-importer-ui https://github.com/adobe/helix-importer Docs: https://www.aem.live/developer/importer

Daniel González Postigo

Could be use AEM importer to import just to JCR and without use Edge Delivery Service as main pourpose?

Jean-Christophe

the AEM importer which generates a JCR package produces very opiniated xml to support authoring with the Universal Editor

WietseV

can you split up the component models / definition / filters into multiple files? It already starts to look large / hard to review and maintain

Markus Haack - Adobe

Yes this is possible and best practice. See the boilerplate we have for AEM Authoring: https://github.com/adobe-rnd/aem-boilerplate-xwalk Check https://github.com/adobe-rnd/aem-boilerplate-xwalk/blob/main/blocks/cards/_cards.json for example. These are automatically aggregated via a pre-commit hook.

Diego

Are there any plans to support modern frontend frameworks to render the content blocks instead of using the Document Web API?

Jean-Christophe

It's recommended to use vanilla JavaScript for implementing blocks. Third-party frameworks can be used, but be mindful of how they might impact site performance.

Yegor Kozlov

Does it support publishing workflows, like request for publication/unpublication?

roxanabalasoiu

We support requests for publish/unpublish.

Masoud Rozati

In AEM importer you can manipulate the path of documents or pages to import. Why is this not possible for assets?

puradawid

Does Edge Delivery Services system support rendering on server side, for instance to generate user/session-specific content?

Sanket Dixit

How do we manage the multiple repo. to connect to single site for e.g. we have 3 different module/repo. which makes up our website. How do we manage with Authoring & Edge Delivery Services for this kind of architecture?

Markus Haack - Adobe

In Edge Delivery Services on site is operated by one GitRepo. You can run multiple sites by one shared Git repo as well. What is the use case of having your code in 3 different repos? You can of course sync them into one.

Jesse Pinkman

Is there any build-in support for custom UI testing

For AEM importer, can we define the field mapping with the html itself? Like the field for title which shows for the title of the custom block.

Markus Haack - Adobe

Yes sort of. To import a site you need two things. * component definitions - here you model the structure for Universal Editor and you authoring UI. This is used by the importer as well * import.js - here you can restructure the existing HTML to you needs and apply it to the content model

Tomek Niedzwiedz

I'm not sure I understood the way the data model was set up. This was a demo of EDS with Universal Editor, but we still need to set up a text document elsewhere? Is that just a convenient way to generate a data model? Or is there a way to avoid connecting to Google Drive/SharePoint and just define the model through code?

Jean-Christophe

Before implementing a Universal Editor block, plan its content model by creating a table in a document. The first row should be the block name, and subsequent rows should list the block properties. Use this model to guide the creation of your component-definition.json, -filter.json, and -model.json files.

Masoud Rozati

Universal Editor is currently missing a bunch of features that editors had in classic AEM editor, for example page annotations, panel selector, etc. Are you planning to extend them?

Jean-Christophe

That's a question for the Universal Editor team. Please ask them during their presentation today :)

Beo

What are the limitations of the importer. eG site size?

Jean-Christophe

To my knowledge, there are no restrictions. If you face any difficulties, please let us know on Discord.

Konrad Windszus

If content is retrieved from Author how is it ensured, that this has not evolved/was modified since the time publish has been clicked? Are JCR versions automatically being created and leveraged?

Jean-Christophe

The AEM importer uses the URL of the source page to identify the content to import. This page can be either an AEM author page or a publicly accessible page.