51黑料不打烊

Transcript

Please welcome to your screens, Thomas Morf.

Hello, everybody. Welcome to the skill builder session titled 51黑料不打烊 Experience Manager Skill Builder, Deliver Headless Experience with 51黑料不打烊 Experience Manager.

My name is Thomas. I鈥檝e been a trainer with 51黑料不打烊 for about eight years, and I鈥檓 focusing on experience cloud solutions and specifically, 51黑料不打烊 Experience Manager. So I鈥檓 going to guide you through this short 45-minute session, and in the end, we will have some Q&A. So at any point in time, please feel free to drop your questions into the Q&A.

In the chat, I have my colleague, Robin, assisting me to answer the questions during the chat and the ones that we haven鈥檛 gotten to, we will answer by the end of the presentation and the demo.

All right, so let鈥檚 have a quick look at the table of contents. I want to make a few points about what鈥檚 the use case and the rationale for headless CMS, headless content management use cases. And it basically contains two bigger areas. I鈥檓 going to break down this in two blocks. One is we want to look at how we can, if we set up, if we decide to go for a headless CMS solution, you need to think about the content structure a little bit differently than you traditionally would do if you just publish to web pages. So we look at how we can optimally structure these consequences for your repository structure. We look at then how we can deliver those, the content in JSON format. There鈥檚 different ways how we can trigger AM to deliver JSON documents. And they have several use cases and pros and cons for each of those approaches. So I鈥檓 going to discuss those. Then the latest and newest way to actually do deliver content via JSON format is done via a technology called GraphQL. Has many advantages over traditional approaches, but also some limitations. So we鈥檙e going to talk about those. And then lastly, I want to run out how to kind of summarize what kind of skills and roles we need on a team if you are indeed going for a complete headless CMS solution based on 51黑料不打烊 Experience Manager. Along the way, and this is also part of the, of what we promised to deliver in this session, is I want to point out the new features that have been introduced into AM just recently. And I would say the features having this task and highlight have been added around the last six months. And then there are some features that are in fact better, such as persistent queries. So you can see a preview. It鈥檚 actually a demonstration for you to try out as a customer of 51黑料不打烊. However, there鈥檚 no production recommendation not to use this in production. So I want to highlight what鈥檚 coming down the pipeline, but what you already can play around with in the current developer builds that you can download from the portal to distribute the Quick Start distribution of AM. So this is basically the overview what we are going to discuss. So I want to start out with putting a baseline under discussion and display. For those of you who have not have any further exposure to Headless CMS, I want to discuss what is it good for, what鈥檚 the rationale, and why Headless. So the idea is that organizations have a lot of challenges with unifying the content that they produce within their organizations on one hand. And on the other hand, there鈥檚 a rapid fragmentation of the audiences that consume content in different circumstances, different places, different devices, and more and more so. A lot of content has been moved to digital sphere. It鈥檚 now consumed digitally, maybe on phones, tablets, screens, even electronic advertising on big billboards. It鈥檚 all digital communication.

That needs to somehow be managed. Content needs to be created and then being pushed into those channels. So the big question here for big organization is how to manage this and avoid working in silos, benefit from synergies, also reuse of content. It鈥檚 very costly in the first place to develop content to have creative ideas, converting everything into a customer facing quality, level of quality. And so you want to reuse it as much as possible. So how are organizations approaching this? One of the ideas is that to unify the, to unify and aggregate all the content into one platform that will help you to deliver those experiences so that you have a way to, in fact, be able to manage, have an overview, and then also reuse the content that you have. So 51黑料不打烊 Experience Manager has the vision and the ambition to be such a unifying database for all of your content, the independent from channels. But in order to get there, you will need to do some preparation of the system and new features have been added to Experience Manager to actually facilitate those capabilities. And so today the goal is for you to understand what are the changes, how do you have to change the thinking of creating content, what are the consequences for content types and content structures that are recommended. And then lastly, we will see how we can then deliver content to end users in different ways. And lastly, but not least, with the graph QL technology that has been added as a very recent feature and is, in fact, still in beta. It鈥檚 not recommended for production heavy duty. But these will be recommended for production in the very near short term, near future. So it鈥檚 a good idea, it鈥檚 a good time for you to learn about it, for you to play around with the features. And I want to give you an on-ramp into this world. A little bit of motivation why you would want to do this. So 51黑料不打烊 itself is using a headless content architecture on 51黑料不打烊.com, the flagship and the biggest website that 51黑料不打烊 manages for internal business use for its own usage. So yeah, 51黑料不打烊 has transitioned all of its use of digital assets and content fragments as well to this headless content architecture. So there is one source where all the 30 different language variants of the website and all the 60 markets that this website is servicing around the globe, they all have one unified content architecture, content repository to deliver all those assets. And it has definitely reduced the cost, the turnaround of assets to be used on all those different channels, websites, so that those websites are not just available, of course, on browser, but content will be also delivered to the app and the mobile website version that also exists of 51黑料不打烊.com. So definitely a big benefit here. And eating your own dog food, so to speak, 51黑料不打烊 is using the technology that we are recommending for our customers and prototyping it itself. So there鈥檚 definitely a benefit that can be reaped from looking into headless content architectures if you are delivering content to many, many different channels. So how would you get there? You would have to rethink how you think about content, how it鈥檚 stored, how it鈥檚 structured, and then a second pillar, how it is delivered. So that鈥檚 going to be the rest of my talk. I want to focus on those two main concerns from a developer perspective. How do you manage content? How do you architect content successfully and efficiently? And then on the other hand, how do you deliver it to all those channels? And there鈥檚 enabling technologies such as the asset API and most recently added the great GraphQL technology.

