Build websites faster with AEM Headless and App Builder

Transcript

So free to start Perfect. Thank you Hi everyone. So welcome to our am change section today about building size faster with headless and app builder Doing win and was software engineer in the am size and screen steam Focus on developer experience We are working on building a new Developer experience for am size and This section I also presented last week at Adobe Summit together with Sean Steimer and Today together with me will be the team with Ron Leggy Stefan Ringen JU and David bench who are available in the chat. So feel free to post any question over there That Is the menu of our section today we will first touch base on the overview of am headless and SBA editor if That is your first time hearing about them and then we will go through the best Matching your content by SBA or headless Depending on your use cases and finally we will see through the demo The process of quickly creating and deploying an SBA using Adobe developer app You know and am headless Am supports various rendering modes In the full stack rendering pages are managed by templates and components The components are written in Java JavaScript HDL and Render to HTML documents to be consumed on the client side with headless rendering the application layer is decoupled from the content layer and The interaction between those are via JSON API whether rest or RACQL API You can reuse your content easily across channels could be a single page application mobile application Or any other client side JS app These are the two ways that you can manage your content in a single page application The first one is by using content fragments with RACQL API That is the full headless experience so your content is fully decoupled from the application The content is form based. So you define the structure of the content in content models and The content itself is content fragments. You can deliver them to any channel you want in JSON In the remote SBA you will still get the what you see is what you get editing You can add edit drag and drop remove the components in the visual editor as you’re doing that You will see the same thing as what your users will see Sort of a visual preview of your web page, which is nice Let’s Briefly compare the two and see When you you might want to use one over the other When you build an SBA, you don’t need to just use the SBA editor Or you don’t just use the content fragment RACQL API There are use cases where you you want to compare to combine both in your application the content fragments are form based editing because of that it’s a lot easier to reuse that the content across channels web developers control the design layout of the app and the content fragments that you define might slightly influence the app layout but in the end That’s just JSON data and the app is viewed by the web developer decides how the content is displayed and what to do with it and Then the nice thing is that there’s no a am development skill required for Raffia From the defining the content models creating the content fragments for the models as well as Exposing via Raffia API of that already built in am and Require no am development that you need to do There are two scenarios where that is the best use of of content fragment Raffia well, the first one is when you want to reuse your content across various channels You can write graphical queries to to get specific segments or subsets of your content needed for a given app this is the reusable nature built in am headless and Then in the second use case where it is a nature of fit for your your data Is when it is highly structured so you can define your structure in advance and then manage it easily with am headless The remote SBA editor on the other hand brings you the What you see is what you get editing? here the marketers have the flexibility and Control over how the design and layout should look like What should go where? As I say before you select a component you add it to the to a parent container or Take out and replace by another component Of course, this is managed Well, it is supported by by adding hooks to the application to define that the level of what and whatnot editable by the content authors It does support both core and components and custom components There are react angular libraries of core components that you can leverage from Some some use cases require you to go beyond The core components with additional custom components. You can also write those custom components in react map to the sling resource type in am components and Then use them in your SBA which is editable in am remote SBA editor All Right, so let’s switch switch gear a bit into how we use Adobe developer app builder to create those SBA so app builder Empowers developers with with a complete framework to extend and integrate with Adobe experience manager We achieve that with a cohesive set of tools and services That enables you to deliver personalized consistent digital experiences in Developer perspective that means no more five hours of setting up a new app with all the Maven dependencies Instead you will see in a demo a bit later how quick it is to be when you up To be a new SBA from scratch in less than 15 minutes Starting from creating project in the developer console Bootstrapping the app in the CLI and then run code in your favorite IDE and finally deploy the application After the SBA is deployed and ready for use you can wrap is URL Configure it as a remote SBA in your am page and then be able to edit it in the remote SBA editor Alright, let’s move on to the demo and see all of that in action Here I will start on my on the website Adobe developer and then next you will go to the developer console And Then on the developer console you would select the MS all That you want to create your application So I go to Adobe IO And then here there’s an option to create project from template We have app builder here Just name your project title as well as the app name. So that for the project title, I would just go with James and the same as app name And by default the project the template Project for app builder comes with two workspaces one for production and for stage purpose you can also add further workspaces according to your team setup like the Left one left two or QA and any other workspaces and it’s of those workspaces Come together with an I’ll run time namespace that allowed you to deploy your Your app onto I run time so I Define all the fields. I’ll just save it so that the new project get created All Right, so as the project is created As you can see before we have two workspaces for production and stage for sample. Let’s go to stage and You can see that the runtime namespace is created for this workspace by default Now we have the project set up in the developer console We will go to the terminal and try to Create a new application based on app leader Here I will use the AIO app login In it and the name of the application In The first question you would need to select the IMS all you want to create your application with Next you will need to select a project so that the application is interrayed with on the Developer console and we just created the aem chance we go with that and In the next question you need to select an extension point that you wish to implement for the in the in the application in You can select standalone application which just contains some sample runtime actions to be deployed on I run time You can also Select the SBA implementation to be deployed on experience cloud or asset compute worker not to be deployed on Well to extend access use cases In in this demo I will wish the SBA And Next step you will have a new application Generated from the template as well as all the dependencies are installed To your to your broad to your project We don’t need to wait until that finish, but I just quickly open the project in vs code So This is the source code of the of the app, which was just rated by the COI to As any other no chess application we have one Phi called practice location that contains all the metadata of the app including the name the version all the dependencies scripts and so on so forth and Then for any Application graded by app builder you will have an app config yaml file that List all the extensions of your application. So here we have one extension for for the EXE shell SBA So we have it the reference here And if we go to the reference to the source code of the extension There are more metadata about the operations the action well the action folder where you you put the source code of your of the actions and also the folder of your your UI code and the manifest of all your runtime actions For example here we have one runtime action for generic which just return like some Which just return the standard API Information of our runtime And then here we also have the require other be off a scroll which means that this action is Only accessible if you provide the authentication header in your request Let’s just go ahead and try to run this Sample application. I will open the new terminal here And what I will do is I will run a I all app run And Then what what what’s happening with this comment is that all your your actions yeah, your back your back end actions would be deployed on I runtime and And then there’s also a local environment for your for your UI app so that you can work with Here we can see that the local application is is deployed so we can go there to check out the application We have some pages for the app, let’s go to the second page and try to trigger the sample Runtime action generic and I just invoke it and Here we you can see it Error out saying that it cannot authorize the request because we are missing the authentication header and as you If you remember before in the code we had Require I don’t be off a scroll Which requires the lion to pass off head out to the request? So let’s try with the second URL with open the same app onto Adobe experience cloud shell So here you can see that we have exactly the same app with the Experience cloud shell on top which means that it is the app Open within the Adobe experience cloud and then we go to the exact same tab as before we also run the generic action And we invoke it and as you can see now we have the response as successful because the Adobe experience cloud automatically attached the off header to the request and That’s why Our call here can be authenticated by the server So that is all running now let’s let’s fast forward and Say that I have another app here Which would consume some am later from the content fragment API as well as some page model from from am and let me open the next the extension config yamo You also have some operations some app hooks and here we have one runtime action to call am headless API and Get the graph QL query results to this to display in the in the app and Then this how Well, it is what the UI basically contains We have we have some components Well some react components that Represents am components We have one components for for responsive grid to to display the The content from our homepage and then we also have a title with would render the title from am and then we have Kind of a large component for adventures with basically Display all the adventures from the content fragments Models that that we get from am headless So Now I have several environment variables five here to Explode it at this app now. We are in death. So let me copy the environment variable for death and Then we try to run it And we also use a I or a run And yeah, as Mentioned before it will deploy the runtime action onto our runtime as well as set up like a local environment for for you to to work with the UI All right, so now we have our local Application running now, let’s go to that on the localhost 1980 And Yeah, you can see that on the top here we have the responsive grid that Renders the page model from am and then below we have all the adventures return from from the am headless API and There are also different filters that cause Different rough here queries based on the type of of the adventures and then when that is You’re happy with with the app now, let’s try to deploy it onto stage so so that you know, not the content author can take it and Edit the content in the page So I will copy the environment variable for stage And Then now I will use the comment a I or app deploy and What this comment does is that it will deploy like all the runtime actions And then it also packaged the UI code into into a web pack build and then deploy that to to the app view the CDN So that you can you can access it publicly or you can also configure it in the am editor Okay So now that the app is deployed we can go to the URL of the deploy app at Stage under we are static net and As you can see here, we have all the content fragments return However, there’s no image as well as no page model because we are currently opening it outside of am author so Let’s copy this URL and to am to configure it in our weekend app home page So I just select this and then open the properties of the page we go to the SBA and then set it to The URL that we just have for for this Thought for the app on other be I will say the cutnet and I’ll just click on save And then let’s try to load the SBA editor All Right, so as you can see now we see the same app as as we were in the in the development mode before with the with a responsive read on top and The title which is currently empty and then all the adventures Below so the adventures are not editable because we we have them as simply normal react component But you can edit the content on on top because that is am responsive grid Which is already mapped to am components so let’s say we want to edit this title to be spring as we are in spring now and also, we want to change the Image to look a bit more like spring Let’s randomly select this one All right, and now that then the new content is safe let’s Close the SBA editor and we try to pop 10 So why the publication process is going on? we will also try to deploy the The react app here to our production workspace which will Integrate with the published version well with the published instant of am so that it consumed like the Content from from our am publish So I will just copy The environment variable for production And I put it In the environment and then we will run the same Comment as before a a I or a deploy Here I am I’m running it, you know locally in my Eye but you can imagine that you can set up a CI CD pipeline to know this this works So for example when when the code is is much to to man then you can deploy to stage and then later After stage is validated successfully. You can you can have it promoted to production Kind of thing like that Okay So now that the app is deployed on production, let’s try to open it It’s possible that the new content has not been Has not been fully published yet, but we will see Okay, so you can see now that we still see the old content of the page Some sometimes I will need to open it in in the developer mode so that all the cash is is flush And then we can try to refresh again Okay. So now that I open the developer mode or the cash is gone. And now we have the new content published and you can see now we have the spring as well as new image on the page So that is the end of the demo let’s go back to to the presentation Alright so I’d like to recap the three key takeaways today Firstly, you could see how Adobe developer app builder enables developers to quickly bootstrap and Deploy the single page applications that can be altered in a EM editor And Second marketers keep control over the application content worrying about code sorry, and Then cut they are supported by the wizard with anything capability of a em remote SBA editor So Why not getting your hands on today? Register for the trial access using the link on the top right corner all with a QR code and There are also a detailed documentation of app builder videos and and stream cast available on YouTube medium blog posts the serialized including the the plugins and SDKs open source Just check them out For developers nothing is better than something directly with the code So we have code labs demonstrating step-by-step instructions you also find sample apps showcasing various use cases from customers and partners and If you have some question about app builder, please leverage the support forum on experience leak So As I said before we also we had this section at Adobe Summit before So feel free to check it out together with other sections Related to app builder and am headless. Here are a few more links For additional resources on app builder am headless SBA editor, so check them out We might change the chat box as well and yeah, thank you for listening and We’re open to any question you might have Great thanks a lot duty Yes, we do have some questions for you. So One is is there a way to modify or replace? am SDK for SBA with custom implementations Yep, that is possible because in am we You have the am editable components SDK and Now that allows you to to map your Your react components to the am components. So basically you will You will write your own custom components by leveraging the editable components and then map to your sling resource type and Then after that you can use those components in your in your react app Okay, thank you the next question is As You are providing next JS templates already So is it not yet supported or is there just no starter yet? right so that next JS is is actually One of the major things not coming up in the industry and and yeah, we Our team is also working on supporting it for am so stateful for for you know New new features and support around that Thank you, the next question is where do we set up proxy for production environment? Okay, so I’m not sure what proxy that is about But if you are talking about like am proxies then as I showed you before usually for authoring mode Authoring mode you have like the the stage version of your app like connect to to am author and then you can you can use the developer token or JWT token to to Attendicate a request and then for your production environment you can use You can use publish Instant of am to connect to your production app Okay, thank you Sharad if this Answers your question, then it’s fine. Otherwise, please follow up on that The next question is where would we define the DNS for the domain? Oh Oh Okay, so if you mean the a the Adobe IOS edit dotnet domain then that is currently for for development and stage so for production you can leverage the the the CDN from From skyline. So I am cloud service I think you can configure like your custom domain. Well, or at least that is that is in the in the roadmap that has been communicated by PM I guess so yeah, basically, you can for production you can leverage the Am cloud service domain from from from plan manager Thanks Thanks Dewey next question is is views view JS supported So Well, there are there are many layers on this speaking about the editable components currently those components for for react and angular only We were certainly interested to know how many people are they interested like wanting to to work with view so that we can We can start planning for that currently we don’t have any support for view for the moment and speaking of app builder Currently we have template for react But you can run like any application you can run like angular app or a view app or spelt and Yeah any other app so Let this be much free for you to deploy the app there Thanks, how is rooting handled within a em and the SBA Right, so that is a good question for the SBA a Has the Well, so when you use the am editable component SDK that support the model manager and and one of the manager takes care of like Loading the paste model according to your to your am content. So Yeah, you can You can check out the example Well Go around did you share the link to the example of am headless and you should see the example how how the path is It’s configured and you know routed in the SBA Okay, I will do so shortly let me Go to the next question before though, do we need separate CDN caching for apps? Well, yes and no so I Guess that it depends on your use case if you want to apply it like an additional caching Or you know CDN based on your need of course you can so as I said before you can You can leverage The CDN front plan manager or you can put in your custom CDN, you know, just just based on your deployment model Thank you Is remote SBA editor also supported in other frameworks then react and if yes, which ones are production ready Yeah, so I think As I mentioned before there are react and angular implementation of the editable Component SDK so I know that some customers use them for production already. So yeah We might support more But currently, you know, we are interested to know from the industry as well like what are in demand? what are the demand from you guys and You know How many of them? Wanting like view or square there so that we can support more frameworks in the future Okay, thank you Next question is is there any built-in advantage in the built-in support for Adobe Target a B testing capabilities with the react SPA It is probably can so so far I’m not aware of that but suddenly Yeah, I Cannot answer this question. It’s more like a product manager Product manager Like a one for for product manager Okay, no problem. We’ll try to follow up via a contextual thread where we will post the Q&A after some time Then the next question is is there a benefit of using app builder instead of hosting the react app under? etc within a am Right, yeah, and this is actually a very good question and We have certainly received a lot of similar kind of Interest like why we should deploy the app on a Peter instead of etc The first thing which is kind of obvious is that you move your front-end code out of a em, right? so that brings the flexibility of of scaling and You know making the am code signal for for like the core part and not you know Stretching it with more with with with the front end code and and also in app builder we We support like the tooling and The SDK that allow you to write your app And and and deploy them. So yeah, those are the main benefits that that I can think about but of course if the team in the chat can think about other Other benefits and feel free to to put in the chat or you know speaker Thanks to me Next question is can we use module Federation as it uses webpack under the hood? I’m not sure if I understand this question. So probably we need to follow up with the With the person who raised the question to understand more like what what what he need with that Yes, can you please rephrase and specify your question a bit more please Other than that we answered all questions so far we’re waiting for your new questions New questions Here’s one can I import experience fragments within my react SPA Thank Batman Yeah, I think that is possible I’m not sure if that is already in the in the sample implementation of the core components the world that react core components, but otherwise you can you can You can also implement your own custom components for for experience fragment Okay, thank you Also There was one question that came up previously Can I write react app with my HDL components? Okay, right so You cannot like use your HDL components directly. So basically You need to write custom components in in in react and those components basically map to the to the sling resource type of your actually our components and Then you can use those react components in in your app By Now we have a follow-up of the previous Question regarding can we use module Federation as it uses webpack under the hood? The follow-up is the concept of module Federation that webpack provides is to inject apps from different controlled domains for example header comp comp component has its own repo and it’s hosted on localhost of 3001 and while the main app container is hosted at localhost 3000 Okay I’m not that like familiar with with that feature. I’m not sure if if the team in in the chat like Stefan can Answer otherwise, we will follow up, you know offline about For the discussion on that Okay Meanwhile, I’d like to ask the audience to complete the Concluding poll which is pins to the general chat we really appreciate your feedback on this session and if you Have suggestions or would like to see other topics covered in our a.m. Gem series We still have a few minutes left and please post your questions into the Q&A tab Thank you You Another question came in can we handle SSR of the app with app builder as well as and are there examples? Yeah, so SSR is is one topic that the team is currently investing on and as I mentioned before SSR either with Hcl or next.js or other framework You can certainly do that For today like with the existing tool available publicly It’s probably not A fully support like we don’t have all the SDKs and see like plugins and and so on which is still in work in progress but yeah, suddenly SSR, SSG and other Way of rendering size is in our is in our plan to support Great Thanks, we’ll give you another moment so you have time to post your question You Meanwhile I would like you to be aware that the recording for this session will be posted or made available in the contextual threat You will find that link in the general chat And also for questions or comments post session, please also refer to the contextual threat Which will be used for community interactions in general And you will also find Upcoming sessions in the Adobe Experience Manager user group where you have RSVP to for this session We will wait another minute to see if other questions appear Otherwise we will slowly conclude this session There is a new question, what is the best way to get the latest updates on this topic? Yeah, I think that our PM team product management team will Send our regular updates on the latest features and support by a.m So settle on that Yeah probably another chain section by our PM probably I don’t know when but The the part is actually you know Support the features that our company that our community is expecting Thank you And another question just came in what is the difference between SPA hosted on a.m. And SPA hosted on I own Yeah, so This is related to a previous question about like hosted under slash etc or app builder and as I mentioned if you host on Last last etc that is still in your in your am instance, right? So so it makes it like coupled to am in term of Development like you have to build your your JS code in in your am code and then deploy An etc and also scale together with the rest of a.m On app builder you you have like a like a separate development lifecycle for your SPA so you can deploy it separately then your your your your full stack am code and then there’s also the scaling which will certainly help there be Because I’m in app builder your app is deployed differently And and also if you want to deploy on the on the am cloud service CDN with which is also, you know theory Theoretically outside of the core am Engine so that you don’t You don’t have problem to scale your front end versus the core am engine And that is certainly more flexible for your front end app And the follow-up question was what and the next one is what is recommended for a.m. As a cloud service Yeah, that’s that is probably like very generic question and again, I think it’s more like for for BMT into follow-up Okay, thank you next question is do Adobe IO support other languages than JavaScript I I Guess that this question is about I I’d be I or runtime with runs like serverless function and the and the answer is not for now, so for today, the only language is JavaScript or specifically no chairs and Yeah, we don’t I’m not aware of like like a plan to support any other language at least for today Thank You do it Feel free if you have any other questions around this topic to post it into the Q&A tab And You want disappeared aren’t there any limitations to notice on app builder our features disabled Featured disabled so I’m briefly saying Your action on Well, y’all know JS action deploy on on runtime. You can you can import like any NPM dependency libraries and then use use them in your in your action, of course if if if the library needs some dependencies in the core like OS system then they might be you know They Might not be possible to to install them in the OS system of your run connection, but otherwise you are freely You’re free to use any NPM library and then in like embed them action Thanks to me Again We have answered all questions, but we will give you another moment time for you to post new questions Yeah, and in the meantime I might Might elaborate more on the limitation So so what I mentioned is like for the code and then of course on our runtime There are there are a limitation per namespace in term of like a concurrency of the request like how many of them can run at the same time or per minute and then the time out of the action like By default is one minute for web requests and so on so forth On the documentation page of app builder and I runtime you can see more on those limitations Thanks Another question is SPA editor support for angular seems to be quite poor at the moment Also remote SPA seems to be not ready. Are there any plans to improve that? Yeah, so There are always things to improve right? I’m not I don’t know about the specific plant with with this meta answer by a PM. Let’s yeah suddenly The teams is working on the future Thank you, and the next question is where is the data center for the lambda serverless functions I Guess that I can interpret that to to the So like where is I run time running and Actually, that’s that’s not very important because because in the end that is a serverless platform, right? so so that the point is that you don’t need to you don’t need to worry about like Like where y’all the action run because I run time will make sure that it runs to the well if run closest to to where you make the request as well as like all the Later proximity and so on. So yeah that is distributed system and we will make sure that Run time will be available as well as run to the closest to your to your your request location The respective follow-up question is so it’s running on the edge Not for now so Runtime is is like the traditional serverless system and it it run Like abs lambda so it’s not running on the edge Okay, thanks we have time for one or two more questions I While waiting I would like to again repeat that your feedback is very much appreciated by us And you will find three pause in the general chat, which is the starting poll the concrete And the survey about am sites Strategy and templates we would really appreciate your input and your feedback around this It is very valuable to us and we would like to improve with the help of the community Okay, so There are no new questions, so I would like to thank you a lot a Dewey for your very presentation and your demo And also to the chat experts Ron Stefan and G who answered questions. Thanks a lot for that Thanks to the a lot to the audience for your attention for joining today’s session As mentioned you will find the recording in the contextual thread The link is in the general tab as well a general chat tab as well as in the event page on Adobe experience manager user group and With that I’d like to conclude this session. So everyone have a nice day or evening. Thanks a lot and bye. Bye