Beginners Tutorial: Adobe Experience Manager(AEM) Edge Delivery service скачать в хорошем качестве

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 helix@adobe.com 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