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
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.
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
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.