ÃÛ¶¹ÊÓƵ

Transcript

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 familiar 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 ATM Edge Delivery Services.

And we can, jump to the next slide.

So the agenda today will be talking about edge delivery services. Introduce ourselves the SMEs that I’ll 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 ATM offering. Universal editor, also called Wysiwyg. And you 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. And we can go to the next slide.

So I am Jeff Home Quest. I am a senior field engineer with ÃÛ¶¹ÊÓƵ Ultimate Success. I’ve been implementing em since about 2015 and joined, ÃÛ¶¹ÊÓƵ in 2021. Also with us today as a niche. Niche. Do you want to give a quick intro? Yep. Thanks, Jeff. Hi, everyone. My name is Allison, and I’m also one of the field engineers here at ÃÛ¶¹ÊÓƵ. I come to, come with more than 12 years of experience on Am. On different versions of. I am currently working. On Amazon Cloud and edge delivery services.

Thank you. Dish. Now we can jump to a quick overview of EDS and then initial get into the details. So, overall edge delivery service is a set of composable services designed to enhance the capabilities of ATM. One of the big, parts of that is delivering exceptional experiences that drive engagement conversions. So, you know, there’s fast offering, fast development cycles and, intended to have a 100% lighthouse score.

Again, you know, 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 ATM sites 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 a, as the content repository.

Okay. Aneesh.

Yeah. Thanks, Jeff. So now we are going to talk a little bit about. Am, as delivery. Services and as a, as a cloud service architecture. So what you see on the screen is high level architecture of Amazon cloud service. Now, as we all know. Am as a. Cloud service or Am 6.5 comes with a traditional author instance, a publish instance, and then we have a dispatcher and then CD and on top of it. So now with the introduction of edge delivery services, it comes within the architecture or within the. Framework of Amazon Cloud service. As you can see on the screen. Now, One point to be noted, as we can see, it is part of a as a cloud service. But essentially you don’t need an author, tier or publisher to go live with delivery services. Now we are going to see all of those things in the demo. But just to explain you, there are there are, as Jeff mentioned, there are two ways. Of, Authoring content and then publishing it to. Delivery services. One is document based authoring, where we use, Google Docs. Or Microsoft Docs to. Create the content and publish it to delivery services and then host it to. The customers. There is another way of authoring, which is a Am authoring in this, in this type of authoring, what we do is we connect existing an author instance via universal editor to delivery services. Now, there are a lot of benefits when it comes to using a authoring instance. Add up as a authors or authoring source for delivery services. Because we can. Utilize all of those benefit that comes with a, which is a new kind of workflows, MSMEs 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 you, the customer, bring their own CDN. It could be Akamai, it could be CloudFront or any other CBN where the request comes from the browser. So that is the first, request that goes from browser to the Syrian level. Next as you can see it is the edge delivery services. Now this is. The serverless. Implementation with. A. Where the content moves as and when we authored the content either on a, an or. On, Document based authoring and moved the content. To edge deliver services. Now, edge delivery services also comes with its own client. So there are two client 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 level 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. As and when. As you can see in the last section, there is a an authoring. There is third party and there is existing customer content and repository. 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 a repository or within the documents. Now, as. There is a tool called a sync tool. So as and when we install that a and sync tool, publish the content, it moves from the lower section to the second, 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 pull some of 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 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 on things. So as in the beginning I said EDS is a part of Amazon Cloud service. But essentially you don’t need an author instance or publisher 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 do not need to go through the training of knowing Aim or any other tools. 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 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 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 reside. 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 a sidekick. So a and sidekick is a plugin that is provided by ÃÛ¶¹ÊÓƵ, which can be used to edit, preview and publish the content from these documents to delivery services that we are going to see in the demo. And last but not the least is a code sync tool. Now, a code sync tool is the tool that, syncs up the code from GitHub to edge delivery services. So as soon as we install this. A. Code sync tool, once we commit our code to GitHub repository, it syncs up or pushes the code from GitHub to a 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. Repository using a boilerplate template which is provided by ÃÛ¶¹ÊÓƵ, as you can see in the link. The next step would be to install the M code sync app. Now this app is responsible for moving the code from my repository to deliver services. This third step would be to copy the starter content. So 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 you can customize or modify. Based on our requirement.

