ÃÛ¶¹ÊÓƵ

Okay, hello, good morning all. We will give just one minute to let people join. In the meantime, I’m going to start a quick poll to gauge people’s familiarity on the topic. And we’ll start in just one minute. Okay, I think we can get started now. Welcome to today’s Ultimate Success webinar on AEM Edge Delivery Services. Neesh, we can jump to the next slide. So the agenda today will be talking about Edge Delivery Services, introduce ourselves, the SMEs that will be speaking today. We will give an overview and introduction on EDS, talking about the architecture, talking about a couple of the offering options, including document-based and using AEM offering, Universal Editor, also called WYSIWYG. Neesh will be giving a demo on those methods, and then we’ll be including some references and Q&A. Quick reminder at this point on Q&A, if you look at the top of Teams, you’ll see a chat icon and also a Q&A icon. And to help us keep track of the questions, please use that Q&A panel to ask questions. Okay, Neesh, we can go to the next slide. So I am Jeff Holmquist. I am a senior field engineer with ÃÛ¶¹ÊÓƵ Ultimate Success. I’ve been implementing AEM since about 2015 and joined ÃÛ¶¹ÊÓƵ in 2021. Also with us today is Neesh. Neesh, do you want to give a quick intro? Yeah, thanks, Jeff. Hi, everyone. My name is Neesh Sinha, and I’m also one of the field engineers here at ÃÛ¶¹ÊÓƵ. I come with more than 12 years of experience on AEM, on different versions of AEM, currently working on AEM as a cloud and edge delivery services. Thank you, Neesh. Now we can jump to a quick overview of EDS, and then Neesh will get into the details. So overall, edge delivery service is a set of composable services designed to enhance the capabilities of AEM. One of the big parts of that is delivering exceptional experiences that drive engagement conversions. So there’s fast offering, fast development cycles, and intended to have a 100% Lighthouse score. Again, you can publish content quickly, launch sites rapidly, which is going to help improve conversion, reduce cost, and provide content velocity. Again, we have two offering options, document-based and universal editor. So document-based allows you to use Microsoft Word or Google Docs to enter content with tools that authors will be familiar with. And then universal editor is a little bit more like what existing AEM site’s customers will be used to. It’s an alternate interface, but it’s more of that what you see is what you get offering within AEM as the content repository. Okay, Neesh. Yeah, thanks, Jeff. So now we are going to talk a little bit about AEM edge delivery services and as the AEM as a cloud service architecture. So what you see on the screen is high level architecture of AEM as a cloud service. Now as we all know, AEM as a cloud service or AEM 6.5 comes with a traditional author instance, a published instance, and then we have a dispatcher and then CDN on top of it. So now with the introduction of edge delivery services, it comes within the architecture or within the framework of AEM as a cloud service, as you can see on the screen. Now one point to be noted, as we can see, it is part of AEM as a cloud service, but essentially you don’t need AEM author tier or published tier to go live with edge delivery services. Now we are going to see all of those things in the demo, but just to explain you, there are, as Jeff mentioned, there are two ways of authoring content and then publishing it to edge delivery services. One is document based authoring, where we use Google docs or Microsoft docs to create the content and publish it to edge delivery services and then host it to the customers. There is another way of authoring, which is AEM authoring. In this type of authoring, what we do is we connect existing AEM author instance via universal editor to edge delivery services. Now there are a lot of benefits when it comes to using AEM authoring instance as an author source for edge delivery services, because we can utilize all of those benefits that comes with AEM, which is any kind of workflows, MSMs, launches, and all of those things can be utilized. Further moving to the next slide is the detailed architecture of edge delivery services. Now as you can see, it is divided into four sections. The first one is existing customer web infrastructure, which is where the customer brings their own CDN. It could be Akamai, it could be CloudFront, or any other CDN, where the request comes from the browser. So that is the first request that goes from browser to the CDN level. Next as you can see, it is the edge delivery services. Now this is the serverless implementation where the content moves as and when we author the content either on AEM or on document based authoring and move the content to edge delivery services. Now edge delivery services also comes with its own CDN. So there are two CDN that comes with edge delivery services. One that comes with the live site and the second one that comes with the preview site that we have, which we are going to see in the demo again. Now there are two levels of caching that can be implemented. The first one is at the customer infrastructure level, which is the customer CDN. The second level of caching can be achieved at the edge delivery services level of CDN. Under that we can see there is structured and unstructured content, asset, and media and code. Now this is called as the content hub for edge delivery services. So now as and when, as you can see in the last section, there is AEM authoring, there is third party, and there is existing customer content and repositories. So by this architecture, what I would like to explain is, as you can see, there are different icons for documents as well as there is an icon for GitHub that we see. Now all of our code, all of our content stays within GitHub and in the last layer that we see, either within AEM repository or within the documents. Now there is a tool called AEM sync tool. So as and when we install that AEM sync tool, publish the content, it moves from the lower section to the second lower section, which is structured and unstructured content, asset, media, and code, which is called as the content hub. And now from this content hub edge delivery services pulls in the content and present it to the customer via the web browsers. So this is the high level architecture of edge delivery services. Further moving on, as we saw, there are two ways how authoring can be done with edge delivery services. The first one is document based authoring. So what is actually document based authoring? So as in the beginning, I said, EDS is a part of AEM as a cloud service, but essentially you don’t need AEM author instance or publish instance to host your website. This is where edge delivery services with document based authoring comes into picture. Now content can be created and hosted with EDS just using Microsoft Word or Google documents. There are a lot of benefits that comes with document based authoring. The first one is with document based authoring, you can create your content very quickly and you don’t need to go through the training of knowing AEM or any other tool. So with the known authoring tools like Microsoft Word or Google document, the content can be created very easily. There is a very streamlined process that we are going to see of reviewing the content, approving it and publishing it. Now one of the most important thing is because these tools, Microsoft Word and Google Docs are pretty much used by a lot of people. So there is not much onboarding required for using this or using this authoring. And the last one but not least is this can be developed using plain CSS and JavaScript in the GitHub. So not a lot of coding experience or you don’t need to be detail oriented coding. If you know basic CSS and JS, you can still work on the development of edge delivery services. With the next slide, you can see if we plan to develop our websites on edge delivery services with document based authoring, these are some basic requirements. We need to have one GitHub account where the code is going to decide. We need to have either Google Drive or Microsoft SharePoint where our content is going to stay the content as well as the assets. Then we have AEM Sidekick. So AEM Sidekick is a plugin that is provided by ÃÛ¶¹ÊÓƵ, which can be used to edit, preview and publish the content from these documents to edge delivery services that we are going to see in the demo. And last but not the least is AEM Code Sync tool. Now AEM Code Sync tool is the tool that syncs up the code from GitHub to edge delivery services. So as soon as we install this AEM Code Sync tool, once we commit our code to GitHub repository, it syncs up or pushes the code from GitHub to edge delivery services. Below we can see what are the steps to create a site. So I always call this out that the time to create a site with edge delivery services could be less than a day or less than an hour. Definitely you need to modify your content, build up your content, but to create a website is going to be pretty quick and fast. There are only a few steps that we need to follow to create a website. The first step being creating a repository using a boilerplate template, which is provided by ÃÛ¶¹ÊÓƵ, as you can see in the link. The next step would be to install the AEM Code Sync app. Now this app is responsible for moving the code from my repository to edge delivery services. The third step would be to copy the starter content. Once we create our own repository using the boilerplate template, there is a starter content that is provided by ÃÛ¶¹ÊÓƵ. So now once you create your own repo, we need to copy those starter content from that repository to our own repository and then we can customize or modify based on our requirement. The fourth and one of the most important steps is we need to share the docs, the documents with helix at adobe.com and we need to provide edit rights for this content. And then the last one is updating the fstab.yaml file. Now again we are going to see these things in the demo, then it will make more sense, but what we do is we are doing the mapping in fstab.yaml file. So when we create our repo from the boilerplate repo, the path of the documents are mapped from the boilerplate template. Now we want it to point to our own repository, that’s why in fstab.yaml file we do update that part. And last one is installing the Sidekiq and preview and publish. So Sidekiq is a tool plugin within our browser which enables us to preview and publish the content from the documents to edge delivery services. So this is all about edge delivery services with document based authoring. And then we are going to the next slide is edge delivery services with AEM authoring. So we are going to see the demo for both. And with AEM authoring, the authoring to content is done via universal editor. So now again universal editor, the benefit of having edge delivery services is now one of the differences between edge delivery services and between AEM authoring and document based authoring is in document based authoring you cannot see how it is going to look like on your website, which is WYSIWYG. But with AEM authoring we can utilize the benefit or powerful feature of AEM of seeing what you’re going to see exactly on your website. Some of other benefits is with WYSIWYG you increase author efficiency whether headless or headfull. So that means whether you are trying for headless or headfull, you are going to see how exactly the content is going to look like for the authors. There are different advantages of AEM that we can utilize. Like for example, we can take use of MSM, we can take use of workflows, we can utilize all other traditional AEM features that are available with edge delivery services as well. Again with edge delivery services AEM authoring, there are some basic requirements that we need to have. The first one remains same, we need to have a GitHub account where the code is going to stay. We need to have AEM as a cloud service sites license. And the last one is AEM code sync tool. Again this is the same tool which is used to sync the code from GitHub to edge delivery services. The steps also, some of the steps are common with document based authoring. As you can see, first one we’ll have to create a repository using a boilerplate template. For document based authoring and for AEM authoring, the boilerplate template is different as you can see. And then again we have to install the code sync app, we have to update fstab.yaml file. In document based authoring we updated the fstab.yaml file with the SharePoint URL or Google Drive URL. Here we are going to update it with our own author AEM author instance. And the last one is updating the path.json file. So if you know about AEM, traditional AEM, you know we have resources over factory settings where we do all the resource mappings so that what path request incoming request maps to what outgoing request. So those are the mappings that we do. Similar way in path.json we are going to do that kind of mapping. Moving to the next slide, there are some comparison between AEM based authoring and document based authoring. First one is you get Wysbig with Universal Editor. In document based authoring we have Word or Google Docs where we don’t get Wysbig but it’s still easy to author because it’s a known tool that we use for authoring. The content management is again AEM sites as a cloud service is used in document based authoring SharePoint or Google Drive. AEM Sidekick is used, AEM Sidekick is a browser plugin. Knowledge is at JCR level similar to AEM. It creates a node structure within AEM and all the content gets stored within JCR. For document based authoring everything gets stored in docs or excel files for Google or Microsoft. Rest all everything remains same. Developer skill again for both we need simple JavaScript and CSS knowledge. The developer experiences again AEM, the same AEM as delivery services concepts like GitHub blocks, AEM simulator, all of these understanding needs to be there. Delivery tier is AEM delivery services that comes with its own CDN and you can bring your own CDN for both. User experience is one of the most selling factor of AEM delivery services. It helps us to build up a site quickly with almost 100 Lighthouse scores. You will always find your website performance to be great with AEM delivery services. And then these are some of the things that remain same. Moving to the next slide now I would like to present a demo on the two different types of authoring that we saw. So I will first go and talk about document based authoring. So let me go ahead and share my screen. Also launching a quick poll Anish. So we will give people just one minute to take a look at that poll if they would like. And continue with the demo. Sure. Okay. I think you could continue on. Thank you. So we are going to share this deck with you after the presentation. That’s why I would like to show you exactly how easy and how useful this slide is going to be to create our website. So as this is shown the first step is going to create a repo using this boilerplate template. So I’m going to copy this boilerplate template. Go to my browser and then just open this. As you can see I’m logged into this repo. What I have to do is I’ll go ahead and create a new repo using this particular template. I’ll rename it as let’s say EDS document based authoring webinar. And I can see this name is available for me. I’m going to use this and create a repo. As you can see the next step is going to be installing AEM code sync app which is this link. So I’ll just simply go even all of those details you’re going to see here down. So first one is if you go local development what steps needs to be followed. So the second one is installing this GitHub app. If I go here since I already installed it it’s asking me to configure it. If you haven’t installed it it will show you how to install and then configure it. So once I click on this this is my GitHub profile. I’ll go and add my repo that I created. So EDS DBA webinar save this. And that’s it. It is saved. Now as soon as I install this code sync app you’ll see there is a there is a deployment process that gets started. So if I go back to my repository that I created which is this you can see there is a deployment that happened just now. So this is what this deployment is doing is it is pulling up the code from my GitHub repo which is this and it is deploying it to edge delivery services. So as you can see my code deployment is done last deployed just now. And this is the URL that it provides me to access my website. Now the URL is broken into if you break this URL you can see the first one main is the branch name the second one what we see is the repository name and the last one is my user ID for GitHub account. So this is how the URL is defined. If I click on this again you will see it is the website is available now. I can access the content which is hosted on this website. Now as you see in the end there is a page this is a preview environment if you change this page to live this is the live environment. So now when you are actually implementing a project you are going to map your request with the live URL. And if there is some development going on or your team is working on implementing and you don’t want to publish everything to live you will be using page for previewing the content. It is very similar to what we have preview and publish within our traditional AMM implementation. Now since this is live you can see the next step would be to update the mapping so to get the starter content from Microsoft SharePoint or Google Drive. So what content I see as I did not create any content but still I see some dummy content this is coming from the boilerplate content. Now if I want to map it to my own repository what I need to do is I need to create my own repository. So I will just show you in a minute how to do that.

