Building adaptTo() Website with Edge Delivery Services

This talk presents the lessons learned when migrating the adaptTo() website from AEM 6.5 to Documented-based Authoring and Edge Delivery Service (formerly named AEM Franklin). Although the website looks simple, there are a lot of features like yearly editions, dynamically built schedules, a speaker database and talk archive that need to be adapted to new architecture patterns. Hear about the challenges and solutions for optimizing the web performance and doing 3rd-party integrations.

Is this solution suitable for a transactional website? How can custom scripts be added? e.g. business logic like info from API

Bertrand Delacretaz

I suppose the https://adapt.to/2023/schedule/build-super-fast-storefront-experiences-with-edge-delivery-services-and-adobe-commerce talk this afternoon will help answer this.

Why is the composition not happening on the edge instead of the browser?

Stefan Seifert

You have no custom logic on the edge. Well you actually could do this in your BYO CDN in front of edge delivery services (we implemented e.g. a smart redirect logic for legacy URLs in a cloudflare worker) - but performance-wise, it's not really required.

Henry Kuijpers

Is the JavaScript piece you showed (the "decorate"-function) executed client-side? Or is it a pre-processor, that is executed before the content goes into the CDN? I believe you just said this happens client-side - Isn't this very undesired?

Bertrand Delacretaz

Yes, out of the box that "decorating" code runs on the client,in an optimized way according to the Eager/Lazy/Delayed phases that Markus mentioned. If you _really_ need to avoid that you could run such code at the Edge using whatever mechanism your CDN provides.

Stefan Seifert

exactly - usually all block codes lives on the client. It's loaded when the block is used the first time on a page (JS+CSS for the block).

Behzad

In the case that multiple documents are fetched by JS to build pages, Is there a way for a non-technical author to find out about these dependencies?

Stefan Seifert

Franklin is build with the mantra to make everything as easy as possible for the business user (even more than make it easy for the developer). So, business should not require to care about this, you should try to prevent in your custom implementation cases where misused by the business user leads to negative impacts. As said in the talk, a few additionally HTTP requests to documents usually is not a problem.

Adding css classes on page load... why?

Stefan Seifert

because you cannot add them "on the backend" (HTML is generated automatically from the documents). i know, looks ugly at first sight.

Rogier

Looking back, would you apply "edge" for the adaptTo() site again? Or would you be happier with a newer AEM implementation? And why?

(see answer in talk video)
Can you also use this for headless content management, where you have multiple themes which has texts and so on and the author can easily choose where he wants to get the resources from to click together there websites for example?
(see answer in talk video)

Jörg Hoh

How would you provide this content also for consumption in an SPA?

(see answer in talk video)

thh

How many man-days did the migration take?

(see answer in talk video)

Masoud

Do you re-use images across pages or do you have to have multiple copies? How large is your storage after migrating from AEM to helix?

(see answer in talk video)

Robin

Storing form data in an Excel sheet is not the best idea (see https://www.bbc.com/news/technology-54423988, missing data because there is a limit in the number of rows). Is there no alternative available with a database solution?

Stefan Seifert

yes, this is only a simple solution for simple use cases. if you need more you should of course integrate with a "real forms solution" that has a proper process to manage huge amounts of form data. but it's nice to have such a solution in place e.g. for PoCs or small websites.

Robin

Will there be a way of writing plugins (which can be easily shared among multiple projects) for the Edge Delivery Service?

Stefan Seifert

technically, this is a question about how to share code in NPM-based JS projects. so there is no limitation to do this with the usual NPM-based tooling.

BartT

Is custom JS minified?

Stefan Seifert

by default, no. we worried a bit about this as well, but it did not turn out to be a problem. it's a controversial debate if you still use bundlers like webpacks with nowadays modern browser and HTTP/3 support, and i'm not a frontend expert to give a definitive answer (still, i love to see some support for tooling like minification, typescript compiling or PostCSS processing in Franklin).

Michael

Is SSR (server side rendering) also supported?

Stefan Seifert

not in Edge Delivery Services. you might build your own solution with SSR and consume the data served by Franklin.

dzenisiy

Is it possible to have a development environment for the preview purpose?

Stefan Seifert

I was not precise enough in my talk. You use the content that is published to preview in your devenv. But it's all coming from the same "document store" (e.g. google drive), so there is only one migration target for preview and live content.