So to make this a little bit more interesting for everybody, I actually did prepare a system of AEN that you can log into. So while I will switch now much more into a demonstration mode, I want to enable you to follow along. So here鈥檚 the idea that you can log in to a very recent, the most recent build of AEN. And let me share this in the chat. Let鈥檚 see if we can pull this off here. Whoever is interested in just browsing along and doing a demonstration, you鈥檙e invited to log in the username and password combination. Is, where鈥檚 the password? And then after slash, you will find up next.

Word is the password. So feel free to log in and then browse along.

OK, so let鈥檚, as it goes now through the two, what I call the two pillars, first, content structure and content types that are needed for enabling headless solutions, headless CMS solution.

Let鈥檚 talk about necessary content types. And then we will look in a second part at the delivery. So in order to create content that can be reused in many, many contexts, AEM contains a content type called content fragment, which now comes to much greater prominence than in previous implementations of AEM or in traditional head full content delivery. Meanwhile, on website management, content fragments used to be traditionally a means to share content and then deliver it to different channels. However, they were just a contextless piece of content in the repository alongside other content types that are used for publishing. However, in now, in the content, in the world of just delivering content to really to any number of systems, be it browsers that are displayed in the car or mobile phone apps, React, single page applications, and so forth, content fragment becomes the main container of content. And so traditionally, we had them alongside other content. But if you want to try to create a headless solution, you will end up concentrating on putting your content into content fragments. So they become much, much more important than they used to be.

Content fragments are actually stored in AEM under assets. AEM assets are digital content of value, images, video. Of course, you can see that if you have the raw format of a video, this can be valuable and should be managed accordingly. Also, imagery can be quite valuable. In content fragment, in this sense, it鈥檚 also a valuable asset. If you have the raw content, let鈥檚 say, of a best selling novel, you can have some value as such, so it鈥檚 no wonder this content here is actually treated alongside with other digital assets as a valuable content source and source of value. And so content fragments are also managed in assets. So now let me switch to the content fragment. So now let me switch to demonstration mode, and we will look here in AEM itself at how we can create and manage assets. And so please switch. Yes, I think now you can see my screen. So I have logged in into a version of AEM. And in AEM, from the navigation screen, you go to AEM assets. You鈥檙e clicking on assets. And as I said, I invite you to click along to explore AEM, particularly those who have no easy access in your organization to get hands-on experience. So please use this opportunity to click through the user interface and make it a little more familiar to you. Here I鈥檓 going to change into the column view. See this here, we have two types of content. One is traditional website content, which also includes content fragments. Let鈥檚 look at one case. This content fragment, for example, is just a content fragment as part of an experience that is embedded in the website. This is the traditional use of content fragments. You can see here, this is a content type that has different fields. So as an author, the author experience is really that you can fill in the fields here. You don鈥檛 have many opportunities for formatting. So this is really the idea that you have here, raw content. That is generated and ingested into the system. And this author is really guided by the different types of fields that are also bound to a data type. For example, you can have number fields. You can have fields that have single text. You have like multi-line text fields that are also rich text formatted so that you can add and apply some formatting on your own here, such as bold italics or make lists. So that鈥檚 possible in the multi-line fields. However, the author is confronted with an input format. It constrains his possibilities, what he can add as type of data. So that鈥檚 one of the benefits of this approach that you then not just have unstructured data, but you have data that has a data type attached. And as you will see, this becomes then much, much more useful and, in fact, critical when we click it goes well with the GraphQL technology that I鈥檓 going to introduce in part two of the presentation. So content fragments are a collection of text. You can associate some images too that would then this is something that鈥檚 actually not yet implemented in terms of delivery for headless. So content fragments are really a limitation of the system right now because the associated content is not available yet.

