Decoding Edge Delivery Services/AEM Franklin : A Comprehensive Overview
Overview
In the dynamic landscape of today’s technology, Edge Delivery Services has become a notable buzzword along with AEM Franklin (also known as Helix).
Edge Delivery Services focuses on delivering content and experiences with optimal speed, scalability, and personalization. It sits at the edge of the network, closer to users, to deliver content faster and reduce latency. On the other hand, AEM Franklin primarily focuses on streamlining content creation, editing, and collaboration for AEM sites. It offers a new way to update the content and publish AEM pages using Google Drive or Microsoft Office via Sharepoint.
Edge Delivery Services is used with AEM Franklin to deliver the content faster with document-based authoring along with pages with excellent Lighthouse scores of 99 or 100.
While Edge Delivery Services and AEM Franklin are related to AEM it is important to note that they are a part of AEM as a cloud service and are a separate independent module/functionality. A project built in AEM follows a completely different structure and approach than one built using Edge Delivery Services.
Let’s dig this topic deeper and build more understanding.
Architecture
Let’s break it into three parts:
- The Bottom layer: It explains the various authoring options like Google Docs and Sheets, etc. AEM authoring refers to the WYSIWYG editor and headless authoring. The recommended code repository is GitHub. We can also integrate 3rd party libraries and APIs in our code.
- The Middle layer: This layer operates behind the scenes and is fully managed by Adobe. The content hub encompasses code, assets, media, and both structured and unstructured content (authored content). Adobe’s exclusive Edge Delivery CDN ensures that the directly visible content on the site achieves exceptional lighthouse scores of 99-100, even with images and videos of large size. Any use of an alternate CDN requires layering it on top of Adobe’s Edge Delivery.
- The Top layer: It features our in-house CDN, managed by us. On top of it, browsers and apps are employed to showcase our sites.
Building a Site From Scratch
For more details, you can also follow this tutorial.
Key Points
- Instead of camel casing, use hyphenated words for the name of your GitHub repository.
- If the sample site doesn’t run, verify the URL and ensure your repository is configured accurately with the AEM Code Sync GitHub App.
- When copying the sample content to your drive, ensure the file extension remains unchanged.
- If the AEM Sidekick Extension isn’t functioning correctly, ensure that you have added your project to it properly. Additionally, make sure to disable any ad blockers you may be using.
Here’s a brief explanation of the files and folders present inside the boilerplate:
- Blocks: Similar to AEM components, these are reusable components for direct use in the authoring document. To incorporate these blocks, create a table in which the first row contains the block’s name, and the columns below it contain the corresponding data. For detailed information on all available blocks, please visit here. The blocks included in the boilerplate are referred to as default blocks.The content that renders directly on the site from the authoring document without using the block table structure is called default content.There is also the concept of auto-blocking. For example, when an H1 text is written below an image in the authoring document, the text automatically appears inside the image on the published page.It’s also possible to create custom blocks. The block’s name is crucial. For instance, for the “cards” block, its folder name is “cards,” and its CSS and JS files are named “cards.css” and “cards.js,” respectively. The CSS and JS are also written with the block’s name in mind.
- icons: You can store all the SVG files here. They can be accessed using the notation:<iconname>: by the authors.
- scripts and styles: It contains the global JS and CSS necessary for the project. Don’t touch these files unless it is mandatory.
- .hlxignore: During website rendering, the code is crawled by an AEM bot, also known as the Helix bot. To exclude files from bot crawling, we need to specify them in this file.
- 404.html: When you click on a link and the server doesn’t locate any content, it returns a 404 error. You can configure the 404 error page in this file.
- favicon.ico: You can use this file to set a favicon for your site.
- fstab.yaml: You can mount your Google Drive here by simply providing the shareable link to the folder containing the index file.
- head.html: It includes all the pertinent tags within the <head> tag of a standard HTML code. It should remain unchanged unless necessary changes are required.
Other noteworthy files/features to explore
- robots.txt: You can customize the content of this file to index only specific pages on Google, excluding others.
- helix-query.yaml: You can configure this file to export crucial data from your site, such as titles and last modified dates, into an Excel sheet. With this file, you have the flexibility to create custom index configurations.
- helix-sitemap.yaml: This file can be configured with various options to automate the sitemap generation.
- Spreadsheets and JSON: It can translate spreadsheets into JSON files, which the site can easily utilize. A few use cases include authoring form fields and retrieving form data in a spreadsheet upon submission.
- Forms: You can directly get the data submitted for a form in an Excel sheet.
More Insights
Edge Delivery Services and AEM Franklin are continually evolving, requiring additional exploration. As we delve more deeply, more research is needed to unravel its complexities and gain a comprehensive understanding.
As we continue exploring this evolving topic, more insights are coming. Stay tuned for upcoming findings to shed light on new dimensions and enhance our understanding of this dynamic subject.
