Introduction to the AEM Universal Editor

Transcript

Hey, James, how’s it going, man? I’m good, thanks. How are you? I am doing well. Hey, do you want me to bring Gabriel out now or later? Or you want to put your slides up? You tell me. Of course. Yeah, let everyone know it’s Gabriel. OK, hey, it’s Gabriel. Look at that, man. Welcome to the show. Hello, everybody. All right. Yeah, so if you guys want to introduce yourselves, and I’ll put some slides up, and you guys can chat. I’ll go first. But I think most of them already know me. I did one session in the morning. James, so I’m the senior AI and solution consultant, and I’m based in Sydney. Nice to see you guys again. Over to you, Gabriel. Yeah, sure. I’m Gabriel Wold, the product manager, basically, for the Universal Editor feature. And yeah, I’m happy to be here. Just if there are questions in the Q&A pod or search, don’t hesitate to write up your questions so that I can take a shot at answering them. All right. Let me get the slides up here, and James, we’ll hand it over to you. Thanks, Rom. OK, thanks. All right, so the topic I’m going to cover in the next 30 minutes is called introduction to the Universal Editor. So I believe that you’ve seen Mark’s slides in the morning. Let’s talk about it a little bit, and you can see the video. So the things I’m going to do is to unpack that magic for you. So how you can achieve to leverage Universal Editor to modify any content you’d like to have. And I would say, so appreciate Gabriel can join. And if you guys have any questions about products, about architecture, feel free to drop in the chat because I can’t see the chat window, but at the end, I will have some like five minutes Q&A session. All right, so back to the topic, Universal Editor. I personally think this is one of the greatest innovation we had in the last 12 months because I loved it so much when the first time I use it. Let’s start with why we need to create this kind of tools. So the slides that Mark used this morning demonstrate the flexibility of the authoring we currently provided. So we’ve got the actual services looking out of all the delivery capability. But when we look at the practitioners, when they have to got the task to contribute the content, they actually have multiple ways to do it. And you have the traditional WYSIWYG authoring interface that AM already provides you. And almost all the customer currently have another channels for the headless delivery. So in terms of the headless authoring, you leverage content fragment editors. You can see the content fragment admin that’s Mark showed in the morning. And also, in the later session today, you will see a new fantastic authoring capability using the document-based authoring. But today, I’m going to focus on the one in the middle of the headless authoring. So no doubt because in order to satisfy the demand of the content creation at scale, the customer will have a multiple platform to serve the digital experience channels. So you’ve got your website. You’ve got your mobile app. You’ve got your third-party applications, which will all have the demand of the authoring. When it goes to the context of the headless authoring, there are some operational challenges we’ve seen for the people who want to author the headless content. The first one is headless authoring actually have a really steep learning curve. The reason why I say that is imagine you have a headless application. And in the back end, it’s order stays as a structured data. So you end up with a really form-based interface to be able to author that. So that doesn’t have a direct connection of the piece of the content you’re going to author in the real world versus the piece of the content that you’re looking at the forms. Now, you’re really relying on the content team to be able to remember, all right, my header are coming from this part of the source. My list of the data is coming from the other kind of the systems, which make them have to jump in between different platforms to do it. And also, these are challenges applied to the QA team as well. If they want to create some sample content for testing or they want to preview some content, it’s really time-consuming. And the third one, which is the most important one when I ask most of the content authors, is they really want they could have the same in-context authoring experience that they can have off the web pages. Like when I’m making the changes, I can see the changes being possessed. I don’t need to go to another place to save it. I can easily preview the content changes. So these are the operational challenges we call out for the headless authoring. And that brings us the requirement of the universal editor. So the vision of the universal editor, when I introduce these functional features, we would like to allow the practitioners to be able to create and edit the content in the context of the preview. And allow them to create content that fit the design of the experience. And for the developers in the room, we want these kind of features are completely technology agnostic. So as developers, they should be able to still use their preferred technologies to implement these experiences. So when I say experiences, I’m not saying this experience has to stay in Adobe Stack. It could be any kind of experiences. That’s why we call it a universal. So they have three missions we set up when we created this features universal editor. The first one, we want potentially any implementation to be capable of leveraging the universal editor. Because different experiences can be built in many different ways. We don’t want that restrictions for the customers, for the producers to be able to perform in context editing. So that means the universe editor has been designed to support any architecture. So no matter you are a server side rendering, you are a client side rendering, a single page application, or even edge side rendering, we should be able to support it. And the universal editor also been designed to support any framework. It can be like vanilla AM, or any third party framework like React, Next.js, or Angular, et cetera. And also, all this experience, all these frameworks, it doesn’t need to be hosted in AM. So it could be on a remote domain, which I’m going to show you later. So how easily you could deploy an application on a completely separate domain, but still leverage the universal editor capability to be able to alter the content. The next mission is any aspect. So we’re talking about how you’re going to deliver the content. But in terms of the storage of the content, we don’t want to introduce limitation as well. Because the content can stay in the JCR node, as the content’s page structure can stay in a content fragment as an asset. It can also stay in the documents, or even the third party, the contents, like using some plugin like a comments or other systems. And then lastly, it’s about the implementation. So the things we would like the people to contribute or modify on a universal editor is not just the content itself. You should also include in the layout, the style, to be able to create personalization, create experiments. So I want you guys to remember this three mission or three target when we introduce this features universal editor. But with that in mind, let me jump into the demonstration. All right. I’m going to start with the, OK, I think I should start with here. The landing page of the universal editor. For those of you who may not have seen this interface, you probably need to contact your account managers in order to get an access to this. Because I think you may still go through some support ticket to get this enabled for you. But quickly, it’s a very simple interface. And you can also see I’ve used it for some authoring as well. So find out any domain which has instrumented by the universal editor. I’ll explain the instrument later. But I click one of them. So this is a web page. And you can see it’s not in a typical AEM cloud service domain. So actually, this is a single page application you can deploy in Adobe infrastructure. And when you hover the interface, as you can see, you can preview that. But if you go through this one, you’ll see the familiar icon that you’ve seen in AEM author, which gives you all the components free. But what the component means here, this is when you’re in AEM authoring, you have the component you can edit. The component here is actually when universal editor loads your page, loaders page. It will automatically examine the content, the payload of the page, and then find out how many components have been defined, have been recognized. And also, does it automatically? And then you can construct this component tree over here. So if you go through this component tree, you’ve got a media, which is an image. You’ve got some text. You’ve got the reference. Reference in this case is a reference to a content fragment. But if you scroll down, you’ve got your familiar component, like test or title. And for this one, it’s actually a list of components using a GraphQL call and implementing the headless way. But as you can see, universal editor is smart enough to detect within this list there are multiple content fragments. So if you hover the title, the image, you can also find that. So there’s a property tab over here. So if you click that, what it does is universal editor record a back end system and define that any rel or any definition of this reference. And you can see it’s actually coming from a content fragment. So universal editor will be able to show you the full content structure based on your content fragment model and give you all these available fields to author. And of course, I can make any changes here. But I will tell you it’s going to fail. Because why? Because I actually don’t have the permissions to making changes on this application. So that means universal editor also respects the permissions you set up, the permission that the user as individual have for this browser session. So we’re not doing something like a server side hacking or magic to do that. We still respect your session. And we will be able to reuse your sessions to whatever content source this is coming from. And eventually, we allow you to persist when you’re making changes on that. So let me switch to a application. I do have a bit of permissions. So you’re familiar with this one, right? This is what Mark showed you. And then if you pay attention to the address bar, so now this is completely not Adobe domain now. This is the previous one still in Adobe domain. This is a third party application. You can deploy any React application on this one. So Mark and the team, we developed this one. And imagine this is going to be a self-service portal or a dashboard for your customers. And because this is dynamic, it’s loading a lot of API integrations from the backend system. So let’s say it’s a single page application. If I open this one in the Universal Editor, using the component, and I can see there are less components being recognized. They only recognize these parts are contributable for your author, for the content team. And then the rest of the team is currently still hard-coded by your single page application component. So we really got the control to manage what is the scope for the content team to be able to make any changes on this interface. And similarly, I think you’ve seen that in the video, I’ve seen this one is a reference. And if I click this Edit button, it brings me to a content fragment editor interface, which is an out-of-box AM offering. And you got the chance to do that. This is like a form-based authoring experiences. If I switch back to the Universal Editor, I can literally make any changes in this context. So give it a bit of time to load this and become a creative person today. I’m going to give them a different name. So if I un-escape this thing, of course, you can make any changes on other things as well. So the change reflects on the page immediately. But if I refresh my source of the content, real demo, and you can see that’s been updated as well. And you can tell that it’s been updated 14 seconds ago. So that’s the magic that Universal Editor brings you, because now it knows from the payload of the application. It knows where the source is. And I’m able to modify that. So now I’m going to grow my developer hat. So I’m going to show you the source code of this application. And I’m going to unpack how you’re going to leverage the Universal Editor. So again, a very typical front-end application is React applications. So in the place we have here, we make some modification on the header by adding additional metadata. So in here, we call it a connection, an AEM connection. And there’s a little bit of syntax I’m going to follow. But we call it a URN, the unified resource name. So that tells the Universal Editor that my content source is coming from this domain. And the next thing I’m going to do is I’m going to provide some instrument of my elements. So I go to my application JS, and you will see a lot of things being hardcoded using this React component. But we actually have an article over here, article components over here. So if I go to the implementation of my articles to JavaScript, so that allows me to be able to fetch this through the GraphQL, which is standard. But in addition to that, I appended some more attributes on this element. And these elements are essential for the Universal Editor to be able to recognize this is a component, this is the text, this is the images. And that’s it. That’s the only thing you need to do in order to instrument your application with the Universal Editor. So once you’ve done that, the next thing you need to do, you probably may be familiar with me, I like local testing. So I actually have it already open on my local. So if I switch back to my local host, so I can do it. And what you can also do is actually go back to the Universal Editor and do it here. So I’m able to use my local host to do something like testing. The next thing I’m going to do is maybe I’m going to show it to myself, because I’ve got some application over here. And I really like this part. So I’m going to use it in two minutes to find out if I can just borrow this part on my own single page application, and I’ll be able to use it in the Universal Editor to do it. Sounds like a challenge, right? So I go back to my source code. So I know I’m going to find it here. So I just copy paste some code. So I provided another element on my single page application. But this time, I’m going to be using a text component. I’m going to tell the Universal Editor that these text components are actually reading from these parts. And because I’m reusing the same AEM connections, that means it will point into the same AEM author instance. And in my implementations of this text component, it’s the same. The only thing different is I need to append some more item ID or item properties over here. And let’s see what happens. So firstly, let’s see what happened on the page. This is the local. I’m able to see the content. And this is exactly content I used from the other application. Good. How about authoring? So let’s bring back to the Universal Editor. And you can see, Universal Editor actually being able to detect that this is the text component I placed on the page. But what happens if I click that? And I can see it’s read the text body. And now, we can just do some changes. And also, if you only type that, you can see it’s spinning. That means it’s saving. It’s persisted to the backend. So if I go back to the page, I think this is the page over here. And actually, if I refresh that, oh, I think I should refresh that at the beginning. But what it does is it also persists the content change. I made it from the Universal Editor. Back to this JCR node. So super easy, right? Because next time you want to introduce any, like reuse any content on your standalone applications, Universal Editor is here for help. So this is the end of my demo. But I would like to go a bit further about how we implement that. Because there are a lot of developers in the room. So you’re going to like this diagram, right? But there are a couple of blocks here. So remote application in here representing the application that you created. And the editor is the share to load this remote application. So when the editor load the remote application, by reading those little micro data, or what we call the metadata within the payload, Universal Editor will call the Universal Editor service to be able to fetch the content. And that content will serve this through like the REST API, GraphQL, or whatever APIs you’re using. But when the scenario comes to the changing, content changing, so when the in-context editing happens, that will also trigger the events, which allow the Universal Editor service to patch the content back to the originating data. So that’s where the magic happens, how we could allow you to do the in-context ordering in whatever platform you’re hosting, whatever framework you’re doing. And then this slide is just like a very high level summarize of what you need to do in order to instrument the Universal Editor. So you can call the name as many as you want, because this actually become a identifier for the Universal Editor to be able to hook up with the source of the content. That also means you could have an edit application on one page, have the content served by multiple sources. But that could be from a document, from an AM, from a content fragment. I think so far, we have launched the support of the AM instance, of course. And we’re experimenting reading the content or persist the content from GitHub, from the Google Doc or SharePoint. So when this plugin become available, you will have no limit of where you store the source. And the plugin of the Universal Editor in that Universal Editor service layer will help you easily persist and also publish the content. All right, so I like this slide. I actually borrowed this slide from Gabriel’s presentation. So we call that Universal Visual Editor, because it’s actually the two different personas getting benefits from these features. But the practitioners, they were enjoying their experience of in-context editing. They modified the content in real time, and it’s going to really boost their creativity and content velocity. And also, remember I said, respect your permissions. It’s not like anyone has got a URL, can modify the content. And it can also, by the way, Universal Editor has been implemented using the App Builder that Ron just mentioned. So it’s extensible. So you can customize your own workflow based on what you need and then place those little buttons or actions and then make this Universal Editor interface very unique for your own users. Lastly, for the developers, I’m a developer. The reason why I like this is there’s no restrictions. I got my free choices of technologies using whatever technologies my favorite is. And in terms of the instrument, I don’t need to heavily inject a lot of things to my content. Excuse me. All I need to do is just place this micro metadata in the payload and host it anywhere. That’s the end of my session today. And now I’m open to the questions. That was a great presentation. Thank you. Thanks, Gennaro. It’s always great to see how others are presenting this. And I find it did a very good job at that. Thank you. Yeah, don’t hesitate to shoot out your questions. Yeah, I was going to say, sorry about that. There aren’t any questions that I have seen come in through chat or in through the Q&A pod. But since there’s some time left, and Gabriel, since you’re here, I don’t know if you guys want to chat a little bit about Universal Editor or more about what’s coming. Or we can end early. It’s up to you guys. I’m really glad if we can add more details. I think that might be useful. I think we made a good, we went around everything here. So I think there is not so much to add to that. But yeah, roadmap wise, we are kind of wrapping up now here with the last really important features that we need to add and improving the performance as well. There are a few things that we need to straighten out a little bit so that we can go GA with that. And yeah, we are still looking for customers who might be interested in the VIP program. The VIP program is really special in the sense that it’s not the beta. It’s not that you work with a half-finished product without really understanding what to do with it. It is that you’re working together with us on a project, on your project. And we try to very quickly turn around something that works end to end that you can actually use in production so that we also get feedback from your authors. And yeah, if you’re interested, don’t hesitate to reach out so that we can enable the Universal Editor for you so that we can have an initial call with you to define what scope we would like to have with this VIP program and that we can have some success with that quickly and hopefully that you can experience the full power of this. Yeah. Yeah, I think I would like to share one of the some conversations I had with my customer recently. And I think this is very valuable. And this is a very common questions when someone would like to leverage, let’s say, would like to create a new experience. So most of the time, the customer asks me, hey, I’m going to create a new site. And it would be something like a single page application or et cetera. What should I use? Should I go for the Spark editor? Should I go for the content fragment in a headless way? Should I go with the normal page for doing that? And there are always pros and cons for this one. And also, depends on what kind of team you have. You have a big team, almost a whole team, or a smaller one. And also, depends on what developing you have. You may have a really good front end team, but where we have limited resources in terms of the AM developers. So they have to always become reliable drivers to make the people, especially for the solution architect to make the decision which way we go to. But when the universal editor becomes like an offering from AM classes, I think that’s provided a really alternative, all really good answers for these questions is you don’t need to worry about that. Because at the end, with the help of the universal editor, you will have the same consistent in-context also an experience for your team. Some of the teams, they will need this information because they may not have time to find out, OK, on a landing page, the terms and conditions are coming from a constant fragment from one source. I need to find out where is it. I can do the modifications on the universal editor. And I want to click the Publish button. It actually triggers a workflow to publish the content. So I think that’s a really good benefit for a solution architect to consider when you have complicated applications, you have different data sources, and you would like to provide the similar sponsoring experience for your content team. So yeah, my personal feedbacks when I’m using this one is it’s really cool. Thanks for introducing that. No, and I think from my experience, the biggest hurdle for authors, for practitioners is really that they don’t necessarily know where the content is. And having to first find that content is actually a huge hurdle in doing changes. If they are not very used to how the content has been structured, if they are not really doing edits every day, every week, they forget where things are. And therefore, you don’t have a large team who can actually maintain your content. It’s then up to the specialists. And that is exactly what we tried to solve with the Universal Editor, that it’s very easy to do the edits. The content is right there. You see it. And why can’t I edit it where I see the content in the experience? Why would I have to go ahead in whatever UI that is, if it’s a content fragment UI or page site admin, to find that content again? Why can’t I just do the edit there? That’s absolutely right. I think one of the key features of the Universal Editor. And yeah. Sorry to cut you off, Gabriel. We are out of time for this session, but that was absolutely fantastic. There was a great little interaction there at the end in James’ fantastic session. Thank you guys for spending time with us. And now we have Mark coming up to talk about Edge Delivery Services. Thank you guys. Thank you. Enjoy.