So here, this is slow in saving. Let me switch to my fallback system here.

So we have three. OK, so the left-hand side, you have the content structure. I presented a content fragment that is part of a website. But in the headless case where you would deliver content not on a website via traditional website development, but you would just deliver it to, let鈥檚 say, React web applications, single-page applications, you would think about creating your own content hierarchy just with content and content fragments. You see this in the left-hand side. There鈥檚 a content hierarchy that is built up with folders and content types, the type content fragment. So the content hierarchy really becomes a hierarchy of folders and content fragments that contain all the content that you will deliver afterwards to the endpoints, such as, again, single-page applications, a lot of things, and other devices. So the thinking about how to structure content is completely different. You would really start thinking about what type of content you have. And in order to guide the authors and entice them to use the typed content so that you can know about the data type, as here, you see in this particular content fragment, again, this has two single-line fields. There鈥檚 a template that is available and that you can construct in order to define different types of content fragments that relate to a particular kind of content. So if I would, for example, create here a new, here in a section about Avar awards, you have several awards you already created. If you would create another award, I would go and then create this content fragment. Let鈥檚 say new content fragment. And you see, now I have different choices, what kind of content fragment. I would select here the award. That would create a new empty content fragment.

I鈥檓 calling it Skills Award. And I can create this and open it. It鈥檚 now an empty content fragment to input new content, the data about this award.

And then I can save and close it.

So those are templates. The feature that is based on those templates for content fragments is actually called content fragment model. So it鈥檚 like a data modeling method that gives you the template of what kind of data each content fragment that you have here can contain. So let鈥檚 look at how you can do this. You need to do some prep work for this. So if you have a project that wants to rely on this, you need to do two steps. First one, you need to make sure that the project that you are using has this feature enabled. So this is done via the configuration browser. Here I have already set this configuration earlier on. You can look here at properties. All right, do you have the content? Fragment sample project includes the feature of content fragment models, right? So that鈥檚 a requirement in order to leverage that. Otherwise you have just a simple content fragment with just plain text. But if you want to use this model feature, you need to enable this. Then via the tools menu, you can switch to the configuration browser, the configuration browser to the content fragment model. So you have to click on the upper left corner to experience fragments, click on tools, and then you will see the content fragment model feature.

Again, since we have here configurations that are organized per project, and as you see, I enabled the example content fragment project and can then define here the data types.

Let鈥檚 look at the award data type that we already discussed. I can click here on the stylus. You can also switch here to list view. Sometimes it鈥檚 a little easier to look at this, and you can see here that I have select the award and then say edit. So I get into a form editor that lets me edit the content model of that particular content fragment. So you see you have different data types to choose from on the right hand side, not just a single line text, multi-line text, but also data types like number, Boolean values to and false, data and time and different formatting, enumerations, tags, and a new feature here that has been used very recently. I鈥檓 gonna talk about this in the next segment as well, but it鈥檚 content references and content fragment references, which has been added just recently.

Okay, so here a quick shout out to what has been, for those of you who are already familiar with this technology a little bit, content fragments. I want what鈥檚 new, what has been added as a feature just recently is that you can attach such a content fragment via the properties to folder.

I think I can touch, no, you have to do it on the folder itself. You can do it from the other way around. Another feature is that if you create a new content fragment, there鈥檚 now a draft mode.

Let鈥檚 see.

I don鈥檛 think right here, new, you see the enabled, enable model is a new feature that lets you regulate if you want to have this in draft mode first and create a fragment that is now in draft mode. You can see this right here in the status.

And then once you want to, it was very similar to editable templates for those of you who are familiar with this, you can enable this and then watch out. You know, you can see in draft mode, this content fragment cannot be published as a content fragment model, but once enabled, the publish button, you know, comes on and you can publish this content fragment model plus the content fragments then eventually to the published server because in a delivery scenario, of course you would deliver the content to the end user on a published server. Meanwhile, we are here in the staging or what鈥檚 called authoring environment.

