Cloud 5 - Development best practices for Edge Delivery Services

Transcript

Alright, well welcome to the Cloud5 Interview Series. My name is James Talbot and here we have Kieran who is a Senior Engineer at Adobe Systems to talk about best practices around development and how to do some optimization. So Kieran, thank you for joining us and let’s start off talking about some best practices for block development and maintenance. Hey James, thank you so much for inviting me for this interview. I am so glad to share all the tips and tricks and what we learned from different projects on this. Fantastic. So let me share my screen so that it would be easy for us to discuss the topics and then we can go from there. As far as the development best practices goes, the first thing that most of the developers are going to do is they’re going to develop a lot of blocks. So the blocks are similar to the AEM components if you are familiar with AEM development. So the blocks contain JavaScript and CSS. The primary goal of the block is it has to take a markup and then basically do some DOM manipulations if required, otherwise just stay in that particular section. For example, if you have an either block, generally either blocks have an image and then you have an H1 that overlaps or proceeds or comes after. And also there will be some CTA that comes on that. So that is the most check of what the people will do by developing. So the first thing that everybody wants to know is the edge database services as a back-end or microservices when a document gets converted into markdown and then converted into the markup which is the HTML. The HTML that is given itself is very well structured. So for example, if I go and try to show one of such pages, so if we click here, so this is one of the blog, the Adobe blogs site which is implemented in the database services. And if you look at the view source of this page, right, if you look at the resource of this page, look how small or how neat the markup has been formed. Very clean. Right? Very clean. And everything. So one thing to note here is script.js. Okay. Another thing that every developer should understand is basically when you go to script.js, there is the first method that is being loaded in the script.js which is load page. If it looked right at the load page, it has the three phases defined clearly. Load Eager, Load Lazy, Load Dealing. So once we figure out what is the markup that is coming and what are the phases of the page loading sequence, then it becomes so easy to get all of these blocks to achieve the best performance possible. And the best practice is look at the markup, see what is coming from upstream, and then try to use only CSS. Apply only CSS first. See whether you can work with only CSS without doing a lot of DOM information. The moment you put JavaScript, JavaScript means some load of the browser, it has to do something. So that’s the first item. Makes sense? Okay, that’s good advice. Yeah. Right? Because we have the CSS 3 advanced so much, it has a lot of selectors. For example, if I want to select, let’s assume there is a table. If we want to color the alternative rows with a different color, rather than using JavaScript to assign an ID or something even odd, you can go and use an advanced selector. If the div is even div, then apply a click. If it is even or if it’s odd, do something else. So that’s the importance of knowing the advanced selectors. So as far as the development best practices goes, to summarize, make sure you get yourself embarrassed with what is the markup that you’re getting for the page. See what you need for that section. Make sure when CSS is CSS only you can achieve that. If you go ahead and do the JavaScript, but try to minimize the manipulation of the JavaScript or do a lot of things. And knowing advanced CSS selectors would definitely help. Okay, that’s great information, Garin. Thank you. And definitely keep in mind, of course, about looking at CSS first and see what you can do. So that’s good. Can you talk a little bit about how to keep the development velocity faster? Yeah. So as we all know, velocity, the development velocity. So we are already helping in the edge delivery. The developers are the same from doing any sort of build process. And that’s huge. And also you don’t have to compile anything. Developers, as we discussed before, the developers, they are not building anything. There is no minification required. And there is no requirement for the frameworks. No Maven. No Maven. Yeah, that’s a big deal right there. And also if you look at the script.js and how we achieve the block development for how to build that experience just using the plain JavaScript and CSS, it will eliminate the reason to have custom JavaScript frameworks. It could be React, could be Next.js. And also the CSS is the same thing. You don’t need to have SAS or any other frameworks to do all the CSS builds. And also there is no, as we said, there is no need for minification as well. So that itself is built into how edge delivery services are connected. Meantime itself is giving a boost, right? Big boost. No Maven. No Maven. Correct. Now another thing is if you look into the AEM.js, similar to script.js, this is another thing that I would like everybody to understand. There are very good solid mentors that have been added to AEM.js, which gives basic foundations, which we use across the other blogs or boilerplate room. For example, I take the simple one, get metadata, right? So when you add metadata to your page and it will become a meta tag, rather than you go and invent your own method, use the get metadata method that is available. If you want to load an external JavaScript, use the load script method. So look at everything that’s there for trying to build. Exactly. Yeah. Try to reuse how much our possible that is from AEM.js. And also I would advise not to modify anything in AEM.js. For example, if you want to have your own method, then put it in the script.js because we treat script.js as a project specific. Okay. That makes sense. That’s good advice. That’s out of the box. Correct. And also in my personal experience, when I am doing the styling or CSS aspects, I start from doing mobile first and then move on to the tablet and then move on to the desktop. And you? Okay. Yeah. Because in my experience, what I found is if you start from the desktop, you will add a lot of rules and it becomes really quick. But as you shrink and go lower sizes, it becomes more complex because generally in the mobile, you have a lesser space. The headers have the hamburger menu and the footer store and the audience, so many things. So I would do the mobile first and then slowly work on to the higher. Okay. The reservations. It makes a lot of sense actually. Yeah. And also mobile first should be simpler. Correct. And also use the drafts folder. So basically what that means is rather than testing your things directly on the main page, you can create your own document in a drafts folder and create your own block in there, test everything there. And then once everything is good, then moving to the actual document. So by following some of these things, the development velocity will be fantastic. And of course we have obtained a lot of other tips and tricks, like for example, raising the pull request. What should be in the pull request, right? And it is also built into the overall developer experience for edge delivery is that whenever you are creating a pull request with your code, you have to put the see link and post link, meaning how is it before and how is it going to be after so that we will check the speed index on both the URLs and it will tell right away saying that, Hey, you know why if you do these changes, your performance may be impacted. I see that makes sense. Right? So because you can right away see it and the end goal is getting that perfect break cost or our perfect base pay index. So make sure you’re following all the best practices when you’re creating the PR. Sometimes I see people creating a PR, but not giving the actual impact to link. Just to bypass. Don’t do it. Don’t do it. Yeah. Because you’ll feel hurt, don’t do it. So by following these simple things, I think any team could achieve highest high. I see. It makes a lot of sense. Thank you. I know also one of the great advantages of course, you know, is that oftentimes right there using Google docs or word and that can really help with you know, being able to minimize or eliminate author training, which of course we know from AM, could I author training was a big, big deal usually. So do you have any, do you have some other tips on how to make author successful and how to minimize that training? Yeah. Great. As engineers, right? Our end customer, our end user is the person who’s going to interact with this solution for a long time, which are nothing but the kind of doctors, right? Right. So we have already eliminated a lot of legwork. Let’s say for example, if somebody wants to train themselves on authoring AM, then of course they have to know what are the components, what are the options that are available in this one of those complex component, where the exact field is, what is the paste properties that needs to go. So it’s a bit of a learning curve whenever you get a new content author, but with the Word document, everything is in the Word, everything is in the ER. So we’re basically making it seamless with the document based authoring. Now the second thing is in the documents, we have two types of content as you know, what is the default content, meaning they could just type in text and, you know, highlight the font, styling, text, styling, you know, all of those things. And also if they want to have a certain experience, like for example, if they want to render a content author something as a table, then the content author has to put that table block into the Word document. Okay. Right. So now whenever we are asking the author to put a block, that means they have to create a table, they have to write a name of the block in the first column. So that means a little bit of work. So make sure to see some opportunities for auto-blocking. When I say auto-blocking, it’s as simple as this, right? So I’m taking two examples. One is the dead column. So the second is something that you could auto-generate based on the page block. Right. That’s auto-blocking. Very easy. The second thing, embedding. Embedding meaning, let’s say for example, if somebody drops in a link to the YouTube video in the document, it automatically answers. You could just add the YouTube embed in there. And same with Vimeo or Facebook or any other expos or whatnot. And that simplifies things greatly. Exactly. So all it has to do is just drop the link and go on. Same with the hero block, right? So if you see a H1 and followed by an image or image followed by H1, then you could treat those combined things as a hero block and build the experience. So that means, yeah, you are just taking the default content. You’re finding some patch on this in the default content, and then you are creating the experiences that’s called auto-blocking. Right. And that’s important. That relates to your third point as well. That it’s important to collaborate with the authoring team so you can figure out those patterns of where the auto-blocking may be most appropriate. Exactly. For example, we don’t have the concept of buttons running. People cannot add buttons to the document. But on any website, if you see, we’ll have the primary button, which is coming in .get, for example. And then the secondary button, which is coming lighter gray color. In another style of button, another style of link. So what we could do there is we could ask the link text could be bolded, but it could be straightened off and be put into some other format so that we could read the link and render that as a primary button, secondary button, whatever. So that is the reason why, as I said, we have to be sitting with author saying that, hey, you know what? If you want to make this link look as your primary design style button, please go ahead and bold it. It makes a lot of sense. Yeah. Right. Or if you want to center the text, make sure you, let’s say for example, on some of the pages you have the H1, H2s, but that needs to be centered. The title has to be centered, but the paragraph following up, it could be a full width. So you could say that, hey, you know what? Make it H2, but make it bold. If you make it bold, we will center it automatically. You don’t have to worry about it. That way we could do a lot of auto blocking, but we had to look for the opportunities. It had to be closely working with the authoring team, communicating them, saying that, hey, is this okay? Do you agree with this? And also we have this concept of the sections. It’s very simple, right? So in any page you have different sections, the whole section may have a different color. The whole section may have a different experience. When we are developing those styles, rather than developing the second styles that will apply only for a specific section, try to generalize the section names or section styles. Same thing, make it center. So that you could take that center section style and apply anywhere, or dark background or light background or something like that. By doing these things, it makes the author’s life easy. That means now the content velocity is going to be much bigger. So that they can put the things into the document quickly, click preview, they’ll be happy, they publish. That’s the whole point. Yeah. Yeah. Well, fantastic. Thank you, Viren. That was very helpful and a lot of good tips. So again, thank you. And we look forward to hearing more from you in the future. Thanks again. Thank you so much. Thank you.