The fourth and one of the most important step is we need to share the docs, the documents with helix@adobe.com. And we need to provide edit. Rights for this content. And then the last one is updating the fstab dot 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 dot Yaml file. So when we create our repo from the boilerplate repo, the path of the documents. Are. Are mapped to the boilerplate template. Now we want it to point to to our own repository. That’s why in fstab dot Yaml file we do update that part. And the last one is installing the sidekick and preview and published. So sidekick is a tool plugin within our browser which enables us to preview and publish the content from. The documents to. Its delivery services.

So this is all about is delivers a selected document based authoring. Moving to the next slide is is delivering services with IAM authoring. So we are going to see the demo for both. And with a Am authoring, the authoring to content is done by. A universal editor. So now again, universal editor. The benefit of having is delivery. Services is now, One of the differences between edge delivery services and. Between A and thing. And document based authoring is in document based authoring. You cannot see how it is going to look like. On your website, which is basic. But with a m authoring we can utilize the benefit or. Powerful Feature of. M of. Seeing what you are going to see. Exactly on your website.

Some of other benefits is, with with way you increase author efficiency, whether headless or head full. So that means, whether you are trying for headless or head full, you are going to see how exactly the content is going to look like for. The authors. There are different. Of. Advantages of M that we can utilize. Like for example, we can take use of MSM, we can take use of workflows. We can utilize all other a traditional M features that are available. With edge delivery services as well. Again, with edge delivery services and 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 a m as a cloud service saves license and the last one is a m 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 will have to create, Repository using a boilerplate template. So for document based authoring and for m 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 dot Yaml file. Now in document based authoring we updated the first app dot Yaml file with the, SharePoint URL or Google Drive URL. Here we are going to update it with our own author, a am author instance, and the last one is updating the path or Json file. So if you know about a traditional am. You know. We have resources, all of our 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 mapping that we do similarly in path or Json. We are going to do that. Kind of mapping.

Moving to the next slide, there are some. Some comparison between app based authoring and document based authoring. So first one is you get with big with universal editor. In document based authoring, we have Word or Google Docs where we do not get this big, but it’s still easy to author because. It’s a known. Known tool that we use for authoring. The content management is again, a sites as a cloud services used, in document based authoring. SharePoint or Google Drive with a sidekick. Is used as sidekick. Is Browser plugin storage is at JKL level similar to M It creates a node structure within M and all the content gets stored within. GCF. For document based authoring, everything gets stored in docs or Excel files for Google or Microsoft. Rest. All, everything remains same developer scale again. For both we need simple JavaScript and CSS knowledge. The developer experience is again and is. A same image. Delivery services concepts like GitHub, blogs and simulator. All of these understanding needs. To be there.

Delivery tier is a delivery services that comes its own with its own CDN, and you can bring your own. CDN for both. Now user experience is one of. The most, Selling factor of edge delivery services. It helps us to build up a site quickly with almost 100, Lighthouse score. So you will always find your website.

Performance to be. Great with. Delivery services. And then these are some. Of the things that seem insane. Moving to the next slide now, I would like to present a demo on other 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. I’m also launching a quick poll on ish.

So we’ll give people just one minute, to take a look at that poll if they’d like. And continue with the demo.

Okay. Yeah. I think you could, continue on. Thank you. Okay. So we are going to share this deck with you after the presentation. That’s what I would like to show you exactly how easy and how useful this this slide is going to be to create our website. So as I 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 in to 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 repo.

