Beginners Tutorial: Adobe Experience Manager(AEM) Edge Delivery service
Join this channel to get access to perks:
/ @tech-forum
#aem #cms #web #webdevelopment #website
GitHub Repo - https://github.com/techforum-repo/aem...
Google Drive - https://drive.google.com/drive/u/1/fo...
Website -
https://main--aem-edge-delivery-site-...
https://main--aem-edge-delivery-site-...
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/fo...
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/det...
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
Смотрите видео Beginners Tutorial: Adobe Experience Manager(AEM) Edge Delivery service онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tech Forum 31 Март 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,100 раз и оно понравилось 14 людям.