Beginners Tutorial: Adobe Experience Manager(AEM) Edge Delivery service

Join this channel to get access to perks:
https://www.youtube.com/channel/UCmsMxlu34bCXPQ_pCN1J0-w/join
#aem #cms #web #webdevelopment #website

GitHub Repo - https://github.com/techforum-repo/aem-edge-delivery-site-tech-forum
Google Drive - https://drive.google.com/drive/u/1/folders/1VHDLUm-Gq3ZUPuZ6pYAW9060MVe8u_2U
Website -
https://main--aem-edge-delivery-site-tech-forum--techforum-repo.hlx.page/en/
https://main--aem-edge-delivery-site-tech-forum--techforum-repo.hlx.page/es/

EM Edge Delivery Services is Adobe’s newest way of developing webpages, Edge Delivery Services is a technology that simplifies digital content management with a serverless, microservices and composable architecture.

EDS was previously known by various names, including Adobe Franklin, Project Helix, and AEM Next-Gen Composability.
With EDS, you can streamline your web content creation process by directly importing content from familiar sources like Microsoft Word, Excel, or Google Docs. Imagine turning your documents into web pages in just a few clicks!

EDS is capable of consuming content from AEM, whether it's authored through the WYSIWYG editor or the Content Fragment Editor.
One of the key features of EDS is its Decoupled Content Repositories. This allows for content management externally through platforms like SharePoint, Google Drive, or even AEM itself. The front-end layer then fetches and displays this content on the website.
The content can be previewed before publishing. Upon publishing new content, the cache is immediately invalidated to ensure that your audience always sees the latest updates.

EDG uses CSS and JavaScript to parse Google Docs pages, generating the necessary HTML for their display on the internet as web pages. Developers can code on Edge Delivery Services using basic HTML, JavaScript, and CSS, with no special frameworks required, simplifying the development process.

Edge Delivery Services uses GitHub, enabling customers to manage and deploy code directly from their GitHub repositories. As a 'serverless' platform, Edge Delivery Services simplifies both the development pipeline and deployment steps. Being serverless means there's no need for time-consuming environment setup. Simply creating a new GitHub branch allows for separate testing of changes.

The primary goal of EDS is to build websites with enhanced performance and an optimal Lighthouse score, aiming for a perfect 100. Websites built using the boilerplate templates provided by EDS typically achieve this 100 Lighthouse score. EDS places significant emphasis on the loading of browser resources, including lazy, eager, and delayed loading methods, to enhance website performance. Additionally, Adobe incorporates continuous monitoring tools that assist developers in understanding the impact of each new code commit on performance.

The content authoring process with EDS is simplified, requiring no special knowledge. Content can be quickly authored using familiar tools and easily transformed into website pages.
Edge Delivery Services - Performance
Load Eagar – LCP content, LCP images loaded eagerly
Load Delayed – Mobile devices have limited CPU power
Load Lazy – Rest of the page, loaded in order – top to bottom, lazy styles, Off-screen images loaded lazily
Optimized load order
Monitor the performance/CWV continuously - the EDS RUM monitoring helps you understand how fast your site is for your visitors.
Properly sized images - optimizes image sizes automatically
Images served in next-gen formats
Edge caching
Perfect Lighthouse score
Stick to EDS best practices

Edge Delivery Services - Setup
Create a new GitHub repository based on - https://github.com/adobe/aem-boilerplate
Install GitHub bot to the repository - https://github.com/apps/aem-code-sync
Sample website –
https://<branch>--<repo>--<owner>.hlx.page/
https://<branch>--<repo>--<owner>.hlx.live/
Starter content - https://drive.google.com/drive/u/0/folders/1MGzOt7ubUh3gu7zhZIPb7R7dyRzG371j
Upload the content to your repository and share the folder with [email protected]
Update fstab.yaml with your own google drive folder path
Install sidekick browser add on - https://chromewebstore.google.com/detail/ccfggkjabjahcjoljmgmklhpaccedipo
Enable the sidekick add on for the project
Update content, Preview the content and publish
Local testing of functionality and style changes
Clone GitHub repository to local
Install AEM CLI - npm install -g @adobe/aem-cli
cd to repository, aem up
Enable the changes and test
Push your changes to remote repository once ready