As you can see, the next step is going to be installing a m code Sync app, which. Is this link. So I’ll just simply go. Even all of those details you are going to see here down. 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 will go and add my repo that I created. So ebs db webinar save this.

And that said it is saved. Now as soon as I install this code sync app you will 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 as delivery services. So as you can see my code deployment is done. Large deployment 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 the preview environment. If you change this page to life, 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 life, you will be using page for previewing the content. It is very similar to what we have. Preview and publish within our ehm, traditional ehm 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, my own, Repository, what I need to do is I need to create my own.

Repository. So I’ll just show you in a. Minute how to do that.

Yeah. So this is my Google Drive. What I am going to do is I am 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. A. GitHub, because it is just there is not. It is not mandatory, but it is the best practice to follow. So you can see the SDB 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 am going to do is I will 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 same way. 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 dot 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 the. Ease of type 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 apps tool, you can see the deployment gets started. So you can see updated app is step. Now deployment is happening and deployment is happening. But I am concerned about it is going to deploy to. My 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 from my, repo. So if I hit this, I should see from my repo. But it is giving me for not for. Which is expected because definitely I created this content from the starter content and move it to my folder. But I never, I never, published the content. So the next step would be for me to publish these three content. So what I am 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 a sidekick plugin. So a sidekick plugin is a plugin that is provided and you can go ahead and install it on your, on your instance, on your browser.

So once this plugin is installed.

Yep. So this is the.

Feature. This.

Let me get this. Open. I can.

Looks like this plugin is giving some error on all on that extension. Do you by chance need to set up the document sharing, which I have the permission. So yes, I think so. That can now was one of the questions we had in the chat was what does it mean to share the docs. Yes. That’s what 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 like one of the features is to have a index of all the pages. And that actually gets created in a Google sheet or Excel document. And then that can be queried against and IDs.

Yeah. Let me okay. Let me bring in this. I can select this. I will have to share this. Share this with Helix. At adobe.com. And I need to. Provide it as editor. Right. And share this. Open 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 are right. Sorry. My bad I missed that step. So once I share it you can see this option. There is a orange dot that we see. This means there has been some edits 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 will see the preview is done, but I can go ahead and publish it to if everything looks good. If I go back, you can see there is a publish button which again it 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 will go ahead and make certain changes. Here. Save this file. And again, if I refresh this, you will see it will show me orange dot with preview. When I click on this.

You can see the content changes happening. So how is 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 you feel appropriate. For your website? 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 will quickly move to the next. Next, Step, which is a m EBS with Aim authoring. So now I am authoring. Again there are some steps that we need to follow. I will just quickly go ahead and create a website. This is my boilerplate template. So for. For m authoring it is boilerplate hyphen X walk. So I will create a new report from here. I will call it as EBS. M 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 a webinar. Save this and you will see soon as it is done. The deployment gets started. So it is getting deployed to.

My As delivery services instance. So deployment is done. Now if I click on this you can see this content is again coming from.

My and. This is not coming from my end but the boilerplate template. So again the same process there. We updated our SharePoint repository URL. Here. We will have to update our am URL. That update needs to happen at fstab dot Yaml file.

Now again. I will bring in my Am author URL. There are couple of more steps that we will have to follow here.

I will show you in a minute.

Yeah. So this is my Am author instance. So if I go to my site, I do not have the project which I want to map it to my. My page delivery services. Project. Yet this is the URL that is that needs to be mapped. So what I am going to do is I am going to, get my Am author instance URL, which is this edit this and update it so that it points to my. A local instance. Now this is path that remains same because this is the mapping that happens with delivery services to am I. 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.

One and quickly verify your post Yaml file.

Yeah. So it looks like I updated it to my user name. And this is the project name that I have. Created EBS a human baby. Now. Now I will commit the changes. Not being, to a an 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, then updated this part. Last one is updating package.json file. So what I am going to do is I will go to my path towards Json file.