Yeah so this is my Google Drive. What I’m going to do is I’m going to create a new folder and I will call it as so there is no such requirement but I prefer it to have my repository name same as what repository name I have kept in GitHub because it is just there is not mandatory but it’s the best practice to follow. So you can see EDSDB webinar. Now I have created my own folder. Now next step would be to copy the starter content in my repository. So to do that you can see this is if I go here this is where the starter content stays. Yeah so now what I’m going to do is I’ll just create the same file index nav and footer and copy this content to my Google Drive. So I will say create a new Google doc. I will call it as index and then copy this content everything from here to here. This is done. Today I will create a new file call it as nav and then copy this to this file and the last one is footer. Okay so now I updated these three files. Now the next step would be I need to point this to my Google Drive folder instead of going it to I need to get the URL for this. So this is my URL of my repo and I will have to go to my fstab.yaml file where the mapping has been done. So you can see this is the mount point where this mapping has been done and for ease of the demo I’m just going to update this directly. I will update with my URL and I am pushing the changes. I will say updating repo link to my and then commit the changes and you can see as soon as I commit the changes since I installed app sync tool you can see the deployment gets started. So you can see updated fstab now deployment is happening and deployment is happening by AEM code sync app and it is going to deploy to my edge delivery services. Within a second if I refresh you can see the deployment is done. Now if I refresh my page I should see the content from my repo. If I hit this I should see from my repo but it is giving me 404 which is expected because definitely I created this content from the starter content and moved it to my folder but I never published the content. So the next step would be for me to publish these three content. So what I’m going to do is I will have to publish each and every file and to publish it as I said in the beginning we need to have AEM sidekick plugin. So AEM sidekick plugin is a plugin that is provided and you can go ahead and install it on your browser. So once this plugin is installed.