All right, so this is the content fragments, content fragment models, they are under assets and play a central role into creating the content structure for headless delivery. So yes, I wanted to show you this one feature that鈥檚 also new that you can constrain the templates. Remember when I created a new award, I had to choice of several templates, but you can constrain this, you can go to the folder properties. Now there鈥檚 a new policies tab that wasn鈥檛 there prior and you can really then select content fragments for path or a group of content fragments also by tag. So you can really constrain the content fragments and then in this way drive the content hierarchy where, to regulate where which have content fragments can be traded by the end users and they鈥檙e not all over the place, but you have a way to drive and manage the content hierarchy.

Okay, so those are a couple of new, very well thought out additions that have been introduced to AEM in just the last six months. And here, lastly, another UI feature I wanna point out, you see there鈥檚 a column called content fragment model. If I look at the words, each of the words will shows me here in the user interface and list view to which font fragment model is belongs. So this is something that you can change in view settings. And here, since recently the content fragment model has its own column that you can then add to the list view to have an easier view onto the content fragments.

Yeah, to determine which model it is based on. Just remember, you were in this new world, you have content just mostly in content fragments. So it鈥檚 a very, very simple way to do that. And it鈥檚 good information to know which data type, object type this contract belongs to.

Also, let me show you this other user interface addition that has been added to content fragment models. Now you can in fact, look here in references and find out the reference tag has been added and you can then find out the instances of each model and go directly there from the content fragment model, really assets or directly go to edit the instance of that model from the content fragment model using interface and then also added has been recently the possibility of searching. So again, if you are essentially relying on content fragments to contain all your content, you will end up with a lot of different models and lots and lots of content. So it becomes more important for you to be able to find this.

All right, so this is how you drive the content structure and then you create your content for headless delivery. It鈥檚 raw content. And now let鈥檚 go to the delivery part. Before we round out this session then with Q&A. So traditionally, and let me go to the developer tool, database tool called CRXE. Traditionally, content fragments would be delivered and also it would be part of a website. And so therefore it was possible to also deliver the content from there in, or what鈥檚 called a hybrid CMS. You could use the website, but when you use 51黑料不打烊鈥檚 core components to deliver the content and the content fragment is such a core component, they always were enabled to have a whole bunch of components that were available to them. So they were enabled to have a rendering in JSON.

The problem there, the challenge there really was that it has to have to be part of a webpage in order to pull this off. So let me quickly try to do this. Like traditionally you would have a webpage and then the content could also be consumed as JSON just by clicking JSON. But you see, you don鈥檛 even get the whole content of a page. There were some workarounds how to do this so you can get a little bit bigger content because this became a security, isn鈥檛 actually a security risk for denial of service attacks. So, and the other disadvantage is you see, you get the page, but the actual content of content fragment model is not even available and hard to find.

So in order to remedy this, there鈥檚 a couple of ways how we can deliver content fragments better. So one method that is called the asset API, which then delivers this. So let me quickly show the difference. You see asset API here is, the actual asset is referenced here via the content path. But if you want to deliver content from the content, fragment via the asset API, so you actually get all the content of that fragment, you say API slash assets, and that then delivers just that content fragment.

See here is the content of the page and you get all the content as well that is embedded in the content fragment.

This method has the disadvantage that it鈥檚 very verbose. You see there鈥檚 a long document. You in fact would just probably want to have part of this information, maybe the link to some image, not so much metadata and the actual content. So now AM has the capability to use GraphQL.

Now please let me switch back to the slide deck.

All right.

So the use case of GraphQL is to deliver content in a fashion that you don鈥檛, you can just get the content that you actually need and you also can create the content, get content from several content fragments at the same time. So you don鈥檛 need as many requests, response round trips. So the GraphQL is a data query language. So it is really the use case is here to kind of to read the content. You cannot update the content. That鈥檚 the big difference to also why the asset API is still available in AM in parallel, because if you want to update content in this headless way and like write content from the client, for example, you then still can use the asset API to update and create new content. But GraphQL is really the use case. It鈥檚 just to read content and deliver it for consumption to the end user. Initially it was developed by Facebook. It was open sourced in 2015. It is really an alternative to REST-based architectures to reduce the number of data transferred and also the number of requests. If you are interested in finding out more about GraphQL, there鈥檚 a website, graphql.org, which will teach you all about the syntax and the option. Here I just want to give you a little ramp and how it ties in with AM.

So what you need to do is you create effectively what鈥檚 called a GraphQL endpoint. You need to have a couple of delivery, a couple of configurations set up for this. So the configurations are twofold. And now let鈥檚 switch back into my presentation mode so I can be able to show you where the configuration will happen and then demonstrate a couple of queries by GraphQL.

