Edge Delivery Services Tech Overview

Transcript

All right. Hey everyone. And how’s the energy levels out there? Are you feeling like you’ve got energy? Do you want to stand up for a second and shake it out? But it’s been a few hours worth of content. I’m hoping you’re really loving what you’re seeing here. We’re excited by this. So I have the privilege of walking everyone through edge delivery services. Now this is the overview before we’re going to do the hands on with Zorin. So I want to walk you through some of the key concepts. So when you actually start the hands on and I hope you’re sticking around to do that. You’re actually like, yeah, I know what I’m doing. I know why I’m doing it. So let’s, let’s get straight into that. So edge delivery services, I hope by now you’re not saying, wait, what is this thing? It’s, it’s something that Adobe has released. And I think just for a quick history lesson for those who are new to Adobe Experience Manager. This is a product that has been around for some time but continues to reinvent itself. So started with an on premise product that we just hand you software and say have fun with that. And a lot of customers came to us and said, how should we run this and how should we operate it? And that’s when our managed services capability came in. You know, close on four years ago now we moved this to the cloud in a true cloud native version. But in a lot of cases, this was just adding functionality, and really looking at the back end delivery model. Edge delivery services, the first time in a long time, they have really relooked at the way that we should deliver content and think about the way we actually build these experiences. So this is what this what’s exciting. Now, at the same time, it’s not just technology for technology sake, it has a material business impact. And, you know, if you’re a developer, you know, building stuff, you may or may not care about performance. But I can tell you what, when you get in front of the marketing officer, anyone related to revenue performance, these numbers are super important. And we’ve had, you know, the hundred projects that we’ve delivered as part of the lead up to going, you know, generally available or GA. These are the type of stats, not only just for Adobe’s own properties, but also for customers, they’re just so excited by this. And it’s actually in returning investment into, you know, revamping experiences. So, again, we’re released two of the the multitude of edge delivery services that you’ll see come out. These are available right now. It’s no longer leading up to it or coming soon. These are available today. And I want to walk you through some of the detail. But first, again, a quick reminder, like, why are we doing this? It’s not just about having a high page performance, you know, for one page, like the homepage or the landing page. It’s about actually driving an effect on, you know, performance overall. And, you know, if you’re not aware of terms like LCP, etc, largest contentful paint, these are things that have a dramatic impact on your conversion rates, your bounce rates, etc. And the stats here showing, you can see directly when, you know, the example customers that we work with, when they actually implemented and, you know, the LCP went down and they were actually able to see that return. So how we’re doing this is a few things we’re going to see today. I’m going to switch over to live demos in just a moment. And some things that we don’t have time for, but we can come, we’ll do a follow up sessions on. Performance is obviously key. It’s actually starting the project with the perfect score and keeping you there. As Cedric said right at the beginning in the keynote, we know that it’s not just about delivering a high performance, but also, you know, considerations around martech and giving yourself enough bandwidth that you can actually deliver the experiences with that in mind. So when we start to think about experimentation, it’s not doing experimentation and then saying, oh, well, because we’re doing that, then we have to have a slow performance. It’s doing that with fast performance and being able to actually instrument that and do it really well. And what we’re working on now, and you’ll see very shortly, is the idea of matching that with additional martech capabilities or things like real time CDP information. So we’re really getting to that personalized experience without impacting on performance. Now, all this together creates these beautiful experiences. But to talk again about the stack again, I brought this up right at the beginning, but if you’ve tuned in since then, we’re adding these capabilities to Adobe Experience Manager as a cloud service. So if you’re running today, what you’ve got is not deprecated. It’s still there. It’s still working. But we hope and we believe that you’ll see some tremendous value into looking at a new delivery engine, which is edge delivery services. And of course, we’ve made additional capabilities around the editing experience authoring through things like the universal editor you just saw, a new document based authoring, which I’ll come back to in a moment. So as far as what’s available today, edge delivery services, as I said, is generally available. You can start using projects today. Talk to your Adobe account teams as far as access. But everyone who’s going to do the walkthrough today will actually get access to start building something. But we’re actually on a journey with this as well. So you’ll see. And for those of you who have heard of edge delivery, you might be thinking, yes, I’ve seen it. It’s when you author in Word. That’s actually not the case. The whole point is to actually have an edge delivery service that actually meets that demand for the high impact experiences and actually makes a more simplified way of authoring these experiences and maintaining them through use of things like JavaScript. As far as the authoring capability, there are multiple choices. The one that’s available and connected to edge delivery services today is document based authoring. But we will have and it’s available if you want to work with Adobe access to having existing content sources using a WYSIWYG editor connected to the same delivery source as well. And that’s coming very soon. If you’ve got a project and you want to work together with Adobe, we can absolutely work through that. So I just want to make sure that when we’re looking at some of the demonstrations in the walkthrough today, while we’re favoring document based authoring because we believe it’s simplistic, it has a lot of value. We’re not just delivering on that and it’s not an either or. We will be at a point very soon where you can really focus on edge delivery services for the delivery and then take the content from wherever works for you. Be it WYSIWYG, be it headless, be it document based authoring. Okay, so with that in mind, let’s have a look at a few demonstrations and go through this here. So this is a demonstration site that I built just to walk through some of the capabilities. And the whole idea is that this is a representation of a site. The very first thing I want to show you apart from the fact that if I go and run the page speed score, it’s loading in my extension or in fact, let’s actually look at this here. I’m getting 100 for performance. Let me start that again. I’m getting 100 for performance, best practice SEO. I’m getting dinged on accessibility only because of my color choices. And you’re welcome to go and have a look at that report in your own time. Why is this important? So the first thing I want to show you is right at the very beginning of the project, I’m getting the perfect score versus starting at 10 or 20 or 25, which is the industry average, and then trying to spend effort to get it better and better and better. As Cedric mentioned right at the beginning in the keynote, this is a lot of work that Adobe has done to productize these performances. So you almost don’t have to think about it. It just works and we keep you optimized. Now, one of the ways we’re doing that is thinking about what we’re actually serving out first, and that’s the semantic content itself. So this page is this content, but just in a semantic nature. I have a card with three different pieces of content. I’ve got some columns. I’ve got metadata, et cetera. Right at the very top, I’ve got a call to action. If we think about what Edge Delivery Services does, it takes this content and it serves it up as semantic HTML. If I go ahead here, let’s just go and view source quickly, this is the rendered. This is what gets delivered down to the browser. Now, it’s perfect as far as storing the content. I’ve got content marked up as H1, H2. I’ve got my images there already optimized and wrapped in a picture tag. But of course, you’re thinking, all right, that doesn’t look exactly like how I want it. So just like James was sharing right at the beginning here, our goal here is to take this and decorate it and make it look amazing, but delivering in a way that we’ve got that high-performance goal. Now, again, as we mentioned before, I’m using Word to author this. Why? Because a lot of content already exists in Word, and we can take it into that semantic markup. And then we can take it and go and deliver that. But we’ll come back and look at that as we go through, and we’ll get more into the code in just a moment. But while I’m here, I want to just quickly show that although I’m showing you some simplistic pages, this can be dynamic content. It can be bringing in content from other sources. This is a great example where this is a form. And we know a lot of forms from a dev perspective. You get all these change requests, and you’ve got to get and recompile the code. It’s painful. Our view is to say, well, why can’t we just separate the markup versus the actual content on the form definition? So in this case, instead of Word, I’m in Excel, and I’ve actually got a row for every field in the form. And I can very quickly just go in and make a change and see how that content looks and render that out. So in fact, to show you kind of how this works, I’ll get to this in a moment, but I can preview structured content in Excel just as JSON. So anywhere I’m building something that needs structured content, I throw it into Excel. I go and preview it like I’m doing here. Here’s my JSON. It’ll give me a nice preview so I can check that I’m getting everything correct. But that’s now an endpoint that’s going to be fast and performant and delivered from Adobe with that speed in mind. So it’s a couple of things just around how we’re starting to think about the content. If I go back to slides for a second, I want to show you a little bit of how the document-based authoring works with the rendering, and then we’ll get into some code examples before I hand you over to Zoran for the walkthrough. But it’s exactly like this. It’s that we have an index doc that gets rendered out with the URL. If I have different names for different pieces of content, they follow that convention as well. But then the idea is that from a developer perspective, we have the concept of blocks. And blocks is how I decorate content to bring it to life, to make it look and feel and operate the way I would like to. So we have different options. This is a simple column block example. And the key difference here is that I’ve got some extra information on the bottom example where it says wide to denote from the author that I want to treat this differently and have it displayed differently. So the whole idea is that by default, I have a convention like you can see this table here where I’ve got the block name, I’ve got the content. It outputs semantic HTML like this, and then I go ahead and decorate that based on my markup. So you can see all the content and how that works there. So with that in mind, let’s actually switch back and look at some code examples and see how this works. So what I’d like to do, if I can get my cursor back, there we go, is take this page which is looking pretty simple. Let’s get rid of this, give a bit more real estate here. But let’s have a look at what I’m doing. So from an authoring perspective straightaway, I’ve got a page, you know, I’m looking at it, it’s got my content in there. If you’re immediately thinking, well, where are my assets? Well, I can bring this up and see my assets in AM assets, etc. I can switch between different environments and do all of that. I won’t go into that too much detail right now. But how do I get from here to something marked up? Well, let’s have a look. So first of all, I’m going to hit preview and we’re going to take this content and render it and it will actually give me a preview version of that. So think of it like before I actually publish it and it’s viewable to everyone. Now, there’s some things happening here that I need to be thinking about like why or how is this content getting from one to the other? Well, as I said before, we’re rendering it semantically and then we go and decorate it. Let’s ignore the topic for a moment. We’ll come back to that in a second. But I’ve got, you know, some markup here around this is H3 as you can see here. This is a H1. This is plain text. And if I look at the way that the page is produced, if I go and again look at the source, we end up with, you know, the H1. I don’t know if I can make that bigger. The H1, the H2, et cetera. So now what I want to do is actually go and add my styling and see how that works. Let me switch over to my IDE and we can see how, you know, a project typically looks here. So at first glance, this should look pretty familiar. It’s pretty simple as far as it’s a, you know, Node.js kind of similar package as far as we got package JSON, et cetera. But I don’t have to worry about all of that. The key thing I want to know here is I’ve got styles where I’ve got, you know, my default frontend styles here. I’ve got, you know, a header that’s sitting down here which I can go and customize. But then I get into the blocks area. And this is where you’ll spend most of your time as you start to go and decorate and work with different content. The idea is that whenever you want to change the appearance, I’m calling on block functionality to actually bring that to life. And you can either call out the block directly or you can use something called auto blocking which allows you to set rules to say if a content is in a certain pattern, then go and auto block that. So let me show you what I mean by that example. Let’s switch back to content. And you can see here I’ve got some columns sitting here. And this is where I’m saying we directly call out and say this is a block. Call the block code to go and render this. If you’re wondering what the convention is, it’s a table. The first row is the block name. In the columns is the any additional properties I want to set. And then the actual content itself. We have this concept of a library where you can go ahead and share the various blocks, et cetera, that you’re making available. So if I wanted to look at columns, I can see that there and I can start to see how they work. I can see I’ve got things like cards as an example. And I can even go in here and say, you know, hello, dev live and copy this and go back into word and find somewhere to paste it. And actually, you know, puts that block in place for me. So it gives you an idea of how you can start to build up block libraries and share that content. Let me just undo that so it doesn’t affect my page. All right. So I have this content and I want to go and style it. So for instance, these two tables side by side, I actually want to go and change the CSS. So a few things I need to consider here. So first of all, these are all vanilla JavaScript and CSS. Before you ask, yes, you can go and use a framework of choice. But the ideal is that you start with vanilla and then you bring in a framework as needed. For instance, if you’ve got commerce functionality, we’ve got customers who use React for the cart functionality, et cetera. But the product details pages, et cetera, it’s vanilla JavaScript and they can still go in and call things, keep it simple and make it easy to work. So the columns in this case, it’s actually looping through the semantic markup and for each row, you know, it’s looping through. It’s changing the picture block, et cetera, and dumping out that content. Then I have CSS here. So let me show you first of all how I can work from a deployment process and how I can preview locally and how fast it is compared to what you might have experienced before. So this border class here is new. It’s actually not in my live code. I just added it before we started the session. So a few things I can do here. First of all, I can just type in AEM up and it will actually run the simulator and now proxy that content in my browser locally. Now I’ll just switch back so you can see that. In fact, of course, it opened in a separate tab so let me go and bring that guy in here. And if I just navigate around, I think it’s under accounts. What’s happening here is it’s proxying the content from the live production environment but actually applying my style. So I can, you know, go and change this if I want to change this to something horrible like, you know, a nice red background. I’ve got that immediate change and just like James was showing earlier, I’m doing this front end, very friendly. I don’t have to really understand anything about Adobe Experience Manager like I had before. I come in and change the blocks and away I go. Now that’s great for local but then how do I get this into production, into a testing environment? Where is my testing environment? Well, that’s the next thing. So think about this. You’re working, you’ve got, you know, 10, 15 different people and you want to start sharing things, you know, how do I have a central dev server or dev environment? Or we thought, okay, should we give everyone their own environment or should we just actually think about what we’re doing here? And typically in code, you would branch your code and I’ve done that here. I’ve got the dev live branch of my code, my project on GitHub. What I’m going to do is just save this and I’ll commit this change or say, you know, nice borders and we’ll commit that now and we’ll synchronize that. And we’ll give that a second to change. And while we’re over here, let’s actually switch to GitHub and say, you know, I’ve just received a push there, et cetera. But let’s see how we preview this. So I was showing you local host to see those previews. If I hop back in and show you this page, the key thing I want to point out is the URL structure. And if you can’t read that, let me call it out. It shows main and then secure bank, which is the project, and then my GitHub account. What I can do is actually instead of main, which is the branch, being used there, I can just change this over to dev live, refresh this page. And now I get those borders intact now. So what I’m showing you here is that as you branch your code and want to stand up environments to go and test it, it’s very easy. You don’t have to go to an admin, request an environment, wait for it to be spun up, et cetera. Your testing in a cloud environment is as fast as your submission process and which allows you to get a lot of flexibility. So this is great. This is one example. Let me show you the second example where I do something a little bit more interesting with my content apart from just a bit of styling. So to do that, what I want to do here is first of all show you that we have, because this is document based, I’ve got my site shown like this where I’ve got my index from my home page under the different sections like under accounts. I have the kids section. I’ve got the file that I’m working on right now. But I also have a blog section, and I’ve got a few articles in here. So what happens is we actually create an index and automatically update that index. So you can see here, again, as expected, this is structured content. So it’s in Excel. And I can see that I’ve got some categories that are here as well. So what I want to do is I actually have a page that I’ve started working on that is for featured articles. And I want to populate this here with the content. So again, just to show you, if I edit this page, it’s showing that I’ve got a block called category list. I’m passing the word article as a parameter to say show me all the articles. So now as far as the front end workflow, what we want to do here is come into category list. I’ve just created this, but there’s nothing in there right now. Let me show you how we start to quickly mark this up. So let me go and grab my snippet of code so you don’t have to see me make mistakes and get errors in front of you. So I’ll just paste that in, and we’ll walk through it quickly. So I’m fetching the JSON file, which is the index. I’m looking through it, and I’m creating now basically a structure to have the category list. Whenever I find in the index something that matches an article from the category, then I’m actually outputting the markup in this format. And that’s it. And so if I save this, we’ll go back to my preview page and jump to that news feed you saw before. I now have those two articles coming in place. And again, just for the sake of completion, we will grab the CSS, and we’ll make sure that this looks good. And we’ll go back, and now it’s starting to look pretty good. All right. So I have made those changes like all good devs. I want to commit this and just say updated category list. I’m sure you’ll commit descriptions better than mine, but let’s push that up now. And so the last thing I want to show you is how do we get from our dev environment, which is here, so I can refresh this now and see that functionality working. How do I get from this back to merging it in where everyone can see it? Well, again, what I want to do here is go in and compare the changes on that branch. I can see that I can merge it, showing me the changes. So I’ll just take this out just for the sake of the demo. I’ll hit create pull request. And what it’s doing here is not just creating the pull request, but actually the AM bot is actually coming in here and is running some checks for me. So the key thing it’s doing is it’s finding out what my page speed index is and letting me know that for every time I actually check in the code. It’s also going to do some linting tests because that’s in the boilerplate. So it’s going to tell me all the wrong syntax things I’ve done. But you can see immediately here for the two pages that I was working on, performance is 100, for the blog it’s 97. And without doing anything, I think that’s pretty good for the sake of the demo. And I can say merge pull request, which I won’t because I want to reset the demo and do it again later on. But hopefully you see how that works. So that is a quick overview. We’re going to hand over to Zoran in just a moment to actually allow you to walk through us together. But hopefully you can see some of the exciting things around how to build these sites, to do it in a very front-end friendly way, but also get the page speed performance as well. So we’re excited by this and hopefully in the next 90 minutes you can start to see how you can build these experiences with us. So Ron, I might hand it back to you and we might switch over to Zoran when he’s ready. That would be awesome. Thank you so much very much there, Mark. I will hand it over because he is standing by. Actually, are you going to share your desktop there, Zoran? I will, how are blocks decorated? There you go. Discord community, man. Just before you hand over, we do have a Discord community and it’s probably worth grabbing this screenshot. Love for you to join us. We have regular sessions in APAC friendly time zone. It’s a good place to get your questions answered as well. But again, don’t run there now. Let’s hand over to Zoran. OK. Thanks very much, Mark.