In webinar let me go to path. Toward 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 instance. Now to create the code structure in a VM instance, we cannot go ahead and create a project. Simply we will have to create or we will create a site from a template predefined template. Now when I go and click on predefined template, you can see I am site with H delivery template which is 10.1.0. This is newly released and this template. If you do not see within your M 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 will see there. Are these two. Packages which is actually this is the latest one. This is. Released probably 16. Minutes. Ago. So this is the latest one which released 16 minutes ago. So now. I have one which I already used. So I am going to use this if you do not 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 and select this. Now I have to provide some details here. I will just say site title. The 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 as I said, the URL create it is creating. And within a minute we will see. The project is created. So you can see example site IDs and webinar. This is the one that I created. And now if I go and edit this it is created within my Am author instance. And you can see it is editable via universal editor. Now I can use all of. Those And capabilities that we were 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 and capabilities. Are available now with a Im 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 alien. But I never published this. So the next step would be to go ahead and publish this. So once I publish this with the name few seconds you will see.

This starts coming in, your website. So this is. Accessible. Now you go ahead and you utilize a monitoring capabilities. You can see this is here I will add a new component. Let’s say inside this I am going to add a new component meaning. Let’s say I go here. Add a new component and 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 am utilizing the powerful authoring capabilities of Am and hosting it on our delivery services.

So this is how easy it is going to be if you are utilizing APM. As. Authoring tool. There are some things I would like to show you within the code base. So what I am going to do is I will check out the code quickly. Just to show you a. Few things. Few important things within the code. So this means.

Okay, so I’m. Using this 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. A new window. I will 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 dot Yaml file where the mapping happens. We did talk about path dot json file where the resource resolver mapping happen. Similar to what we had in a. And now there are some other important full files that I would like to talk about is first one is script. So script is it script is the one where all the, predefined.

Java script, that stage which is responsible for rendering the page that we are. Seeing on the website. So this is the ABS, this comes with the boilerplate code, all of these things. There are two additional script that you will see. Editor support it dot js and editor support dot JS. So these two JS files are responsible for making sure you are able to edit everything. As you see in a. The other important folder is blocks folder. Blocks folder is very similar to what we have. We have components we call components it in am word same. These are the components for each delivery service. So blocks comes with where we write it is written in plain CSS file. You can see simple CSS. And if you have you will be able to easily Create your own component set of components. The next important file is component model dot Json. So component model dot 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 us say if you want to create a new component, let us 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 it accepts an image all text and it text in its authoring dialog. Same way you can you will create your own component definition and then provide what fields it. Accepts from the ordering perspective. Then component filter dot Json. It is again very similar to policy that we have in traditional Am. So if you want to enable that component or allow that component to be auto label or to be selected by the authors, this is where you make an entry. So let us say if you want to allow it within a section. Which is Let’s say that is Section. So this is my section in any of this 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 dot 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 will create one custom component. I am not going to write everything, but I will just copy paste the sample code that I have. Let’s say I want to create a pizza component. So what I am 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 which there is a pre title and description. Let us say these three. So I added the defined id. Next step would be to create a definition.

In this definition I will have. To. Again provide detail about what component. So I am going to. Have my. Own component which is de XR. I am calling it as a teaser and it is also resource type is block, because this is one of the blocks that I am creating. The last thing is I will have to make an entry in this component filter dot json. To make the entry, I will have to use the exact same name as id what. I have created. I will go ahead here and. Paste it here in the blue codes. And that’s it. So once I do this you can see all these. This is my code. These are the three files that I created. I’m just adding committing the code pushing the changes. So I will just say that. Adding. Is a component. And once I commit this.

We 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 these component. So now you can see this. These are component is available I’ll go ahead and add this. These are component. And in this these are 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 pre title sample description. This is how my component is available. If I go ahead and publish this page again I should see my Component.