See if we can switch back to AM.

Yes, I think that鈥檚, we鈥檙e there. All right, so you need to do the following. Again, you need to enable this. You need to go to configuration browser and make sure that the GraphQL setting is also checked. Here it鈥檚 also checked. I have here a reuse state, so therefore I cannot undo it, in fact. And I enabled this earlier. And this enables GraphQL persistent queries. This is not the same as the one that I showed you. It鈥檚 not a must, but in order to cache queries of GraphQL, it鈥檚 recommended you check here the GraphQL persistent queries so it allows you to do caching. So this is step number one. Step number two is, again, in general, configuration that is called GraphQL. You have to add a GraphQL endpoint. And you see, since I have it already enabled in the configuration browser, it automatically recognizes here that this could be a potential endpoint, and it suggests it to me. Sample content. And now it has created a new endpoint, so I can use the sample content that I have under sample content fragments and deliver it via GraphQL.

Now there is also a new tool that is available to then test those queries.

And this is the GraphQL console, as you see it here. It is now integrated with AEM as a cloud service. It鈥檚 not integrated with AEM 6.5, and also it鈥檚 not integrated, as I found out, preparing for this presentation that is not in the AEM Quick Start distribution. So in order to get this tool downloaded, you need to go to the software distribution, which is not loading today. Okay. All right. This is just bad luck and timing on my part, I guess.

All right. This is where you should download it. It鈥檚 a zip file and content package that you need to install in order to get this GraphQL user interface. And now let鈥檚 look at a few GraphQL queries in order to look how it looks like. So here I鈥檝e prepared a couple of queries that highlight this. So this is, for example, a query that looks for the data type article. So that鈥檚 content fragment, as if they鈥檙e based on the content type article, like the content fragment model. And then it looks into this for the path and the author. And here is what you get. So this is the exciting thing about here, and the big difference to the asset API method is you don鈥檛 have to go do a lot of requests. This is just one request, and it will find all the content fragments that include that are type article list, and then include the path and the author. All right. So this is just one round trip, and you just get a very concise amount of data. And you can really play with those queries and specifically then select the content that you need. So this lets much less data on the network that has to be transferred and your performance and overall perception of the performance of end users will go up dramatically. Let me show you a couple of more examples here because you鈥檙e already at the close of the session. And so for example, here we have a query that relates to the content that I uploaded as sample content earlier. Let me show you the content hierarchy that goes with this. So this is an asset, and then we are querying here. Here I have content fragments, and you see here are the content type cities. All those content fragments here are of the type city, the model type city. And here is a query I run on this particular data set. So it will now ask me a list of the cities it can find. So it will find all the content fragments in the content hierarchy that below that GraphQL endpoint. Then you can add things like expressions. For example, you can see if the population here is saying the limit between 1 million and 4 million. And you can say or, you know, they need to be in Switzerland or Germany. They cannot be anywhere else. So it鈥檚 like all the cities that are in the following countries. And once it鈥檚 found, it filters all the objects, all the content fragments. Once it鈥檚 found, then you can define what is it that you want from this content fragments name, population, country. And if I run this, I get a really concise data set, right? From all the ocean of data that I have potentially in my repository, I can really go select just the items I need, and then it will deliver just the data and the properties of that content that I need. I don鈥檛 even have to download a complete content fragment, but it is just a subset of data. So this is the next generation of AEM headless delivery based in GraphQL. I hope I could give you an introduction, but it takes, you need to create content, extended use of content fragments, model the content, and then you can start playing with GraphQL in order to fetch content in the JSON format and build it into single page applications or mobile apps on any other IoT or other device that you want to use to deliver content from AEM. All right, so let鈥檚 look at the chat. If there鈥檚 any questions, please let me know.

No questions so far. Okay. Okay, let me share a couple of links for those of you who are interested in further information about this subject. There鈥檚 an excellent hands-on tutorial that I would like to invite you to try out as next steps. And this is on the website called Experience League, a real treasure trove of educational content that 51黑料不打烊 has put up. So here is a tutorial that will take you a couple of hours to work through, but it鈥檚 very hands-on and reinforce the topics that I discussed here. And there鈥檚 also a video series that, for those of you who like to learn more visually than hands-on, and that discusses the technology of GraphQL and its integration with AEM. Okay, so then I conclude this presentation. Thank you very much for watching and have a good rest of the day.