AEM from Headful to Headless (and everything in between)

Transcript

Oh Oh Oh Oh Oh Oh Oh Oh Oh Oh Oh Hello hello and welcome to experience league live My name is danny gordon. I’m a technical marketing engineer here at adobe and i’ve been working with am for a number of years and uh Yeah, I just want to welcome all of you to our live stream Uh today i’m streaming from san diego Uh, and so if you’ve joined us super happy to have you I think we’ve got a pretty fun show coming up Um, but yeah drop us a note. Let us know where you’re streaming from I see already. There’s uh Some activity in the chat pod super happy about that um Yeah, so we’ve got uh, brian warner. Oh, wow Wow, we’ve got some some some uh am experts in the chat pod, so we’ll have some am experts on the show but uh We got a good chat pod as well. Um But uh, yeah as the show goes on if you’ve got questions, feel free to drop those in we’ll try and uh answer them throughout the show Uh, this live stream is going to be recorded and there will be a replay available uh on experience league dot adobe dot com So we’ll also present a few slides in the show and those will be downloadable as well so Yeah, so this session is am head full to headless and everything in between and basically we’re trying to break down some of the most common Implementations that we see with am sites and with any implementation. There’s a lot of considerations from end user experience target delivery platform As well as the authoring experience, so we’ll try and break down these implementations and Yeah, give you some guidance on what makes sense, uh for your own project So to help me, uh, i’ve got some awesome guests, uh, some am experts. So let’s go ahead and bring them out So, uh, yeah, let’s um Thanks guys for agreeing, uh to join the show I um didn’t have to bribe you all that much. Uh, and um Yeah, let’s let’s start with you. Satch and why don’t you go ahead and introduce yourself? Sure My name is satchin nali. I’m working as a technical architect in adobe consulting services org um in my role I work with clients and we primarily focus on Successful and on-time delivery by making sure we are designing architecting the innovative solutions that leverage, uh am features and even technical stack um Really great to be here. Um share my Experience with the community and have an engaging conversation Just to see what else is out there. What are you doing? What are your challenges and Collectively we’ll try to answer it. Thanks. Danny. Yeah, awesome. So such and you’re streaming from uh, new york Thank you. Yes, i’m streaming from new york. Uh, I might see some traffic here Awesome well super excited to have you. Uh, so yeah sean, why don’t you go ahead and introduce yourself? Yeah, happy to danny. Hey, i’m sean steimer. Um, i’m a senior cloud architect with adobe. I’ve been doing aem for I don’t know 10 11 years at this point. I’ve been with adobe for close to seven um, and i’m coming to you live here from what is a a little bit of a cloudy overcast day in sacramento california, so looking forward to the to the stream and seeing what all your questions are and hopefully we can uh, We can answer them and give you something fun and interesting to take away from the session Awesome. Thanks. Thanks again sean for joining. So yeah amal. Why don’t you go ahead and introduce yourself? Hi everyone, my name is amol anand i’m a principal cloud architect with the cloud adoption team in aem engineering I used to work with all three of these guys back in consulting when where I spent almost nine years So i’ve been with adobe a little over 10 years now i’m happy to be here and uh help sort of you know, explain All the different flavors of aem that are available and how you can use them so excited for this Yeah, awesome and uh, so amol you’re you’re out of boston, is that right? Yeah, i’m in the suburb of boston So coming from massachusetts, um Yeah, big big uh big win last night The celtics. Yeah Not much of a basketball person, but I heard I heard about it. Okay Awesome. All right. So, uh, yeah, I think let’s jump into it. Um We got a couple slides kind of level set what we’re going to be talking about so let’s switch over there All right, so hopefully everyone can see a slide deck um So, yeah this session, uh, we’re starting out aem from head full to headless And so we there’s a lot of different flavors of aem implementations Uh, but for this session we tried to break it down into kind of four main, uh design patterns So kind of on the you know on the left hand side where we’re talking about full head full we have You know our aem website our full stack kind of traditional implementation um And this is uh where you know, we’re giving our content authors full experience management. So, you know, they’re able to You know edit, uh, they’re edit the contents um make layout changes, uh, you know go through, you know, they have a full range of capabilities for for authoring that content And so then on the like the other end of the spectrum, you know when we’re talking about kind of a pure headless implementation Uh on on the right hand side of this chart aem has a number of APIs That can expose that content in a headless manner today, we’re really going to be focusing in on the graph ql api I think right now that you know, that’s one of the more powerful apis that aem provides Uh, it also offers kind of the most flexibility for front-end developers In terms of consuming and choosing which content that uh, they’re retrieving from aem So that’s the kind of what we’re that’ll be the focus in this presentation And so on the headless side, you know, you lose, you know You give up a little bit of control of the layout and the experience management to your front-end developers or your client application And so the authoring tends to be more form-based authoring So those are kind of the two ends of the spectrum Uh, and then in the middle, we’ve got the spa editor and the remote spa editor and so these are features of aem where the front-end code is built and You know react React js framework or angular js framework And aem provides a lightweight sdk kind of in the middle and is basically mapping aem content To these front-end components. And so it’s pretty interesting about these these two flavors the spot editor remote spot editor Is that you know, we’re able to the front-end developers are able to build that experience using a in a single page app But we’re still enabling our marketers and our authors to to make some editorial Decisions and and make some editorial content changes To that spa directly with the in context preview. So We’ll be breaking down the differences between just you know spa editor versus remote spot editor and yeah, so that’s kind of a high level that we’re going going for and Yeah, let’s get get in the next slide. So Again just to at a very high level From an architecture standpoint from an authoring and experience delivery all four flavors of the implementations follow the same pattern We’ve got aem is broken down into an aem authoring tier and a publishing tier So our content authors are editing and making content updates on the authoring tier That’s where that content can go through approval workflows. We can make content updates on the authoring tier We can preview the experience and then that content can get published out to the a published here Then there’s a layer, you know caching layers in between so we’ve got an apache Web server dispatcher layer as well as a cdn and with the aem cloud service, you know, these are all set up and Created for you automatically. You don’t have to manage any of that But there is a caching layer that you know, it’s important for performance And then we have you know, the uh End user experience where whether we’re delivering content to a website spa mobile app or iot device And you know, that’s uh, you know kind of the end where our end users are are interacting with that that content so Um, yeah, so next slide So now i’m going to hand it off to you satian He’s going to be walking through kind of that first implementation flavor of a you know, full head full with aem website So Thanks, danny. Um, hello everyone i’ll be going over some basic concepts On this head full website anatomy Slide this will help to map the aem features during our demo and then We’ll talk about some tech stack Personalization and some consideration based on our experience Um, so for advance, um Community members here or the aem users Some of these contents will be a little bit rudimentary However, please use chatbot to ask questions as danny said and tell us about your challenges What features are helpful and what you’d like to see in maybe in advanced sessions or what you want to have? Our brains to be picked with respect to your implementation Um, so let’s review the head full anatomy so we have websites then they are comprised of multiple web pages And the web pages typically have some kind of a layout as you can see in this example Home page is just like a 12 column grid You have header footer hero and some content area to add your components Likewise for article pages, it could be divided in eight four and but having consistent header and footer and then you create these layouts using templates and And then using these templates you create the web pages and Now looking at the web pages web page is nothing but just collective organization of your components And you can arrange in any fashion you want or your template will drive that organization And component is nothing but a piece of ui on which you have content And that content Is entered by your content authors, uh in aem’s case through the dialogues you take that content and apply some Make it pretty using html css or some uh your organization specific styling and make it interactive for your user engagement so that’s the basics and and if you Refer back to previous slide what danny has showed in this head full implementation pattern the web pages are rendered on the server side and They are just delivered to your devices With content plus html css javascript and That’s pretty much it. So it’s like a full experience has been delivered to your devices, uh from aem or aem related components And authors have full control over those uh capabilities to manage the experience using dialogues and editable templates, which we’ve seen in the demo Danny next slide, please Um Here, you know just looking uh lay it down. Like what is the technology stack behind? most of you are familiar, but for the new folks like This is java based, uh technology stack You in java specifically you need to know the object oriented and encapsulation or inheritance Features of java Then we have osgi for business logic They just take care of your ioc Dependency injection and they make sure all your uh services are singleton um to carry out your business logic Many wrestling models. They are nothing but poachers. They are mapped to the resources Simplifies a lot of things in order to read the Your properties or details from the resources Hdl is html templating language like any other templating language, but this is very specific to Aem Just to separate have a separation of concerns between presentation and business here And then of course, uh, we have client libraries to make those web pages pretty so you have css javascript And jcr for where the content lives at the rest Uh when when you like on off your systems, that’s where your content lives And we are highlighting here am core components. Um am core components will uh, It’s a standard library will foster The reusability or even accelerate your development time you can extend the code components to create our own specific components And then authoring experience Authors as I said, we have they have full control what you see what you get Uh using dialogues, uh, they can control even layouts and editable templates and the style system Um delivery Same thing fully formatted html pages you have and experience wise your web page are delivered, uh with experience and the content for personalization You can leverage a context hub but for large full scale Personalization typically you will use adobe target. You will have your personalized content Managers experience fragment those you will be pushed to the target and from target you will just like swap the Default content with some personalized content to have user engagement um regarding considerations it’s it’s you can create powerful websites using this technology stack and the feature rich but make sure you have Right people process and technology in place. So you get most out of this platform Again, it’s great for your data-driven dynamic websites Not all the websites or components just rely on author-based content. Sometimes you have to Rely on third-party data. Sometimes you have to rely on uh your in-house systems to pull some data for example financial services like hey, what’s today’s mortgage rate or interest rate or uh Anything related to that so you could use this component or the business logic to pull the data and uh massage with your authored content and just deliver the great uh experience Um, then last but not least, you must have seen the content fragments or experience fragments they foster the reusability uh, we’ll get into details like In which cases you should use content fragments and in which cases you should use the experience fragments So having said that, I will just now share my screen and we will go over some uh demo Awesome, thanks. Thanks. Sachin. So we’ll get the screen screen share set up Um, hope you can see my screen give me one second. All right, there we go. I think you yep We should be able to see it now. Okay so, um Let me just move this live webcam. It will cover me um so Here i’m on Am cloud service instance This is your start screen We’ll go to the sites So We’ll be demoing after the weekend site, which um, danny and team has created so you could relate whatever i’m demoing here Um to your uh, when you are checking out on your own instance So we can site we’ll go to language master en and let’s pick magazine So we’ll edit a page So we’ll start from that anatomy we’ll start bottom up we’ll start looking at the components how you Offer the components or enter content Start with very interesting component called image so You can do the inline editing. So by clicking this you have open a dialog So here’s the assets is the component dialog for image Component and then you have an asset and metadata tab so you can swap an image. Let’s say I want to pick a different image. So you just simply drag and drop an image And so like I want to add some metadata you can add hello world or you can pull it from the dam itself also And these components the component like image text, uh, all of these components are Provided by am core components. So, you know as a development team, right? You don’t have to build everything uh Correct Exactly, that’s right. Danny. So What i’m using here is the I think we do Image core component so Most of the time you can use as is or if you have some specific requirements you can extend this And just maybe just customize the dialog portion or you can Customize the rendering portion of it. So it’s up to the implementation team Which pieces you want to use as is or which pieces you want to like? Customize or have your own flavor of it Um So looked at the image component, so let’s look at the title component here um Same thing in dialogue, but now we look at the um Styles options here you see that a paintbrush icon. So you click on it and I want to like hey, maybe I want to align, right? so You can have underlined to it also So these are like small tweaks, uh having a variations of your a particular experience you can achieve using the style system Yeah, and the style system that’s something that uh the development team whoever’s developing that in um, That uh sites project they are writing the css But then they’re giving that capabilities I guess to the content authors exactly exactly Yeah, you need to follow a BEM model, uh block element So make sure like so then the uh behind the scene the styles get swapped And your experience reflects on those styles changes Yeah, so I think it’s a great pattern for for reuse because not only can you change the content of the of each of these components But you can then um, you have like this title one is just some simple variations But you know with the teaser you could have a whole bunch of different style variations that you can provide your authors Uh, so then they can create, you know, some pretty complex landing pages But they only need to know how to use the you know a few components Exactly The other thing I’d point out here is I I think the style system eliminates a lot of cases where you might have, you know before silo system existed have to build custom components because by Simply applying custom styles to a you know, a list component or whatever you can you know The number of variations are basically limitless, right? So it it can it can really lower the development effort required if you fully utilize style system Precisely and we have seen most of the time with the clients like not two web pages Like look alike or you want to have certain variations as you said without Recreating a net new component you can just leverage this file systems for variations and get your count of like number of components Down significantly we have seen traditionally like In implementation, like there are like a lot of components and how do you keep that inventory up and running and efficient? So this is where like with one component you have multiple flavors To achieve what your marketing team or design team is desires to have So that’s about um, we looked at the very simple components Image and the title component now I expanded the content tree. Let’s quickly look at the content fragment in experience fragment So you can see like just to foster the reusability of the content rather than like Writing the content in this page itself. We have a content fragment So I just open this if you look at the dialogue we’re just pointing to Content fragment, so i’ll just go ahead and click on it and open the content fragment See open in a new tab and you can see in the browser address bar You see content dam we can and this is my content fragment. So right now this content fragment has two Elements one is the offer and second one is main which is nothing but the description of about this content fragment By the description of um about this activity So, um and You have an rte here, which will give you a greater control if you want to like Add some bullet points add some indentations and things like that Um, so Let’s quickly look at the content fragment And Dialogue So you have like again display which element you want to display if I someone’s like, okay I want to just show an author so you can you can choose that also And there’s some paragraph control you want all the paragraphs or range of paragraphs. So you have Within like if you can have a reusable content, but you can pluck unnecessary elements or sections of your content also So Content fragment again amol and sean will go in greater details For cross channel reusability, they are great and there are typically two types of content fragment simple content fragment Which wherein you don’t have a structure? Or in this case what i’m using it’s a very structured content fragment Which follows a certain structure in this case had an author? And a main section and that’s backed by a model model is nothing but a schema to uh have a structured content Um anything add danny sean on no, um, I will say sasha not to rush you But do have a little bit of a time check and I want to make sure uh, you know sean and amol are able to Get their things going Yes, absolutely. Last thing experience fragment No, you’re right. Um experience fragment you can see here, uh, same thing. I can just click on the edit It will open an experience fragment subtle difference between experience fragment and content fragment experience fragment It will give you a design a layout and content fragment is just like more or less text and image content In this case, we have an experience fragment which uses the byline component And Get same thing open a dialogue. If sophia has acquired a new skill, you can just add something like blogger and Okay, maybe an assets i’ll just add demo And if I just refresh here you will see sophia’s new skill set appearing So Yeah, so both yeah both experience fragments and content fragments are great for Cross-channel reuse. Um, and yeah, I think you’ll be seeing a lot more of those as we go through the rest of the demos Um, I don’t know if you want to quickly show the template editor sachin. Yeah Yeah, thank you um so Here i’ll go So we just looked at the how to edit the components content fragment experience fragment for advanced author you will click on the edit template The advanced author can have greater control over this template by either initial content So like in this case right now i’m in the initial content mode um So what is the initial content when I create a web page from this template? So these are the initial contents you’ll define and For structure We have an header and footer so every page created from this template will have a consistent header and footer So those are managed and experience fragment And we have two layout containers here and within this container We are just outlining like what components can and offer use so This is where you List that you can lock unlock a container and you have a policy dialogues for uh for your editable template containers Yeah, I think this is the editable templates is like a real key aspect of you know, the this sort of implementation because you know You want to give your authors a lot of freedom, but you also want to maintain some sort of control Um, and you know have a consistent branded experience, you know throughout your site’s implementation So, you know having the ability to kind of manage the template through you know A ui with just like a select few, you know power users I think is it’s just a really powerful, uh feature And this is the policy dialogue We just mentioned like what are the allowed components here in this case? We just These are proxy components of the core components. We are allowed all of them So that’s pretty much and maybe last night, but at least we will show you the layout mode, um Just kind of open So you can hear Most of the time you want to see like if i’m a content author, how does this page look on desktop? Or how does this page look on mobile? so you can just click on that so You Don’t have to like get out of the system or publish a page to see how it looks on different devices So that’s all pretty much from my side Danny i’ll stop sharing and over to you Awesome. Thanks a lot. So, yeah, we’ll keep it keep it rolling. So You know, that’s the kind of head full full full stack, uh experience management There’s a lot more features, uh, you know that satchel could go through but yeah, we want to try and uh introduce all these different flavors, so Um next we are going to be looking at uh, the spa editor um And so a lot of the features of the spa editor, um, it’s designed, uh To have a very similar authoring experience, uh that we saw with the uh, am website Um, the biggest difference is the tech stack and that’s where we have a react or angular as the front end That’s consuming the content from aem As as jason so we’re giving a lot more control to our front-end developers over the you know, the presentation they’re able to code In you know react or angular, um, you know a in you know create a you know, complex javascript based components Um, but at the same time we’re still off Offering, um, you know this what you see is what you get experience to our content authors I think what’s really interesting about spot editors is we’re enabling the content authors to also create, you know Multiple views so it’s it’s still a single page application but uh the routing and You know pad page navigation You know pad page navigation It looks like it feels like, you know, looks like a website, but you’re gonna get the performance Aspects from a from a spa so, you know, we’ll look at that in the demo On the delivery side, you know, uh again the uh content is being served as jason, uh Jason model from am so those components are serialized into jason And then the end user experience, you know is is a single page app Um personalization you can still use experience fragments And there’s a adobe target spot, you know web sdk That uh that that is designed to work with uh single page apps So I think in terms of considerations, uh, you know again the contents driven by the jason model It’s great for you know greenfield spa projects. So if you you know are starting a brand new, uh, Am implementation you want it you’ve got a bunch of talented react from developers Brand new brand new site brand new branding, you know, we’re just starting from scratch. This is a great great choice Because you can build up your spa with kind of the am spa editor, uh sdk kind of in mind. Um, So it’s really good for you know, very spinning up simple microsites Uh, another consideration is that there are is some am expertise that’s going to be required on your team, but uh, yeah, it’s a simple, um, Deployment model so everything is going to be hosted on am uh, you know, so all of your you you know, all of your uh, Front-end code ends up getting deployed through am and surf through am And the javascript is just going to be managed using uh, am’s, uh client library mechanism So I got one more slide here. Um This just to try and help break down, um kind of what’s happening on the back end You know on the left hand side, we’re still developing our experience as multiple ui components just in the using uh reactor or angular Um, but if we drill into the component itself, we’ve got you know our spa component, uh on the front end That’s written in reactor angular And then there’s a provided by adobe is a spa editor sdk which is just going to automatically map Um some of this the am content as json directly to the spa component and just pushing that in as uh, as uh, props to your your Reactor angular front-end component. So all of that it kind of happens just behind the scenes with the spot editor sdk and Uh, yeah, it’s pretty fun to to develop So let’s look at that demo Let’s see here Switch my screen up Back here. All right. So yeah, i’m uh, It’s a very similar experience as uh creating and managing, uh, you know that Full stack site like satchel was showing but I have a you know react version You know react version, uh over here So everything all the views and the content hierarchy is still laid out as am pages We’ve got a few, you know pages here, but they end up going to be treated as different views within the uh, The single page application so i’ll go ahead and open up Our home page for our spa And yeah, so this is a little sample react, uh spa editor um implementation and You can see that the authoring experience is really similar to what satchel was showing earlier So we have our different components, you know, we can inline and make edits um And uh, yeah everything is you know, we still have the ability to you know, add new components um add new images Um But all of these components, um on the rendering side, they’re all rendered. Um, uh using react In this case or or angular if you decide to go with it in angular implementation Um, so then we have you know, like a teaser type components where we’re teasing different, uh different adventures so if we go into You know preview mode, you know, we can then navigate further into the hierarchy Um, and so this is another view in our in our spa If we go into edit, you know again everything becomes editable. So, you know, we do have we can swap in and out the image um All right, it’s already the first one oh I messed up the uh dialogue There we go, so yeah, we can change out that we’re still giving our authors that control um and Yeah, here’s a content fragment component kind of like what satchel was showing In this case instead of just deciding to display the you know, single element at a time i’ve chosen to do multiple elements So, uh, I think amal is going to look a little deeper at the content fragment models But you can basically create these complex models that have different data types Um, and if you use something like the spot editor, you know, we’re still giving our author control over You know which elements they want to display um, but on the uh Yeah on the front end side all of this content, you know, all of the ui components are mapped to uh, react components so and we’ll just quickly look at Just look at the experience. Um on the publish side um So I I don’t know if you can quite see over screen share, but you know, we’re not getting any uh browser refreshes here The url changes we have our you know, it’s fully compatible with you know, the back button in the browser um, but uh Yeah, it’s it’s all a single page application experience So we’ll just show one more thing Um if we kind of inspect like the source code for this, you know, you’ll notice um Let me just throw on the uh Wcm mode equals disabled. This is simulating what it would be served on a published environment Kind of notice we’ve got you know, we’re including some style sheets. Um, we’re including our javascript, but um, Yeah, you know, there’s no it’s not fully formatted html that we’re delivering. Um, so you can see we’ve got our you know spa uh target div here and that’s where our our react app is going to get loaded into Um, so yeah, the html is is you know, it’s not fully formatted html it’s it’s going to be loading a single page app um, and so if if you look there is a request to a model.json And just open that up and this is um, this is where all the am content is uh is Is sent out so it looks a little daunting. It’s kind of a big json file, but the spot editor Sdk takes care of all of that Well should silence uh silence your cell phones during a live stream um Spot editor sdk takes care of mapping. Uh, all of this json content to your uh, Your front end components. So, you know, I think most front end developers are pretty familiar, you know You get a series of props and then they can just focus on deciding how to render That individual component so, you know if you were mapping to a text component, you know They’ll get the the rich text content. They’ll get a you know indicator whether it’s rich text or not Um, we have a simple card teaser type component where okay. Here’s the cta text title So this just really uh, you know It allows our front end devs to you know code, uh How they want to they don’t have to sort of deal with any opinionated html from am they can decide how they want to? Render the content um, so the only the other thing that i’ll point out Zoom out a little bit is I think where the spa editor also shines We talked a little bit about it is the views are automatically mapped. Um To the different spa routes so we can create like a new page Choose a spa page And we still use page, uh, you know naming convention, I guess but um It ends up getting mapped as as jason to the single page app. So if we created like a new page contact us Um You can go ahead and uh open it You Can add some text here um and uh, and this is going to be um, You know now it’s it’s available as part of our our spa. So that’s kind of a differentiator there So yeah, I think we need to keep keep rolling make sure we have enough time for amal and sean to um, uh To demo so let’s uh, let’s jump back into the slides and we’ll move into remote spot editor Let me pull that up All right, so sean, I think you’re gonna take this on Yeah, so, um remote spot editor, so you’re probably you know thinking okay, we have a spotter and a remote spotter. What’s the what’s the difference and To me the the big differentiator here is i’ll get into the tech stack and some of the other details in a little bit But the big differentiator is the fact that the remote spot editor your single page application is deployed to separate infrastructure outside of aem and then um edited through the aem authoring interface that um danny and satchel both showed so it I I kind of think of it as you know a combination of head full authoring with Headless delivery because the the front end application is all you know deployed outside of aem controlled outside of aem Um, so what is it? How does it work right? effectively You have a single page application And then within that spa code base you define Editable regions right where you need Content spots that you want to be content editable by by your authoring team. Those can be You know small spots like a title or a text component or an image Or they can also be larger sections where you would put layout containers in that allow authors to put in You know arbitrary components and and rearrange and move those components around Um the same way you would with a with a head full aem website um The tech stack is is reactor angular Um with the aem spa editor js sdk so that sdk is the same sdk that you’d use with the normal spot editor and the remote spot editor and again the the back end is Java and sling models Um, so you’re still using aem components. You can still use, you know core components or custom components Um the dialogue and the authoring is all handled by by aem But the rendering of those components is is handled by your your reactor angular application um In terms of considerations, right? I I think this is a really great model if you have existing single page applications that have some You know content editorial needs. Um, you know, you could really quickly Take an existing application application and add in editing capabilities just by Adding in our sdk and then mapping those those spots into you know, aem pages and components where you want that stuff to be editable Um, you know, it does require some aem expertise although the the majority of the development is going to be on the You know the spa side the reactor or angular side really in aem. All you’re really doing is You know creating components with their with their dialogues And then mapping those into the you know, the equivalent react components to do the rendering and then also doing you know typical aem Cache administration and that kind of stuff. So it it does in my opinion lowers the level of expertise you need on aem But but obviously still does require, you know, you have some some expertise there Um, the spa is hosted on separate infrastructure So obviously you have to consider like, you know, where are you going to deploy that who’s going to manage that infrastructure all those kind of things Um, it’s great for complex applications because you can bring together multiple different apis into your your single page application and then aem effectively just becomes a content api So it’s just another you know, in some sense It’s just another api your application is using To to get its content and allow you to edit that content without having to you know, redeploy your app or anything like that um The the routing is then owned by the the application the dev team, right so you cannot dynamically create new routes in your in your spa like like danny showed with the regular spa editor because the the the routing is you know within your application within your application code you can’t just like Create a new page and how to expect that route to spam when they show up um, and and the last thing I would I would you know, caution you to consider as you’re as you if you’re going down this route is There are significant cores considerations here right because both you need to both open up cross origin from your Spa to aem and from aem to the spa so that both can request each other Through both the editing side and the and the delivery side um So there’s a little bit of complexity there that you just have to make sure you’re accounting for as you’re getting everything set up Uh, you want to the next slide danny Um so I mentioned that that I kind of like to think of this as Head full authoring with headless delivery, right? So on the left side here, you know, your content authors are still Accessing the aem author tier to do their authoring they’re going to pull up the the aem Page editor to edit your spa the same they they would with any other, you know head full or or spa application in aem And then that the preview version of your spa Gets embedded into that aem author tier to allow you to do that authoring through the component mappings with our jssdk Um on the delivery side though it’s it it’s Somewhat headless and that your your end user will access the production version of your spa And that will retrieve content from aem using model json requests can also access, you know Any other arbitrary apis you have and kind of bring that together into a holistic um You know holistic single page application, right? So So so that’s sort of the the contrast of the um of the authoring side versus versus how it gets delivered Um, so let me share my screen and we’ll get into a demo here One second Okay So Danny you want to show my screen is it showing up? Oh, hey, you know what I was muted sean, I apologize I was talking there um Uh before you jump into the demo, uh, darren had was asking about uh server-side rendering for for a spot I think he asked it when I was presenting about just traditional spot editor But I don’t know if you had you know some thoughts or wanted to talk about that Before we move into the demo Yeah, we can talk about that a little bit. So, um in terms of server-side rendering because With the remote spa because the the spa is hosted outside of aem um, you know server-side rendering considerations would pretty much be The same way you would think about it with any other single page application so you can use You know, you you can certainly server-side render your spa Using any you know framework or infrastructure you you choose to use to do that the one thing I would say is that The the preview side here. So the authoring side you would need that to connect directly and not be server-side rendered But on the delivery side you can certainly you know have server side a server-side rendering piece that sits here You know between your prod spa and your and your end users Gotcha, awesome All right, so, uh, yeah you want to jump let’s jump into your demo let me uh, share your screen sure All right, you’re sharing your screen go for it, yep So I already have the page editor up but just to kind of show you how this is set up. We you know, we have our um language and region Hierarchy set up like we would for you know any other site and then i’ve gone into the home page to start editing here um, and it comes up and You’ll notice that certain parts of this are not editable, right? So like this wknd here that’s Rendered directly by the single page application hasn’t been set up as an editable area Same thing with all of this content down here as I kind of mouse over it This is actually driven by our graph ql apis that amal will talk about In a little bit and is using content fragments, but this has not been set up as A piece that is, you know an editable component In the am page editor, right? so so you can imagine this being you know, any type of api whether it is the the graph ql api that we’re using here or You know really any other source of of you know, let’s say it’s a a commerce system and it’s coming from a pim api or something Like that, right? um But then in addition to that we have set up Um, this is a layout container that allows authors to you know add in components Um, so we can add in the text component. We can certainly edit um Other components and you know, let’s say we’re you know We’re lowering the discount amount or increasing it or whatever all this is is text editable and then similar Um with images we can you know, we can quickly Uh swap out the image if we wanted to so maybe we’re you know changing from summer to winter or whatever Um, we could put a put a winter image in there um So that’s that’s the editing and and you know, you’ll notice that we’ve you know, you can use use layouting you could certainly Um define your own custom components all the the editing capabilities that Sachin showed in his demo are are still here, right? But the the core difference is You’re you’re only allowed to edit in areas that the dev team has set up to be editable through the sdk, right? Um, so that that can be can be good and bad, right? It does You know kind of limit the the flexibility that your authors have But it also allows you to control that a lot more a lot more carefully and a lot more closely where you need to do Um additionally if we want to edit, um sub routes I can go into Uh preview mode and go to bali surf camp and you’ll notice that here we’ve set up a page for bali surf camp And then if I go back into edit mode Um, you know, we have another layout container here where we can we can edit our content So through the the the single page application all of these routes have Already been set up and they’ve been set up to map to certain content locations in am And then we have to go and you know create the page structure in am To to map to those routes which then allows us to edit that content um So there is a little bit of overhead that you have to take on in terms of you know Planning out where those routes are going to be and where the content for the routes are are but once you’ve done that Your authoring team has all the flexibility they need to go in and update and change that content as they see fit And so just to like hammer it home basically the dev team is going to need to coordinate and create these sort of uh Routable pages that the authors can edit an author is not going to be able to just ad hoc add a new um a new page or new view and have it be included in the uh in the spa with with the remote spa approach Right, exactly Um, so that’s it that’s it for the demo daniel hand it back to you so maul can Talk us through graphql apis and yeah, sure and I don’t I didn’t know I mean I think the other thing that sean’s not I don’t know if you want to show that like You’re pointing the am editor to a remotely hosted. Oh, yeah, I can show that Yeah, I go just sit because it looks like oh, it just looks like the same. I’m oh i’m just editing right? Yeah That’s a good point. So the way you map this this um remote spot page to your Your spa is through the page properties of the root of your spa And we’re using a particular remote spa template that’s available Um and in here I just give it my root url for my spa. So this happens to be deployed to adobe app builder um, which is you know an interesting use case but um You know, this could be any remote url where you have your single page application deployed and you just tell it where it is And then in the editor on the browser side it then makes requests to this domain To pull it in and uses all of the the mappings that have been set up in your spot to set up the editable regions Awesome cool. Thanks. Thanks a lot sean. I don’t know i’m all such and you guys have anything to add No, can you cover it? Nope. Okay. Yeah. All right. So let’s uh, let’s turn it over to emal. Let me uh jump back into powerpoint Thanks sean. So yeah, so now we’re moving into uh graph ql apr peer headless solution Yep, thanks. Danny. Um, so, you know with the explosion of all these different channels and you know Whether it’s websites or spas or mobile apps or chat bots or you know, the alexas and series of the world There is also a need to just expose the content out. Um Through json now we were always able to expose any of the content whether it’s the model of json Or just hitting content fragments directly through the assets http api Uh directly like deliver json through our infrastructure Earlier but now with craft ql It makes it easier to only pick and choose the elements that you need from a content fragment For example or start doing some more interesting things with references to other fragments Uh, and you know different content models as well. So in this case, it’s a pure headless solution where am is only Dealing with the content. So the authoring experience is like form based You’re filling out content fragments that are based on models. The models are just templates for Um the content that’s sitting in the fragments And you can you can have multiple different models and you can start, you know authoring all the content in am And the way to expose it outside of the already existing sort of json way is through use Is through using graph ql api, right? The the experience is actually built outside of am it could be a single page application another website Hosted somewhere else could be a mobile app or any Thing that can make a call to am and get json back essentially, right? So the delivery is still in json and it’s exposed by the graph ql api and we’ll get into that a little bit In the next slide as well. Um from a personalization standpoint, you know, we have the content fragment variations that can allow you to build different types of content for maybe different channels or different use cases or segments Of users, uh, and then you have you know, either target mobile sdk or the Ap sdk that would run on a mobile app for example or a spa that can pull in the content from am Appropriately so some of the considerations when using this Uh flavor of am is the modeling, you know You have to put in some thought in the modeling you want it to be based on channel or content type or usage Typically content type is the most uh sort of common way to do this where you know, you have a content model based on You know article or adventure or a contributor or an author? Things like that versus you know building it specifically for channel because the content type will allow you to reuse that content across multiple channels um, there’s a new um There’ve been a lot of actually new Advances with the content fragment model builder itself and one of the new things you can do is a fragment reference That means I can build a model for a specific content fragment and then reference some other model Uh from there as well So if I have an article I can reference an author if I have an adventure I can reference a contributor things like that Right, it requires minimal sort of am knowledge almost no code required. Everything is configuration based I think the only thing that you might end up having to do is updating the dispatcher configurations to allow a few URLs or to change the caching strategy and the cdn ttls. Um for caching some of your JSON persisted queries as well. So it’s perfect for mobile apps non-web platforms or externally hosted spas and websites Um, we’ll talk a little bit about persistent queries in the next slide Uh, we’re constantly because of the need for you know graphql being such a popular thing today um We’re focused a lot on on graphql api and we’ve built a lot of our headless capabilities around that Uh, and we’re adding, you know pagination sorting all of these features are coming soon as well So there’s a heavy focus on making sure that the graphql api is you know solving our customers problems So you want to go to the next slide tanny? So there are two flavors of sort of getting the you know hitting am for your graphql query One is the standard sort of post graphql query where you’ll hit am and it’s completely dynamic. It’s uh Since it’s a post call you’re not able to cache uh anything on the way back, but uh, you it’s a standard, you know query that you would hit am with It would give you back the json that you can use Another option is if you have especially for popular queries from apps or external systems that you know Um, you know, you need to expose you can save those queries You can actually just build them in am and save them and they’re called persistent queries And for each query that you save you can then have An endpoint associated with that persistent query and then all it would be is a get call to that endpoint Which would give you back a json that can be cached as usual as we cache anything else in am It gets cached to the dispatcher and the cdn layer as well So that gives you much more performance and especially for the popular queries that you might have Every sort of mobile app every time it starts it’s going to get something from am That would be a better option is to go the persistent grid query route uh, so with that being said i’m going to share my screen and just kind of walk you through All the different aspects of graph ql and am Yeah, so actually before we jump into the demo, let me uh, take one question from the the chat pod so a myth oh, let me see if I can Get this in there. So, um myth was asking about The model dot json and so I guess we should specify right graph ql, uh is going to have is its own Uh, json endpoint, uh, then in terms of custom, you know You can change what your graph ql query in order to choose which properties you get back, but you can’t really customize Uh further than that, right? It’s whatever the graph ql api is. That’s what it is Correct. Also, it’s not based on pages. It’s actually just based on whatever content is in the content fragment So when the model or json you’re talking about is like, you know The sling model exporter based approach which the spy editors used that is based on pages and the content you create on pages But for graph ql, it’s purely based on the content that’s coming from content and so in terms of um Extending the model dot json he’s asking about, you know, including some additional page metadata um my I think that you know, the approach would be Uh to extend uh, the um sling model that renders the the core component page. Is that the uh, the idea? Correct. Yeah, it’s all based on the sling model Yeah, sean. Did you have anything to add? Yeah, I was just gonna say that’s right. So you would want to extend the the sling model for the the page, you know Your core component proxy page model basically and then add in whatever additional data you need to expose through that model json and that’ll That’ll wire it right up and then you can use it from your spa Yeah, and I think the uh, it’s called the delegation pattern and there’s there’s an example on the core component github repo So awesome. Thank good. Good question. I mean all right, so We’ll jump in to a graph ql demo From mall. So let me switch Get your screen up here All Right, you know when you can see it, all right All right. Great. So the first thing, um, you would need to do is you know Go into tools, uh, go into the configuration browser and just make sure that whichever tenant you want to enable graph ql for The first thing is you need to have this content fragment models checked and then the graph ql persistent queries checked I think that’s the Basic thing that you need to set up. Um in addition You can go into tools assets and there’s a graph ql card here Uh where you can then create different endpoints so I can create another endpoint the only thing left I think there’s only a third tenant which is the spa react tenant and I can create an endpoint for that here as well Um, what this allows us to do is then create that initial endpoint where you can start hitting your graph ql, uh queries, too so let me switch to um The content fragment model so you get to this by going to tools Assets and then if you scroll down there’s a content fragment models card here. Uh, so i’m going into the weekend site That’s where i’ve set up some content Uh, and I have three different models. I think article is one that um Satya already showed contributor is a simple one that has you know, just sort of the name um bio picture occupation so another simple sort of Uh fragment model and then adventure has a few more things to it So there’s the title description couple of drop downs um There’s uh activities. There’s group size price things like that. There’s an image uh with the new content fragment model editor, you can also do a lot of um You know, uh Sort of validation out of the box to say that hey just only accept images or videos Uh in this, you know particular field and don’t allow anyone to just refer any content, you know So there’s a lot of useful things like that. You can specify the minimum or maximum width of an image or a max height or file size things like that that makes it easy to You know make sure that the authors are sort of contained in a box As they’re trying to create this content and on top you can see that there’s a fragment reference This is the one that I was talking about where I can select another Fragment model here to say that you can reference any content fragment based on these models So i’ve already selected contributor as one and i’ve given it a root path So this is how you set up the content fragment model, you know, typically it’s based on the content type Uh, that would be the easiest way for maximum reuse So what i’m going to do now is go into um my assets folder. I’m in weekend site english And i’m in the adventures folder. So i’m just going to go into one of these Folders, there’s a content fragment already here. It’s called west coast cycling. It’s got a bunch of content already filled out Uh, as you can see, this is just based on the same model that we just saw but this is you know The actual content fragment with filled out content sitting here essentially. So one nice Thing that we have here is or it’s a new sort of feature is a preview Functionality here which basically once you hit that it just tells you It just gives you the json that you would get if you just hit this, uh content fragment, right? So it’s got all the different, uh fields here It’s got the adventure type activity group size price all of that good stuff and details about the description and the html um, so it’s really useful if you were trying to just get the json out directly and you know that I want this fragment You can just hit that that endpoint and get the json out. But in most cases what we’re seeing is, you know customers want just a few You know elements from this json and then they want to mix it with other Fragments that are referenced here as well. So that’s where it becomes More, you know it Tells itself to using graphql more for that kind of an approach. So we have this graphical um, you know, um UI in am In am cloud service in the dev environment, you have access to this you just get to it by am By adding this to your url am graphical html and I have a few this is cutting edge, right? This is like This is new stuff. This is the new ui It’s only been out for a few weeks, right? Yep. Yep. It’s been exposed recently in the last build. So what I have here is a simple sort of graphql query Uh, we’re just trying to get a list of adventures based on that adventure content fragments that are based on that adventure model And uh, i’m just looking for a few things, right? So there’s a title price Trip length and then some details about the image now I could also go in and add something else and say, okay You know what? Give me the activity as well You know hit this play button and then you can start seeing You know what that result looks like. So this is the result. You can see that it’s giving me all my adventures that Are in the system and it’s giving me exactly what I want, which is only these elements I don’t want anything else from those fragments. They might have other content, but I just care about these things, right? Now let’s go into a little bit more advanced query where i’m now Trying to get elements from the contributor fragment that is associated with an adventure, right? So I have my adventure title and activity But I also have a contributor here and I want the full name occupation and the picture of the contributor So if I hit play here, you can see that it’s giving me the title and activity of the adventure But it’s not giving me any information of the contributor. That’s because I have not entered any information About a contributor in any of those fragments. So let’s go back to this west coast cycling I’m going to select a contributor I have two I think that i’ve created in the system. So select stacy and then i’m going to save Let’s save so now if I go back to my graphical, uh, ui and hit, you know, hit this query again, you’ll see that for this particular Adventure west coast cycling the one that I just updated You have the the title and activity coming from the adventure fragment But now I have the contributor information coming from the contributor content fragment, right? I all all I did was reference another important fragment called stacy roswells And now i’m getting the full name occupation and pictures associated with that content fragment So this is now getting into a little bit more advanced use case where I want few pieces of elements from one fragment A little bit something else from a different fragment that are tied together and referenced now this allows me to do that Now if you wanted to get a little bit more advanced I can say that give me the same thing as the previous query But I want to filter it based on certain values that are in my adventure activity So if you see adventure activity here, you know, there’s things like cycling skiing camping social things like that, right? So i’m just saying like give me anything that’s tagged with either social or cycling and let me hit Hit this run this query and it’s going to give me Only the ones that are tagged with adventure activity as social or cycling, right? So now i’m able to even you know get even more Fine-grained and granular and type in the type of queries that I want This helps obviously reduce the payload that’s going back to like a mobile app or some sort of an iot device And you’re getting exactly what you want without the overhead of Making multiple calls or making a call and getting a lot of information that you don’t really need Now if you wanted to get one level and even more fancier amal if I can I don’t interject here Rashid was asking can can I retrieve content fragments based on based on tags? Yeah, um I’m not I don’t know sean. Do you remember if uh metadata is also No, I don’t believe so Currently doesn’t allow you to filter based upon metadata of the fragment But if if you have a fragment field for tags, then you could certainly filter based upon those tags Right. So if you define your content Uh, and you add a field for tags, then then you’d be able to filter against it It’s any content that’s in the model really or in the fragment itself in the content fragment rather than exterior content So if you wanted to get a little bit more fancier and say that instead of me saying, you know hard coding social and cycling here, I want to Allow the sort of external application to tell me what they’re what they’re looking for. We can add a tag You know have a little method here a query method That’s passing in a a parameter essentially a tag parameter and then i’m saying okay, whatever this tag is Like I could you know, I could call it skiing And then pass the tag in and then it’s going to execute the query based on skiing. So now you should only see cycling or skiing Adventures, right? So this becomes a little bit more powerful where i’m now, you know, allowing the external application to pass in some parameterized values to these Persisted queries and the persisted queries just means that i’ve created this comment query That’s very popular that a lot of my external applications need and i’m saving it and you know You can get a essentially like let me pick this one you can get a URL from it I can go open up another Tab and you know, it’s just going to give me the json back essentially And this is something that I can cache all the way in my dispatcher’s edn all the way so that it’s much more performing um, you know if I published that Particular, uh persisted query I can also go to the published here and get the same JSON back from there as well, right? So that’s a useful thing. Um to know um the next thing is, you know, just sort of I have two sort of channels where I’m exposing this information. So let’s look at There’s a nice ios app that um Danny and bg and all these guys have created for weekend adventures So if I go in here and I look at like west coast cycling it has some information If I look at the price, it’s got like 4 500 usd um, similarly if I go into my um weekend site, which is just a regular site and I look for my cycling adventures west coast cycling And scroll down here. I see the price is 4 500 right now This is both these channels are using the same content coming from the same content fragment. So if I went back to my west coast cycling fragment, I go down and update this to 5500 usd And save that now if I go back to my page And refresh it Right, you’ll see that it’s updated to 5500 if I go back to my app make sure that it’s refreshed the data and then You know click on this you can see the 5500 being you know, uh reflected here as well So this is you know Sort of showing the power of when the content is centralized and it’s so you have one single source of truth and it’s modular in nature You have one place to update this content And once you update it in one place and publish it out all your channels get updated right without having to like go into each You know asking the mobile app developer to update this Information or asking the website developer to do something else asking a spa developer to doing you know for doing something else This gives the real power of you know The content management into the marketers hand so that they could quickly make changes and market whatever they need to do So i’m going to stop there for a second and see if there are any questions and hand it back to danny Yeah, so I mean you can keep sharing if you want but I think we had one another question So graph ql is just going to be exposing uh content fragments. There was a question on um Experience fragments. Yeah. Yeah. How do you expose the experience? Yeah. Yeah, so I don’t know Sacha if you want to take that Yeah, I think as amol mentioned content fragment so graph ql works with the content fragments For experience fragment. You still have to rely on the dot model dot jason and expose that content We have we had a couple of use cases in the past We’re exposing the experience fragment based content and they were leveraging on the mobile apps That’s the way to go down anything to add amol or shawn I mean i’ll also throw out, you know target. Um, there is like a built-in integration With target so you can export your experience fragments directly to adobe target And those will come out as as target offers. Um, and so if you’re using adobe target for personalization You know, you can manage those different personalized experiences As experience fragments, um, and then just use the target engine, uh, you know to dynamically display them And so that the target engine is going to work, uh, you know with the html, you know website based, uh application but then there’s also Features to to make it work with a spa or a mobile, uh mobile app using the target Web mobile sdk Um, so yeah, so that’s another option But uh, yeah, so hopefully that that helps answer the question I see a couple of comments on the chat board. One is, uh, someone asked about history. There is a nice history icon here that kind of shows all the different queries that you have that I was testing at least Um previously and then the ones that are persisted only the ones that i’ve saved and you know If you publish them that’s available regarding invalidation of cache. Uh, it’s you know for persistent queries It’s like json being cached in your dispatcher or cdn typically dispatcher and validation happens when you publish something and then uh, The cdn is typically based on ttl So if you set a ttl based on whatever use cases you have whether it could be long or it could be short um, you know the next time the The request comes in it will come back to the dispatcher and publish to pick it up Yeah, if I can just go ahead Yeah, I would say if I can just add to that persisted query cnn validation stuff part of the precision query definition is also The cache control headers. So when you save your persisted query, you can set up a certain persistent query to cache for you know a minute or five minutes or an hour just depending upon The frequency of the data that underlies the persisted query So so typically we recommend you do that and then you rely on that Cdn invalidation and auto and auto revalidate that kind of stuff at your cbn To to keep your data fresh Yeah, and I think that’s yeah, that’s definitely the approach Uh, because you know, I think maybe with page-based am applications, you know You would publish out the page and that path would get uh, you know Just that path would get invalidated with content fragments, you know, if you just published an update to a content fragment It you know, it’s it’s at a different path, right? So, you know, you’re not going to rely on the Traditional like path based in validation at the dispatcher Instead like what sean was mentioning you use the cache control and the ttl that’s just going to be It’s just going to be easier to manage for you in general So Correct and there are and this is not the only way to create persisted queries. This is just through the graphical like ui but there are uh, you can make you know, a rest calls to actually create query there’s a Headless sdk available for both javascript and node and You can use that as well from your node application to create Persisted queries and then I’ll pull the list of queries from again as well. So that I think I put in a bunch of resources in the last Slide of the presentation danny. So when you share it Those are useful as well to kind of go awesome Cool. Well, um, yeah, we went a little over time. I think most people stuck around so really appreciate that uh The uh, yeah, like I was saying the replay will be posted on experience league.w.com as well as the slides um Let’s see here. Uh, one last question is the Graph ql explorer that you were showing them all is is that cloud service only right now? I believe so. All right. Yeah I think there’s a package for six sides, but it doesn’t contain all the latest features yet. Correct. Yeah I think going with like the Current, you know sort of aem in general delivery model It will show up in cloud service and then be delivered in a service pack for uh, six five, you know, uh You know next quarter Awesome well, uh, yeah, thanks everyone for sticking around. Thank you guys for agreeing to join, uh, join the stream and thank our presenters um All right, let’s we’ll take one more question, I don’t know can parameterized query be also persisted based on its response So I believe that’s true, right? Yes, correct It is any persisted queries would basically come through a get request. So when you pull that in as long as you’re caching Those URLs you’ll be fine Um, cool, there’s another uh question about um pagination and sorting Uh, I think we don’t really have a timeline on this It’s coming soon. It’s one of the hot sort of items that uh, we’re expecting pretty quickly Um, but obviously I can’t give a date out on a live stream Well, they know your name they’ll track you down i’ll just do that date Um, but yeah, no, I think it is definitely a high priority There’s a lot of investment in in the graph ql and making it as robust as as we can. So, um, yeah stay tuned Uh, awesome. Okay. I’m gonna end the show now, uh, really appreciate you guys and uh, yeah, thanks again everyone and uh, Yeah, hope to to talk later and um, yeah, we’ll see you see you on the other side Thanks, honey. Thanks everyone. Thanks for having us. Yeah You