And you know so this is my page. And you can see my component is. Published. Now if I go and show you how the Dom gets created. So if I show you this one, let’s see. So this is my. This is my teaser block that I created is a 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. Want to make a grouping like I want to put same styling to this. All of those things can be done. It 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 am updating some. Of the fields. From component model dot js and.

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 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 all text and then foreground pre title. So what it is going to do what my Dom looks like. Currently it has three different divs. Now it is going to make two different divs and one they will have everything in the background. Other div is going to have everything in the foreground. So this is how this component.

Can be handle. The other thing I need to change. Is I think this is good. Let me just build this component, build this, deploy this.

Okay. So let me deploy this again. I made two changes. Commit this. File, adding updates.

Commit this. Since I change the name of the component. You can see the name of the name of the field is change. That’s why I have to delete the component. And then we, re, drop it. So what I’m going to do is select this section, these, delete this okay. This is on. And then deployment is done.

Deployment is done. What I’m going to do is again you 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 the 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 is a default title that I added so that if until unless I author it, I can definitely I can author it. But if I don’t, I will still see the component is added to the page.

So this is one thing. If I go and add some.

Images to it. Image or then more. Let’s say P title new teaser h3. And this is description. Okay I. Added some of these details so you can see and I. Will change. These are so demo easier.

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 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’m going to do is.

Okay. We have been, and then I have my code in this particular. In this folder. So what I am going to do is. For edge. Deliver services. We have a command m up. When we run that a m up, it creates a local version of. My, Local version of my.

Website. So you can see what you see on the side. So what it is doing is it is pulling the code from my local repository, which is my Visual Studio code on 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 am going to create two file. New file is a C, it is a dot CSS. And I have a sample code that I am 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 this is this.

That looks. Yes. So now let me. Check this.

Is a block. Now I see two divs. One 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 and local code base. And I can see they get. 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 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, let’s say that that can be done. So and this your 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 are going to create. So this is a very simple where I am 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 thing needs to be done at. The DSS level. I think one more thing, is as far as you know, if you have a development branch, doesn’t that create kind of its own IDs, website so they can push things to, let’s say, a feature branch and preview those changes without merging domain. And that’s correct. Yes. And that is where I can show you. So currently what I am 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 these are 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 and then bzr. 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, a pull request can be raised and you can review the pull request. It goes exactly the same without 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 am 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 back. So once you have developed this contains a lot of information, almost all the information that we discussed. Or we saw in the demo. So yeah, it will you will have this with you to, do your own POC or try it on.

That really as fast if you can set aside a day, you’ll gain a lot of understanding just by following, the documentation that a live, to walk through essentially everything that you just did here. And, take a look at the, the block collection. I linked that in one of the the Q&A.

Items. One more question, Anish. There is a question about using React or Angular and an EDS state. My my feedback. There’s product team definitely recommends starting with vanilla JavaScript. There’s best practices documentation talking about getting, you know, whole team by in before you’re introducing anything like this because out of the box, you’ll have a 100% lighthouse score on mobile with, the, 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 use like a lightweight react called Preact, with AP at the beginning. But Aneesh 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 engine. 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 AMP authoring or we are using you’re 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 blogs and Implementation for delivery services, it is always recommended to use vanilla cases and JS, just to make sure we are. We are. Keeping this core and there are not much. Scope of having, this go down. So yeah, but any any time you have react or. Other frameworks, you work if you want to work with. As Jeff said, definitely get. And get a check with. The product team to. Make sure, we are we. Are not. Customizing something that take. Down this 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 are answered, definitely check out the, the documentation that Anisha sending out. And, you can always reach out to your, ÃÛ¶¹ÊÓƵ account team as well.

With anything that’s not answered there, 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, and you do have anything else to add. I think I’m good for now.

Okay, I’m going to launch that quick exit poll. And thank you all for attending. Okay.

Okay. Well, thanks again, folks. I hope you have a good, rest of the day. Thanks.