Let me get this open again. Looks like this plugin is giving some error. On all side manage extension. Do you by chance need to set up the document sharing niche? Yes I think so. That was one of the questions we had in the chat was what does it mean to share the docs and that’s with the Helix ÃÛ¶¹ÊÓƵ technical user which needs access to read those documents and it also needs write access because in some cases it’s updating indexes. One of the features is to have an index of all the pages and that actually gets created in a Google sheet or Excel document and then that can be queried against in EDS. Yeah. Let me bring in this. I can select this. I will have to share this with Helix at ÃÛ¶¹ÊÓƵ.com and I need to provide it as editor writes and share this. Access is updated and now next step would be to go here and I hope this should work now. Yeah this is working now. You’re right. Sorry my bad I missed that step. So once I share it you can see this option there is an orange dot that we see. This means there has been some edit that has been made to this page but it was not published. So once I publish this click on preview it gets published to the preview instance which is dot page. So you can see it is published and now it is pointing to my content. Now if I refresh this again you’ll see the preview is done but I can go ahead and publish it too if everything looks good. If I go back you can see there is a publish button which again it’s showing me it has never been published but some edits have been made. If I click on publish it again publish it to my live site which is this. Now this is my content coming in just to verify I’ll go ahead and make certain changes here. Save this file and again if I refresh this you’ll see it will show me an orange dot with preview when I click on this. You can see the content changes happening. So how this easy it is to now I have my content now you can go ahead and create your own content. There are some predefined ways of creating the columns there are some predefined ways of how you can make it a like h1 h2 title all of those things there is a nice documentation available we are going to share the documentation with you which explains you though this is a word file format but what are the things that needs to be done in order to achieve the look and feel or in order to achieve the design that you feel appropriate for your website. So for example you can see this is a column it comes like this but when I go to my page it is showing me like there are some card what I see here if you go further go down this is how I define my card component and when it comes here it becomes like this. So there are a lot of nice design easy to understand easy to learn that that that is available in the documentation that we are going to share. So I’ll quickly move to the next step which is EDS with AEM authoring. So now AEM authoring again there are some steps that we need to follow I’ll just quickly go ahead and create a website. This is my boilerplate template so for AEM authoring it is boilerplate-xwalk so I’ll create a new repo from here I will call it as EDS AEM webinar and this name is available to me create repo and within a second it will it will create the repository for me. Once this is done again the next step is installing code sync app so now code sync app I’m going to configure and select my new repository which is AEM webinar save this and you’ll see as soon as it is done the deployment gets started so it is getting deployed to my HTML services instance. So deployment is done now if I click on this you can see this content is again coming from my AEM this is not coming from my AEM but the boilerplate template so again the same process there we updated our SharePoint repository URL here we’ll have to update our AEM URL that update needs to happen at fstab.yaml5. Now again I will bring in my AEM author URL there are a couple of more steps that we’ll have to follow here I will show you in a minute. So this is my AEM author instance so if I go to my sites I don’t have the project which I want to map it to my my edge delivery services project yet this is the URL that is that needs to be mapped so what I’m going to do is I’m going to get my AEM author instance URL which is this edit this and update it so that it points to my AEM local instance now this is a path that remains same because this is the mapping that happens with edge delivery services to AEM what I need to update is these two so this this needs to be updated with with the my project name and my user ID so this is my user ID and this is my project name. Okay go back. This one I’ll quickly verify fstab.yaml file. So looks like I updated it to my username and this is the project name that I have created edsaum webinar now I will commit the changes mapping to AEM instance I will commit this this part is done let me bring in my this so what I did is I installed this install this app then updated this path last one is updating path.json file so what I’m going to do is I’ll go to my path.json file AEM webinar let me go to path.json file this is this acts as a resource mapping and in this I need to update this with my project name. Okay this is updated commit this changes changes committed as soon as I commit my changes you will see again the build starts now meanwhile this build happens what we have to do we need to create the same content structure in our AEM instance now to create the code structure in AEM instance we cannot go ahead and create a project simply we’ll have to create or we’ll create a site from a template predefined template now when I go and click on predefined template you can see AEM site with edge delivery template which is one zero point one point zero this is newly released and this template if you don’t see within your AEM instance you will have to import this now how do you get this if you go to your the boilerplate template you will see in the releases tab you’ll see there are these two packages which is actually this is latest one this is released probably 16 minutes ago so this is the latest one which is released 16 minutes ago so now I have one which I already used so I’m going to use this if you don’t have one download the latest one from here it will talk about what are the additional features coming into the new release and then probably you can install the latest one I’ll select this now I have to provide some details here I will just say site title this site name needs to be same as your project in github and this needs to be the github url which is my this url this one and I said the url create now it is creating and within a minute we will see the project is created so you can see example sites eds-aem-webinar this is the one that I created and now if I go and edit this it is created within my AEM author instance and you can see it is editable via universal editor now I can use all of those AEM capabilities that we are talking about we can create we can edit we can see we can preview how it is going to look for the end user so all of those AEM capabilities are available now with AEM based authoring going back to this now if I click on this you can see it is again saying page not found the reason is I created my page I created my project within my AEM but I never published this so the next step should be to go ahead and publish this so once I publish this within a few seconds you will see this starts coming in your website so this is accessible now you go ahead and you utilize AEM authoring capabilities you can see this is here I will add a new component let’s say inside this I’m going to add a new component meaning let’s see I go here add a new component make it as save this publish this publish this one and it’s done if I go I should see the changes so now I’m utilizing the powerful authoring capabilities of AEM and hosting it on our edge delivery services so this is how easy it is going to be if we are utilizing AEM as authoring tool there are some things I would like to show you within the code base so what I’m going to do is I will check out the code quickly just to show you few things few important things within the code so okay so I’m using a tool called source tree to download the code so you can see I am checking out clone from URL I will use this URL let’s see okay I got the code now this is my code let me bring in my visual studio new window I’ll open folder I have my own project okay so you can see this is where the code I checked out my code from my repository and you can see I would like to talk about a few things here so first one we did talk about fstab.yml file where the mapping happens we did talk about path.json file where the resource results where the resource resolver mapping happens similar to what we had in AEM now there are some other important files that I would like to talk about is first one is script so script is script is the one where all the uh predefined uh javascript that stage which which is responsible for rendering the page that we are seeing on the website so this is the this comes with the boilerplate code all of these things there are two additional script that you will see editor support rt.js and editor support.js so these two js files are responsible for making sure AEM you are able to edit everything as you see in AEM the other important folder is blocks folder blocks folder is very similar to what we have we have components we call components it in AEM world same these are the components for each delivery services so blocks comes with where we write or it is written in plain css and js file you can see simple css and js if you have you’ll be able to easily create your own component set of components the next important file is component model.json so component model.json file is the one where you you when you create your project from a boilerplate template you do get list of components or some core component that you can extend and create but let’s say if you want to create a new component let’s say teaser component where you want to have a title you want to have an image you want to have a description all of those fields so this is where you will create your own component definition so like you can see there is a hero component it can it it accepts an image all text and a text in its authoring dialogue same way you can you’ll create your own component definition and then provide what fields it accepts from the authoring perspective then component filter.json it is again very similar to policy that we have been traditional AEM so if you want to enable that component or allow that component to be authorable or to be selected by the authors this is where you make an entry so let’s say if you want to allow it within a section which is let’s say that is a section so this is my section in any of the section if I want to allow that particular component so list set of components I will have to define that here if I am creating a custom component then again component definition component definition.json is very similar to resource mapping so if we want to extend any of the components or if we want to use any of the resource type this is where we are going to utilize that so now quickly I want to show you one custom component I’ll create one custom component I’m not going to write everything but I’ll just copy paste the sample code that I have let’s say I want to create a teaser component so what I’m going to do which is a custom component for me or custom block for me I am having a teaser I created an id these are the fields that I am adding which is an image with there is a pre-title and there is a description let’s say these three so I added defined it next step would be to create a definition in this definition I will have to again provide a detail about what component so I’m going to have my own component which is teaser I’m calling it as a teaser and it is also resource type is block because this is one of the blocks that I’m creating the last thing is I will have to make an entry in this component filter.json to make the entry I will have to use the exact same name as id what I have created so I’ll go ahead here and paste it here in the blue codes and that’s it so once I do this you can see all this is my code these are the three files that I changed I am just adding committing the code pushing the changes so I’ll just say it as adding teaser component and once I commit this let me go back to my github and you will see there is a deployment that will start so deployment already started and it is done now if I go to my am authoring instance which is this one let me refresh this and if I go here section in this section I want to add this teaser component so now you can see this teaser component is available I’ll go ahead and add this teaser component and in this teaser component I will add certain properties let’s say a background image I added this select this so you can see this is added pre-title and I will add a description save this and you can see retitle sample description this is how my component is available if I go ahead and publish this page again I should see my component so this is my page and you can see my pay component is published now if I go and show you how the DOM gets created so if I show you this one you can see so this is my this is my teaser block that I created teaser block and inside this teaser block there are three different div so first div is image as I created the image second div is pre-title and third div is description that I have now there are a lot of things we can do currently you see these are three different div what if I want to make a grouping like I want to put same styling to this all of those things can be done it’s just a matter of making certain code changes and updating your some of the fields and CSS and JS and I have one more thing that I would like to show you is again I am copying this I’m updating some of the fields component model.json so I added few more fields you can see now grouping how grouping works so now let’s say I want to have image as as a background and the title and then pre-title description all of those things as a foreground so now I want to have a background and the title and then a pre-title and then I want to have a background and then I want to have a background and then I want to have a background and then I want to have a background and then I want to have those things as a foreground so for that what I can do how the grouping works is just a keyword you need to attach so background underscore image background underscore image alt text and then foreground pre-title so what it is going to do what my DOM looks like currently it has three different divs so I need to change this component and this is how this component can be handled the other thing I need to change is I think this is good let me just build this component or build this deploy this again I made two changes commit this file adding updates I made this since I changed the name of the component you can see name of the component name of the field is changed that’s why I have to delete the component and then re re re drop it so what I’m going to do is select this section teaser delete this okay this is gone and then deployment is done deployment is done what I’m going to do is again we drag and drop the same component so main section in this I will drag and drop teaser component now you can see I added a name to my teaser component so if I went to component definition I added a title I added a title type that is why even if there is nothing configured it is showing me okay there is a component new teaser title component it’s a default title that I added so that if until and unless I author it I definitely I can author it but if I don’t I will still see the component so I can just add it to the page so this is one thing if I go and add some images to it image or demo let’s say pretense level new teaser h3 and this is description okay I added some of these details so you can see and I will change the teaser so demo teaser okay so these changes I did I published it and I should see the changes in my page which is demo teaser so all of these things are looking good okay I am able to change my code content and everything now you saw whenever I’m making a code change I what I’m doing is every time I am deploying the code so in in normal development scenario this is not a common practice that every change I need to deploy my code so for that there is a way we can do the local development so I will show you this okay so let’s say I want to do the development locally what I am going to do is okay we have been and then I have my code and then I have my code and then I have my and then I have my code in this particular in this folder so what I’m going to do is for h3 services we have a command am up when we run that am cup up it creates a local version of my local version of my website so you can see what you see on the site so what it is doing is it is pulling the code from my local repository which is my visual studio code or my computer but it is getting the content from the published server so now if I want to do some development on my local and publish it once it looks good I don’t want to republish it again again that’s what I can do so what I’m going to do is in blocks I’m going to add some styling so I will call it as teaser and as I said it is done using simple css and js so I’m going to create two file a new file teaser teaser.css and I have a sample code that I’m going to bring in so let’s say I just add a few styles here in css and as soon as you make the changes so js is this no yes so now let me check this teaser block now I see two divs one div is this and then so now you can see this so this is my local what I did is I am making the changes to my local code base and I can see like it so this is yellow I don’t like yellow I want to try red color I will save as soon as I save you can see you are seeing your local development happening on your website now now it totally depends on once you are good with the changes you can see that you are good with the development everything looks good what you can do is you can go ahead and publish your code so you can see these two files I changed so I can push this code and commit this code and yeah that’s it that that can be done so and you should a question at this point one of the questions we got in the chat was about adding class names which you showed as far as controlling more of what the elements will be if they wanted something to be within a span my understanding is they would do that within the js they can get a little bit more hands-on with how they build the html is that correct that’s right exactly so within your css and js file you’re going to create so this is a very simple where I’m reading the block children and adding these class names but let’s say if you have some other requirements so you will have to build up your script like that so you can see this is one of the out of the box component or out of the blocks block that we have so you can create your own div you can create your own span you can attach whatever class name so all of those things need to be done at the js level I think one more thing to add is as far as you know if you have a development branch doesn’t that create kind of its own eds website so they can push things to let’s say a feature branch and preview those changes without merging to main that’s correct yes and that is where I can show you so currently what I’m doing is everything I was pushing to main branch let’s say I don’t want to push these things to my main branch because I want to push it to my feature branch so I’m doing everything using source tree but you can do it probably using terminal as well I will call it as teaser feature so once I create a new branch which is called as teaser feature I can commit these changes commit these two changes to my teaser branch adding teaser so once you commit create a new branch and commit these changes to your teaser when you go back to your project you will see now you have two different branches so one is main and one is teaser feature now the changes that I just pushed will be available in my teaser feature but will not be available on my main branch so if you go to main branch main branch still contains the old implementation that I did but my feature branch contains the latest one now if I feel everything is good our pull request can be raised and you can review the pull request it goes exactly the same route what any traditional project goes in so you can create a pull request and see the changes and all of those things and then if everything looks good go ahead and merge it so I can create a pull request it will show me what are the changes that I’m pushing and that’s it yeah awesome thank you yeah and I believe that is end of my presentation and these are the references that we have in the documentation in the deck so once you have the deck this contains a lot of information almost all the information that we discussed or we saw in the demo so yeah it’ll have you’ll have this with you do your own POC or try it on yeah it really is fast if you can set aside a day you’ll gain a lot of understanding just by following the documentation at aem.live to walk through essentially everything Anish just did here and take a look at the block collection I linked that in one of the the Q&A items.

