Adobe Summit 2022, AEM Session | S504- Build Sites Faster with Adobe Experience Manager Headless

[kautuk_sahni]

Session Details

See how AEM Headless empowers developers to build single-page web apps and deploy using Adobe App Builder and best practices for each type of content. Quickly bootstrap and deploy single-page apps (SPA) using Adobe App Builder workflows and tools, no traditional Experience Manager skills, like Java and Sling, required. With Experience Manager Headless, marketers and developers can each have expertise of their own domain — developers control the overall application framework, styling, and routing while marketers determine the content and how it’s displayed. Learn how:

1. Experience Manager Headless empowers developers to build SPAs using modern web technologies and flexible deployment models

2. Marketers can control content with Content Fragments and the SPA Editor

Session Recording

Session Schedule

2022-03-15 | 12:00:00 PST | 30 Mins Duration

Speaker(s)

Duy Nguyen & Sean Steimer

Moderator(s)

Adobe Resource(s)

Product(s)

Adobe Experience Manager,Adobe Experience Platform,Adobe Experience Cloud,Adobe Commerce

Full Schedule

Check Here

Session Q&A

Question	Answer
Is there a sandbox that adobe can provide to those of us who are sites customers, in order to explore this further?	Hi Christine, you can request for an App Builder trial through https://developer.adobe.com/app-builder/trial/!
Is there a sandbox that adobe can provide to those of us who are sites customers, in order to explore this further?	Thanks Sarah, just confirming, we would need to have App builder in order to leverage both SPA and Experience Manager Headless?
Is there a sandbox that adobe can provide to those of us who are sites customers, in order to explore this further?	Hi Christine, no, you could create your own SPA directly with AEM Headless without App Builder as well. However, if you do plan to extend any functionalities, we'd highly recommend this approach!
Is this only available in cloud?	Hi Florian, App Builder supports developers to build cloud native applications, you could use it with on-prem and Cloud Services. Is that what you are asking?
How can I try the Experience Manager Headless	Via AEM sandbox. Please contact your Adobe account representative
Does the Remote SPA Editor allow to modify the structure of the page? I thought the Remote SPA feature only allowed to modify open areas pre-defined by developers	yes and no. within the SPA you define areas that can be edited but those areas can be as narrow or wide as needed
Is it mandatory to have a AEM in cloud to leverage this ?	Hi Vengadesh, if you are referring to App Builder -- it is available to all AEM customers. For AEM Headless, it's also available in 6.5 I believe.
Can you use AEM headless as a frontend to Magento backend?	Yes
Everything is secretly JS	To be a tiny bit more serious it is because you develop JS in OOO or FO and with ES6 we get "classes" that are extendable with their function overloadable or overwriteable
Does the Remote SPA Editor allow to modify the structure of the page? I thought the Remote SPA feature only allowed to modify open areas pre-defined by developers	So, for example, it could be just a text component, or something much broader with a layout container that other components can be placed inside and re-arranged as needed
React is the only framework supported so far?	for AEM SPA editor, React and Angular
Is it mandatory to have a AEM in cloud to leverage this ?	I think it is 6.5.10 specifically for GraphQL for the non-cloud version, but maybe I am wrong.
Are the serverless functions running on edge or where is the datacenter?	Hi Helge, the serverless functions are running on Adobe infrastructure. We don't support edge at the moment.
is the GraphQL server setup comes as part of AEM as a Cloud? Or this needs to be setup separately?	yes, it's already setup, just need to configure your models and start using it
React is the only framework supported so far?	You can really use any front end framework within App Builder for your SPA, but if you'd like to use it with the SPA Editor in AEM, you'd need to use React or Angular as Mathias mentioned.
is the GraphQL server setup comes as part of AEM as a Cloud? Or this needs to be setup separately?	Sagar - GraphQL is having it's endpoint. You just need to use that endpoint and you will be all set.
React is the only framework supported so far?	Ok, makes sense
how do we use this aio cli with AMS	you can use aio cli to work with your app that connects to AEM Cloud service or AMS.
Is the full selection of core components available for the Angular version of the AEM Single Page Application Archetype?	https://github.com/adobe/aem-angular-core-wcm-components-examples
In order to use the headless model you are describing, am I right in assuming that this only works with content fragments?	yes, that is right. graphQL is currently only supported with content fragments.
Can i use AEM core component and in SPA editor	there are angular and react versions of the core components which work with the SPA editor
Could we use web components which are native in the browser insted of usign React or Angular?	yes totally
Can i use AEM core component and in SPA editor	see https://github.com/adobe/aem-angular-core-wcm-components and https://github.com/adobe/aem-react-core-wcm-components
can we get the sample code from github to start exploring?	Hi Vengadesh! The team's using the same SPA available here: https://github.com/adobe/aem-guides-wknd-graphql/tree/feature/spa-editor
For English it seems okay. How to manage translations?	with AEM translation integration - you can manage translation of any AEM resource with AEM language copies, translation workflows, and 3rd-party TMS connectors - pages, experience fragments, content fragments, assets, forms
Does it come with in built Apollo server for exposing Graph QL APIs?	AEM acts as GraphQL server in the model here
How we can make the application to use our custom components?	custom components need to work with the sling model exporter and then be mapped to an appropriate SPA component via mapTo/withMappable functions
Where can we download the Adobe AEM CLI ?	https://github.com/adobe/aio-cli
is this available to play around with AEM? or do I need special permission?	you can apply for a trial of app builder at https://developer.adobe.com/app-builder/trial/
Does AEM as a SPA support custom components that contain layout containers/responsive grids/ parsys or some equivalent?	yes. my advice would be to look at the core container components such as tabs/accordion and follow those to implement your custom component
Can you mix existing components built in sightly and java with the react components if your using the remote spa editor?	You would need React representation of those components to use in the SPA.
What is the level of support for TypeScript? I.p. w.r.t. to the GraphQL fragment consumption?	You can definitely build your SPA with typescript and use that to interact with the AEM GQL API. in fact the react core components are built with type script

Q&A

Please use this thread to ask the question related to this Session.

Don't forget to register yourself for this session using the registration link shared above.