[AEM Gems] Getting started with AEM Authoring and Edge Delivery Services

[kautuk_sahni]

Session Details

This AEM GEMs webinar includes a presentation and demo to show you how AEM authoring works together with Edge Delivery Services. We will walk you through the process of creating a new Edge Delivery Services project that is enabled for AEM authoring with AEM Cloud Service as a content source, and we will show you how you can benefit from the lean and agile development experience that comes with Edge Delivery Services but preserve a WYSIWYG authoring experience for the practitioner.

Housekeeping details:

1. Duration: 60 minutes including 10 minutes of Q&A
2. Audience: Customers, Partners, and Adobe Employees
3. Recording and slides will be made available to the public after the session
4. The session is free of charge, registration will be required

Session Recording

Session Presentation

Here is the presentation: https://adobe.ly/3IBcKZD 

Session Q&A

Question	Answer
Is it available for on prem as well as ams deployment	For now it is available for AEM Cloud Service. AMS will follow later.
Just checking - this is public now yes?	Available today for early adopter, GA shortly after Summit early April.
How this model be used for customers having existing AEM implementation running on AEM as cloud service?	The recommended path is to use the new Universal Editor as this works with Edge Delivery Services blocks. This requires a one-time update of your jcr content. Benefit is that you only need to maintain Edge Delivery Services blocks and no AEM components anymore.
Is it possible for one website to support all three content authoring options (AEM+Universal Editor, AEM only, and Document-based), or is it typically a combination of two out of the three?	Yes this is technically possible. We have done projects with this pattern, I personally would not recommend it as a first choice. Because authors will have multiple place to go to for editing - AEM & doc based. However using AEM + UE in combo with pages served by AEM Publisher is a common pattern.
When is scheduled to release these capabilities?	shortly after summit
Need some clarification on how to best apply client specific styling with EDS? Can we follow the SCSS approach or Css approach ? I noticed the https://github.com/adobe-experience-league/exlm site is using SCSS approach and boilerplate is using css approach.	Our recommendation is to go with plain CSS, as done by the boilerplate. However for larger projects SCSS, Tailwind, etc. might be an option as well.
How would a site search solution look like with EDS where we use the AEM Lucene JCR search in AEM as cloud or other Classic AEM implementations	Edge Delivery Services has a build in indexing which can be used for side search. See https://www.aem.live/developer/indexing
So just to be clear, EDS does not need AEM to be purchased as a Tier offering?	Edge Delivery is part of AEM CS license. There is some free tier for AEM AMS customers.
Can you explain the transition process from legacy HTL component implementations to UE over EDS? There were some mentions of conversion services, is that on the roadmap?	The conversion service that transforms the output of classic htl/java based components to semantic HTML when publishing to Edge Delivery Services only works for limited use cases where the existing components can easily be mapped to Edge Delivery Services concepts (blocks, sections etc.). With an increased number of properties, nesting of containers, etc. this gets complicated quickly and increases maintenance efforts. We suggest to use the AEM Importer tool instead, to transform the content once. We extend the AEM importer currently to support JCR packages as output and this will be available soon.
Is there support for OSGI, Global or Environment specific configurations?	OSGI configs are not available on Edge Delivery Services. However Edge Delivery Services has its own concepts of managing (shared) config.
can we use local AEM sdk with universal editor?	Yes you can, but with limitations like Asset Selector is not working for a local SDK
Is this flow what is being talked about as "Cross Walk" or is that different?	Yes this is about Crosswalk. Crosswalk is Adobe internal project name, will not be the name of the final solution.
Where did you get that template from?	https://github.com/adobe-rnd/aem-boilerplate-xwalk
how can we manage data attributes for html elements?	What would be the used case for that? You can manage these clients side in JS
The preview in which you can edit in context.. does that render the exact same as the production site? Using the same CSS and JS etc?	Yes! Code is the same
Is there a recommend or known development workflow for developing a new/custom Block for UE+AEM and Document-based Editing? For example how can I test Document-Based editing if my mounting point only points to an AEM+UE instance	Documented workflow: yes please see https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/edge-delivery/edge-... Mountpoint: can only point to one source AEM or Sharepoint or Google
What does the JCR structure look like?	The JCR structure is essentially a 1:1 mapping of the markup rendered by Edge Delivery Services. There is one level of nodes for sections, with one further level of nodes for default content and blocks. Blocks may have one additional level of children (cotnainer blocks). Some details and examples can be found on https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/co...
What about MSM and translation in this setup?	Both are supported, as well as any other operation that is available in the Sites Admin UI. MSM currenlty only for page level inheritance.
A question on the  preview window, which allows you to edit in context. Does render/appear the exact same as the production/public site? Same css, js etc?	yes, the only missing piece is the Universal Editor instrumentation
does it cover accessibility?	Developers can track a11y metrics of the site throughout the Edge Delivery Services project (built-in with Github PRs), to make sure that they maintain a good score for it.
Markus can you provide any documentation or elaborate on the (share) config concept for Edge Delivery Services?	Configs can be managed as key/value pairs in Sheets. This can be used for different env's to simulate dev/stage/prod etc. even there is no real stage env.
Can multiple git repos be used on the same AEM site?	Currently the map is one-to-one. You can however rely on git branching to have mulitple dev versions of the same site running
Are you going to share the recording?	Yes, we will share the recording on the contextual thread later on this week: https://adobe.ly/3uIj6D7
When a customer has already built website in AEM then why the customer invest into EDS? Is it because of only light house score or Adobe will promote more EDS than AEM?	Edge Delivery is a faster and easier way to build webpages that have more impact on the business outcome (aka more organic traffic and more conversion). There is no need to migrate existing webpages, but we highly recommend using Edge Delivery for new pages.
is it fair to say that the code running on the edge is a static site generator	it's not really SSG, because (the majority) HTML can still be generated by client JS
can you separate this component-model into multiple files? I imagine this would make for some annoying  merge conflict managements having this all in one file.	not yet, but it is plan to support it
Can the Xwalk template handle both document-based and AEM + UE content, or do we need separate repositories due to the single mount point limitation?	As of today you need different repos because of the single mountpoint. Repos can be forks to keep in sync easily.
Do the component models/filters?definitions necessarily have to be maintained in a single JSON?	For the moment, yes. But we are planing to improve this
Joe, you mentioned that only a single git repo works for a site. Can there be multiple git repos used on the same env if they are on different sites?	Indeed you can, from 1 AEM environment you can manage multiple repos, so essentially multiple websites
Using universal editor and the models/filters json files, is it possible to support nested blocks? Could you add that Teaser block within a card block?	No nesting of blocks is not supported with Edge Delivery Services. We have the concept of containers, which are components that have one level of children. These are rendered as a single block, where each row is one child and each column on property of the child. Details can be found on https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/co...
Now there are atleast three different boilerplate templates: commerce, xwalk and standard. Can just one of them be used for all type of content use cases? Say for example use the xwalk template but still have the mount point as google drive(and not AEM)	The boilerplate serves as a good starting point for you to build your site. But if you have a use case that requires more, you can of course combine useful helpers from another boilerplate (e.g. commerce with xwalk)
Using universal editor and the filters/models json files, is it possible to support nested blocks? Could you add the teaser block within a card block?	No, nested blocks are not supported by Edge Delivery Services. This applies for AEM + UE and doc-based as well.
can we make dropdown values to make authoring bit easier. for example selecting styles?	yes
is it reccomended to rewrite scripts.js and aem.js for buildung our own starter boilerplate?	aem.js is the 'library' and its not recommended to be changed, scripts.js is the one you can adapt to your needs if neccessary.
Are there any examples of how to access Edge Delivery Services' approach to (shared) configs in Universal Editor?	You can create a bulk metadata spreadsheet in AEM as documented here https://www.aem.live/docs/bulk-metadata
About the existing content no longer matching the template definitions. How should one go about migrating content once there are hundreds or more instances of a component being modified? In AEM that would have been taken care of using Groovy Scripts, Sling Pipes, etc.	You can still use Groovy Scripts or Sling Pipes as the content remains stored as node structure in AEM.
Can this be setup using in local using aem-sdk?	No. The setup requires universal editor which is a cloud service. It is possible to setup universal editor locally and hence it is, technically possible to set this up locally as well. Publishing will not work in this scenario though as the AEM admin service needs to be able to connect to your instance. For local development, use the AEM Simulator https://www.aem.live/developer/tutorial
Does EDS & UE also support front-end frameworks like ReactJS/Angular/Vue and even more advanced things NextJS etc?	UE: Yes EDS: Supports any frontend framework you want. We do not recommend to use them, if the same use case can be implemented with vanialla javascript as the foot print of a framework in many content usecases is not justified.
what is the "soure" for the asset selector, i.e. where do these assets "live". Within AEM DAM? already from the "media bus"?!	default asset source in UE is the AEM repo the page content is from. If you want other source (e.g. another AEM repo, custom filtered list of repos), you can create extension for it.
Just wishing to use sling based AEM components in future with the path Adobe is taking I see we are not taking the full advantage of Sling here which actually kills the motive of the whole platform	We intentionally do not support server-side extensibility. One key feature of edge delivery services is to push-invalidate individual documents on the CDN. Meaning that all references must be resolved clientside. With this logic moving from the server to the client the logic that remains in AEM is rather simple. As the markup rendered by Edge Delivery Services is not extensible, server-side providing sever-side extensibility with sling based AEM components does not make sense.
There was an answer that said that nested blocks are not supported. So that means that if a teaser is needed in a carousel, for example, you'd need to duplicate the entire teaser code in the carousel?	A carousel could be a container of teasers and could resource the decoration / frontend logic of the teaser. More details on how to model content can be found on https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/co...
do you have forms example with validations?	See https://www.aem.live/developer/forms
Is it possible to add custom validation or custom logic (e.g. show/hide fields based on value on one field) in the "dialog" of a custom block?	Show/hide is possible based on Json Logic, see documentation: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev... There are default validations per data & component type.
when can we expect more plugins for UE?	We want to concentrate on UX first and then open it to more backends
Does this still have the concepts of templates and if so how are templates being defined?	There are 2 kinds of template concepts: content and layout. Content templates can simply be pages prepared to be copy&pasted and then authored by the practitioner. Layout templates, as in a different style being applied for a subset of pages can be achieved with the template/theme metadata property that automatically sets a css class on the document body. We do not yet support editable templates.
can we create new pages in sites as well if so how does that will reflect in docs?	With AEM based authoring pages remain in AEM. While it is technically possible to have some pages with AEM based authoring, and some with document-based authoring there is no integration between AEM and SharePoint/Google Drive. So you would not see all the content in one tool.
How would one best implement Search on an AEM Sites-driven EDS deployment, vs a document-based setup?	Basically the some. You can also setup index in AEM + UE via helix-query.yaml (no sheet needed) and use that similar like in document-based
Will there be a path to convert a traditional component based AEM site to blocks/eds?	Yes we will provide some conversion tool to convert the JCR content structure. As Dirk just explained. However there is no code converter from Java/HTML code to JS code
can this work with framework like nextjs	No, this is not the idea behind EDS
the answer to SSR question - is that documented anywhere?	No not in detail. https://www.aem.live/docs/architecture
do you have forms example with validations? about answer is for document based editor not UE	With UE you will have a "sheet" editor as well, was not shown here. You can rebuild the form sheet from the docs also in AEM
So can we use only certain fields to work along with the component-block approach? if we need multifield, style selector etc are they supported?	What field types are supported by Universal Editor can be found here https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...
Can we use AEM core components in EDS	No. Edge Delivery Services has a new concept of blocks. The boilerplate includes some very basic blocks. The helix block collection gives guidance for more advanced use cases.
Is there any option to create style system?	Pages, sections and blocks can have styles, yes. For pages use the template/theme metadata. For Sections the style property (add it to the section model). For blocks (block options) use the classes property. More details can be found on https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/co... and https://www.aem.live/developer/markup-sections-blocks
The available Form Block showcases the workflow using sheets and Doc based authoring. Is there an existing workflow for this as it relates to UE?	You can embed a doc-based form as a link in a form block in UE. The form will render clientside and instrument itself for authoring. Changes will be persisted back to the form spreadsheet. This is currently being developed to be added to the boilerplate.
Can we migrate other CMS pages to EDS, Do you have any custom exporter to export the content in document format?	EDS supports an importer for HTML -> doc-based content. That importer can be customized as needed.
Is there something analogous to experience fragments and content fragments for reusing the content across multiple pages?	You can have fragments in EDS to be reused across multiple pages.
Is the content from the JCR really served like this: JCR -> HTML (AEM) -> MD (Pipeline) -> HTML? Why not serving Markdown from AEM?	The Edge Delivery Services ingestion is only accepting HTML. Markdown is uses as internal representation only. Ingestion is based on https://github.com/adobe/helix-html2md
how about Language translation support?	Yes
In what ways is the EDS an "opinionated"  framework?	In many ways: the way we render html (no server-side extensibility), the way we structure and load code (block loading sequence) and also intentionally abstraining from any build system, but also the way we cache and serve content from a single origin.
Can AEM adaptive forms be used with UE/Document Editor?	Yes
Can we use EDS in Campaign for email content? AEM-Campaign integration.	Yes, there is an effort to use document-based authoring for E-Mail templates and integrate with AJO. This is still in a POC phase. Reach out to your adobe representative for more information.
Can EDS used as Headless?	The huge value of Edge Delivery is the performance-optimized head.
Does Tags framwork will still work the same wasy as of today?	Yes. Tags (their ids) are added to the page as cq-tags metadata tag. We are working on automatically publishing a spreadsheet with translated titles for tags.
Does AEM Sling based Event Handlers, Workflows will still work as they work in AEMaaCS today? Is theer a documentation which describe what feature in AEM today stay the same in EDGE vesrus which one gets to a new Avatar and which ones get deprecated in EDGE?	Yes that still works as the content remans stored in AEM. No features of AEM will be deprecated. Some are not yet available with AEM based authoring for Edge Delivery Services. We will implement them if we see need. If you miss anything, please reach out to us.
can we use CF's use as EDS ??	yes
Can we use AB tests with AEM + EDS as it is supported with doc based editing?	Yes! We are working on a native integration of aem-experimentation with Universal Editor.
So it's still using sling under the covers - so you could create completely new blocks with custom HTML?	It is but you cannot. Serverside extensibility is not supported. The rendered markup is fixed and cannot be changed.
would you be able to implement custom widgets for the editing? like composite multifields (text+reference etc)?	yes you would be able to write extensions for the fields
How do we integrate with Target/Launch without flicker?	We are working on a new integration with Adobe Target to apply experiments and personalisation without impacting the performance. Adobe Launch, with target removed can usually be loaded delayed so that it does not impact performance.
So the component model is built in real time?	The component model is implemented and pushed to the Edge Delivery Services code deployment. It is fetched from there in realtime in Universal Editor (cached for 60s by the browser)
Do we have a converter coming along for current site jcr conversion to new format?	We have example implementations of a converter to transition existing sites to Edge Delivery Services. This has shown some significant drawbacks however, and we are now working on extending existing tooling to re-import converted sites as JCR structures in AEM to fully transition to Universal Editor and AEM based authoring with Edge Delivery Services.

Session Schedule

Wednesday, March 13, 2024, | 9 am PST OR 5 pm CEST OR 9.30 pm IST  

Speaker(s)

Dirk Rudolph - Mgr, Software Development, Adobe

Register at: https://adobe.ly/4bz9T0H 

Don't forget to register yourself for this session using the registration link shared above. 

[marijana-rukavina]

When will the recording of this event be available for us that couldn't join?

Thanks!

MJ

[kautuk_sahni]

We are working on this, and it should be here within another 24 hr.  

[kautuk_sahni]

Recording for this session is uploaded to the main thread above!!

[lou_b_bxa]

Is there an ETA on when answers for the missed Q&A questions will be available?

[kautuk_sahni]

Team in working on them. But if you want to ask that again, please feel free to do that in this thread.

[kautuk_sahni]

@lou_b_bxa Done!!