One more question Anish there’s a question about using React or Angular in an EDS site my feedback there’s product team definitely recommends starting with vanilla JavaScript there’s a best practices documentation talking about getting you know whole team buy-in before introducing anything like this because out of the box you’ll have a 100% Lighthouse score on mobile with the boiler plate and we’re finding many customers can maintain that high Lighthouse score now when you start introducing libraries it’s easy to start moving away from that I know there’s I’ve seen recommended in the past to use like a lightweight React called Preact with a P at the beginning but Anish wanted to see if you had any more detail to add to that as far as you know cases where they do want to add more let’s say React functionality yeah so you’re right Jeff so it is recommended to use vanilla CSS and JS as you see it brings to 99 and even 100 if we optimize it so definitely it is recommended but if I show you again the architecture that is this so currently we are talking about AEM authoring or we are using talking about document based authoring but you can see there is something called third party so you can plug in any external system as well as an authoring source so bringing in as far as creating your blocks and implementation for edge delivery services it is always recommended to use vanilla CSS and JS just to make sure we are we are keeping the score and there are not much scope of having this go down so yeah but any anytime you have Reactor or other frameworks you work if you want to work with as Jeff said definitely gets get a check with the product team to make sure we are we are not customizing something that will take down the score okay I think we had a lot of great content we’ve only got about two minutes left so I’d say if you had any questions that aren’t answered definitely check out the documentation that Anish is sending out and you can always reach out to your ÃÛ¶¹ÊÓƵ account team as well with anything that’s not answered there are any kind of support issues that can’t be solved via support tickets we do have one more kind of exit poll I’m going to put up if Anish do you have anything else to add? No I think I’m good for now.

Okay I’m going to launch that quick exit poll and thank you all for attending. Okay well thanks again folks I hope you have a good rest of the day thanks