Adobe Experience Manager as a Headless CMS - Where/When/Why?

Transcript

Hi everyone, so thanks for the opportunity given by Adobe. So I am Vindesh, I am working as a technical architect for Adobe as a platform in Katarawe’s commercial. So predominantly handling the platform for Katarawe’s.com, loyalty websites and many other B2B websites as well. So I have 14 years of experience in content management including design, solutioning, architecture as well as a lead developer as well. So today like what is the context of this particular topic is like we are talking about headless, head full and we do lot of development in our traditional way of like doing multi-page applications and now the evolution of single page applications is more and more evolving. Like what are all the available options within AEM and when to use where and how we can progressively develop single page application in terms with the help of AEM. So there are few use cases that we have developed, so based on that experience I will share my inputs as well which might be helpful for you guys. That agenda is like we will focus on what is headless and how we are currently developing, how it is differ, what is pros and cons like do we need to completely move to SPA or still traditional is valid for those questions I am trying to address it based on my experience. Where to use which approach like traditional where still in the evolving world as well as SPA where it can be applicable and using specifically on content fragments and how it can be used for different use cases. There are few learnings we got it through SPA editor when we are implementing an angular application so that is also going to share. So normally like what is we are talking about multi page versus single page. So as we are all aware like few guys are already working on AEM. So AEM you create a page where page binds to a model where the model will resolve to a resolver where the component will be get all the values from the GCR properties and then it will push it to HTML or something to the browser. So this is a traditional model where it is a multi page where in this case like every page loads all its content will be fetch again and again whenever the pages gets loads. Like the single page architecture will work in a way that it has its own AEM as a separate box where single page application will be a separate kind of hosting might be. So in such cases how it will work is like the model which is responsible within the single page will take the required resources from AEM and then our sling models can convert that into a JSON as a response using model.json or something. And using that model.json it will like where we are doing a mapping between our component to that JS component which will take that particular content and then deliver it to the client. So that is the very high level process how it is going. So when someone is hitting HTML and it goes to the angular controller where router in our case so the router will fetch all the model to get the resources and our resources will resolve to our slick model and that is what it is giving us a JSON response. Then the model will identify from our JSON response which content to be take and inject to the respective component as a resource and that component will inject the HTML and send it to the browser. So that is the overall flow. So in our view based on our experiences like what we think is if your website you are building based on an architecture where it is very informational heavy where it is always a one day interaction where the customer is just coming and visiting your page for an informational site and it is predominantly a content driven and where SEO is playing a major role for your enterprise like you have multiple SEO engines like Google, Bing all those engines that you need to support in such cases multi page application is still valid we should go for that and where you have a two way interaction where a customer interact with their application and you are responding to them and they start further interacting so more of like an interactive kind of a nature or a transactional way of nature and you need much more rich customer experience as well as like a faster time load so that in that kind of interaction heavy websites still single page application is valid. So in terms of page load if you see like as we also mentioned saying that like every page loads it keep request for the resource and objects everything will load as an individual objects so it will start like if you go with HTTP 2 or HTTP 3 it will still it’s good but still further loads will consume by the bandwidth. In the single page applications at the first time of page load itself you will request for all the resources and then for based on your interactions that lesser load will traverse further so that is the major difference between the time of loading between the single page application multi page. So that is kind of like how it sits in a higher level architecture I have placed it so normally like in a multi page environment you will have AM and you have AM libraries as well as AM pages everything sits within an AM and in here the majority of the benefit will be authors plus users where both have a contribution towards your AM so they will interact with this layer right so your AP gateway will be outside where here if you see in single page we have two kind of an architecture we are seeing where it is like SPA editor is one concept where you have an SPA container within an author and SPA editor framework will be responsible for doing an in context editing which is more of like an authoring focus where you are giving your super authors or authors to give more context about your transactional applications when they are editing the content but if you think saying that okay my author is like okay to have a form based one in context editing I mean I am not going to much worry about like authoring experience where I will go with an user’s experience much more and more in that scale we can go completely headless in such cases AM will be a headless content where your AP AD sits outside and your SPA will be sit outside of AM so this is this is this way like you can choose between SPA editor or headless or multi page based on the your use cases so predominantly now we are focusing on the single page development with the terms of headless so headless will be applicable for single page SPA editor as well as the pure headless as well so we are focusing in this area so what is available options within an AM so we are with terms of headless we are having HTTP API available in using that you interact with content fragments and then directly interacting with the dam operations remotely so probably this API will be like more recommended to choose within authoring interfaces where you have an admin screen or something where you put a code which you can write it to AM for further translation and then publishing to the production so content fragments is more of like a structured content where you can reusable reuse this content including you can create variations and cater to different channels for different API deliveries as well so experience fragment is also a sideline to content fragment where it is also controlling your design which gives more in context editing where you want to share it as like to input it to target or input it as a JSON as well so those are all the options available with experience fragment content services I think many of us are already using it in terms of servlet or content exporter where you will bind your content fragment into a page and you will present that as a page as an exporter content right so other way of using headless is a sp editor with JS SDK I think like it will provide much more author focus like rich user experience where you will have an index in context editing kind of a thing so now as a best practice like Adobe is more and more pushing towards GraphQL which is like you don’t need to write servlet or rest services every time to change your surveys in order to cater to a new requirement right so you will create a structured content as much as possible and using a graphical queries you can form query and pass the parameters to get the content so in this session like we will slightly deep dive into this box areas on normally and then I will take you through different use cases that you can cater using this. So as an experience and as I mentioned the thing that like a purely headless like with terms of content fragment is our focus like what are the different options in that it is available so we are having as an exporter or servlet you can expose content fragments or using an HTTP API you don’t want to develop anything and you want to like for a smaller use cases you want to expose that content as a JSON yes there is an out of box HTTP API already available and you have a GraphQL as well to query the content using the content fragments so predominantly like how it will be like you have a content content repository so core components can also use content fragments and then deliver your content as HTML using cycling or the same content fragment can be accessed as an asset API and deliver as a JSON or the same content fragment using a content services and then deliver to either a single page or mobile app so there are multiple ways based on your requirements you can cater it can go as a multi page or it can go as a single page you can decide based on that but still the content can be still the same you can create content once and reuse it in your website as a using wire core components where you can deliver the same content fragment as HTTP API or your content services and deliver to single page applications or mobile app for a different channels so sling exporter is as we are talking about content services like normally sling exporter comes handy which is an HTTP web framework which is provided by Apache sling so what it is an extension to the sling model so whenever you are creating your models like you can actually also like think of extending any component into an exporter so that like it will be by default available as a JSON where you can leverage them so it is providing a mechanism to serialize JSON I mean it will provide a serialization JSON as well like us like a graphical kind of serialization so sling models like you create a content you write a sling model write a purchase for that anyways right so sling models you will write and you are having an out-of-box Jackson package which will help you to export that content into a JSON as well so this is how normally like this is the framework which is available I’m just giving some inputs to you guys so it can result to a resource type always like sling exporter requires a page or a resource type to be resolved for it it can it can be a content with your selector or it can be a page to your selector it’s it can be servlet or a page some resource resolver has to be resolved for it and then you can export those properties into a JSON so normally like a selector kind of a thing so in our use cases I can show a demo like I show you like how we are using this right so in our use cases we create a content fragment model so we will create a lot of content fragments so there are some personalized use cases we have implemented using this by kind of solutioning so I’ll just take you to a demo quickly okay so our use case is like say it’s a multi-page applications where so a simple carousel component so our personalized use case maybe some someone comes to the website for an anonymous user you see a default content and if someone is logged in and they are belong to platinum tear or gold tear or silver tear we have to show different content in terms of how different users right so we have to create a context-based version so instead of like going with a traditional dialogue model we choose content fragmenting comes with a handy so if you take a content fragment so you just create a fragment out of it a fragment may have like a title rich text image content and you can create a model out of it and you can create a variations out of it your default content can be your master your burgundy content is burgundy data silver data the gold data right so you create a single master and you create a weight multiple variations towards it and then what you can actually do is like so I can show it here itself so just put a platinum it will take the content fragment from the platinum variation and it will show you put gold so yeah so if you take the authoring piece of it it will just you have to just mention the content fragment master that’s it right so this is one of the use case so what you can actually do is like you can write a simple so that extending the content fragment interface so I think like when we are developing it at the time the the API interface having little functionality where we have tried to query and all now I think if you refer to the to the API guides I think a lot of a base are available that you can get all the variations in one shot as well as associated contents so I think I’ll just put you into the chat for your references so what we actually do is like we will get the content fragment and then based on that path we will query the variations and based on the selector whatever it comes we will fetch the variations and then we will return to that so that is how it’s been written so if you want to send the same content to the mobile app or the SP application as a JSON we just need to like get via directly the asset API itself and expose them it will provide you with with all the content including your your variations so same content for mobile as well as same content for your desktop so you can maintain your consistency of the branding so this is one of the use case we can do so someone is logged in as gold and you pass the context and get the respective variations and so that the other one is like the second kind of an use case is about say consider this is for a website where you have a head full content as well as headless content where you have something like a mobile app or single page applications where you want to have a different screens like for example home screen you have when you have a checkout screen and you have confirmation screen and then you will have the final screen right so there will be five screens you can still use content fragments like and you can categorize and bind it to the page for example consider as a home screen so you will create first the the content fragment models as a structured content so so you have a language specific folders and you can create the entire structure of your site into an individual fragments right for example header I have header itself I have five to six services and within the single header component if I edit this yeah so I have like placed each and every of the content fragment as a multi fields and then refer to that and this is one single header which I have logo and you have profile logo and then if you go to specific content fragment services is this is the one I linked it to the associated text so you’ll have header button label all those things like you will drag and drop into a page so for example home page so I have a header and multi fields like these are all the linked content fragments and then you have a widget time so you will build a page like you categorize the page and whatever the page is required like error procedures to label skill values all those things which is required for that home screen you can drag and drop as a content fragment like you will place all this content fragment and then we will consume this as a service it will take all the content from all your content fragment which you are linked to it and then give all the content related to the home page in one JSON so it is better than exposing the API HTTP IP directly because that is having a lot of information which may be your best place to use it in author rather than publisher so in such cases you can write a small exporter class and then using a content fragment interface and you can do lot of things so if you go with HTTP API for the authoring thing I think there is a lot of resources available so you can use this and then you can create the content fragment you can update the content fragment you can create a variation dynamically from third-party application itself so for example you have an admin screen you want to add some content into your admin screen where you want to create a reference inside here so that your authors can manage the translations so in such cases you can HTTP API in order to create your content fragment and manage the full cycle or a full cycle. Right so that’s it with the content fragments how to manage it. Yeah so second thing is like like SPA editor so angular applications as I already mentioned like you have three people will be involved in your normal SPA editor you have authors like for example they will manage only the content related to it so you can relate to the first diagram which I showed and the AEM developer will be responsible for writing the sleep models and dialogues where the front-end developer will normally manage the functional logic of the entire content so how these guys will sit together is like there would be a heavy interaction between the AEM dev and front-end dev he will share the proxy JSON or mock JSON to him so that like he can build the website there in terms it meanwhile he can build the exporter as well as the JSON for them so this requires an SPA editor has to be inside the framework and front-end developer has to understand the SPA editor framework slightly in order to support the angular application or to interact with AEM right so that is the one main challenge that we are facing where you are you have to your front-end developer has to be flexible enough to understand this library and get used to it so many many occurrences what we also facing is like that will be a hesitant from a front-end developer or AEM developer has to turn to a full stack developer so that’s a learning code required there right so I’ll just show a demo there how we are managing it okay so you have flight status applications full angular application so these angular applications you are having it to say like status you search for say what lecture yeah so if you see here so based on the angular model that is on it will be retrieved so how this flow works that we have to understand how it sits together so you have a flight status angular and you can create your site structure with the languages and all those things so you have a and flight status languages so how this we we can implement in terms of angular application so you need to specifically mention your few libraries where you will mention your root URL which is your context URL the path of the application in this case it is flight and search right is the angular this is your context flight and search so you can you can based on the routing URLs which is coming from out of your angular application you can build the page path here and you decide your which is your route it can be route it can be this or it can be this that you can decide once the route is defined from that route what are all the child pages are all there all this content delivered as a JSON that is that is what like well we’ll mention here saying that this is the route and this model JSON is my is my parent path completely so whatever comes under FSA as a path all the pages and sub pages or child pages will be taken and then inherited into this model dot JSON right once you do that then all your content will be available in your angler model dot JSON and then you can start control your components say for example so so all you need to do is just you will write a dialogue there and then you will mention only the content the functionality of the entire application will be managed by the angular search right so there are few challenges we are facing so here in our case like we are using redex and then like we the editor mode as we are not passing the redex as a state we might need to show some default content for in context editing so there are the logic we have written a little bit customized in a way that like you have to include the editable components as a library and and then you will map to the component which is inside the once you map the component then you will tell saying that if it is if it is in the edit mode you will present some default content for the in context editing if it is not edit mode read it from the services and get the injected content from the angler model dot JSON so you can manage the conditions accordingly so it is already the API is giving you a flexibility to identify what is it it mode and how to customize it the another good thing of it is like the flow wise I think it is good you guys understand the flow so whenever you hit the angler applications so maybe a language you can pass dynamically where your angler router can take the languages and then you can search within the angler model dot JSON and get the respective language content right so it will resolve to the index dot HTML that index dot HTML will call our AM SDK angler SDK to identify what is our page root URL and then once it identify the root URL so the JSON so that you guys understand better yeah so for example if I’m in Arabic website so this is the context path it will try to understand and rather if the context path is matches with this path then it will directly identify which are all the items under it and then it will start taking those content sorry yeah so for example it will take the items under it and then it will take respective content out of it yeah and then we can define an items order so that you can play with the layout so those are all things that you can play with so this is what I am telling so here it is comes it will identify the root path and then it will request the AM server to get the angler model dot JSON and then the response it will identify whether that tree the routing model matches with that path if that path is not available whatever the context path comes in that path will be requested to here so in such cases what you can actually also do is instead of putting all the content there you can also write your own custom logic within an AM so that’s the resource resolver path right so you can deliver something else as well if the path is matches with something else right so it is not always tightly coupled with AM SP editor and angler model dot JSON you can also your custom logic if the party is not matches in the angler model dot JSON automatically you can make your proxy conf to point it to your AM server where it can deliver a different content or it can even result to a servlet as well right so that’s the only point I want to mention so that you can use that as well so that’s it on my side I hope that would be useful and you can use this QR code in case of you have any queries any specific QA yeah we are maintaining UI dot frontend to have the leverage the pipeline so it will be like used as part of the maven build itself so I know you run a maven build it will take the client libs conf and then it will copy to the UI apps the respective folder so that authoring have an interface to get those files so to create a component you need to create headless and you are not front inversion yeah for any speed editor yes that’s how we need to do it like for example that’s what I told right is paid that if you go into that equation you also have what say like you have to understand the front end stack as well as you have to understand the big picture of it where you need to put your source file inside UI dot frontend or I think in the cloud services that’s the best practices where it is providing out of box frontend pipeline dedicated so you can keep it outside as well if required maven that is plugins are available where you can do a lot of things that it is not always necessary to have it under UI dot frontend as well so you can have it a separate pipeline as well yes we are using a speed editor for certain applications as an experimentation to get some learnings and we are also using exporter as well for few applications yes we can create very well like copies via content fragments I think that is the one of the future for the translation so you create a lot of content one good thing of content fragment is like you create a content you publish the content then it will automatically like clear the references as well unlike an experience fragment where you need to write an extra code whenever you publish an experience fragment you have to collect the references of the page and then manually you have to clear the dispatcher see if the headless the the beauty of the headless is like you create a content a structured content yeah forget about whether it’s headless or head full you create a head structured content which can be a content fragment you can use it for head normal traditional am website including slightly as well using a core component and you can also use the same content for SP so it is always not necessary or a myth saying that like you should always bind okay headless means SP no it’s not that way like so that’s a myth in mind so content fragment so normally like the best practices going forward I mean Adobe is also pushing towards it saying that you create as many content fragments as possible that’s why like Cedric also shows in the first slide saying that like there are 50k or 50 million content fragments has been created so you create a site taxonomy in terms of content fragment and then you will decide based on your use case as I mentioned in the first slide whether it is a multi page or single page both are applicable in my view it is going to be ever and you can choose how you want to do it yes content fragment do have a message of MSM support yes it does have it started giving from I think six dot five dot eight I guess you can use publishers as well to host your your SP application as well right so normally what you can do is like you generate the pipeline but do not like run with no J’s and all but take the output file and then you can place it under a and map it to a component result to a page right so that’s it you just need to add the client leaves of the output generated file and then map it to there I think you can run it from a EMS there is there is a way to do but you can do it still okay that’s it from my side any other questions I think few questions coming in it is like SP editor is like an is an SDK provided by Adobe so it is has its own API it is not like just to place a J’s and it work that kind of way it requires some learning purpose yes I mean I the currently like it is widely used the the SP editor SDK is with react as well as angular I think there are ways in the documentation I can actually provide it from the contextual thread if I have some time there are ways you can do for other popular frameworks as well like connects JS view JS and on there are implementations already done within an aem using you JS thank you guys thanks for your time and thanks for the opportunity I hope like this is useful you can use it for many use cases as well I thought like today too many graph QL so it might be a different issue for you at least thank you thank you all