Adobe Developers Live 2021, Session | SPA Editor 2.0: add in-context editable content spots to any app

[#1]

Session Details

Load your existing React or Angular SPA in the Page Editor and, with minimal intervention, enable authors to insert content that they edit in-context.

Experience League Session Recording 

Session Schedule

8-Feb, 10:45 AM - 11:15 AM PST

Speaker(s)

Sharanya Vinod, Patrick Fauchere & Gabriel Walt

Full Schedule

Check Here

Q&A

Please use this thread to ask the question related to this Session. Click here for the session slides.

Session FAQs

Q. Can we compare the placeholder to content fragments?

A. Content Fragments are components. The frontend placeholder is an instance that points to any component persisted in AEM.  Content fragments cannot be previewed, but the components loaded within these editable sections will be able to be edited in-context.

Q. Any documentation for in-context editable content?

A. Content Fragment can be used with this feature. You can then use GraphQL with the SPA Editor. We already have the documentation for the SPA Editor 1.0. RemotePage and SPA Editor 2.0 are build on top of the existing feature and allow authoring SPA hosted on a different domain

Q. Any documentation for RemotePage?

A. The Remote Page component is available here: http://bit.ly/spa-remote-page

Q. Do we have to use React?

A. React is the first SPA framework that we support. We are using the asset-manifest file that the framework generates. We have plans to explore using Webpack plugins in conjunction with Angular projects. It could be working as is but we haven't yet confirmed it.

Q. Will SSR work OOTB with SPA Editor 2.0?

A. SSR is possible via the I/O Runtime, which needs to be set up separately. We're working on integrating the Runtime more tightly into AEM, but this will come later.

Q. how (in)compatible will SPA 2.0 with the PWA concept explained in a previous session?

A. This is compatible with the PWA concept, the two concepts are complementing each other and have been tested to work well together.

Q. Can these handle SPA's behind a login? As login is not tied to AEM

A. High-level authentication and authorization works the same way as any other content on AEM

Q. Is 2.0 version Java classes mapping is still required?

A. Mapping between the JS and the AEM components is still necessary, but the idea is that you can use the provided React or Angular Core Components where this mapping is done for you until you are building custom components for authors to edit.

Q. For the SPA framework, does AEM server-side render the page on-first load, and then ReactJS add React router to the page?

A. This kind of SSR can be set up, yes, we have several customers doing exactly what you're suggesting.

So, SEO can rightfully be ranked for each page right

Q. Can this be integrated with routing? what happens if a section component links to another page (e.g. remote page)?

A. Yes, it will work with routing. Handling navigation within the app to the remote page can be handled via Vanity URLs/Sling mapping.

Q. Some Important related URLs/Sling

A. A. "SPA Editor 1.0 overview: - bit.ly/spa-editor-overview

Remote Page component:- http://bit.ly/spa-remote-page

SPA Editor SDK:- github.com/adobe/aem-react-editable-components, github.com/adobe/aem-spa-page-model-manager, github.com/adobe/aem-spa-component-mapping, github.com/adobe/aem-react-core-wcm-components

Q. Will it be possible to add the remote webpage without any code changes. ie. in the Home.js in the demo?

A. Would need more detail to better understand the question

Q. How this work with redux state?

A. At the moment, the AEM store will work independently of the stores defined within the react app. If the app has state management done via redux, AEM store will not interfere with it. The data required for editing the components in AEM will be fetched via it’s dedicated store which is created on initialization, by the helper used in the component ie. withMappable.

Q. Any plan to Support vue in roadmap?

A. So far, Adobe has no plan to support Vue.js. Using implementation for the other frameworks as an example as well as the blueprint shared via the public documentation, we would welcome a project driven by the community

Q. Is it possible to use SPA Editor for authoring only i.e. to create page content in jcr & use component rendering logic on public-facing pages so that the public pages are always rendered on the server side.

A. Would need more detail to better understand the question

Q. Given that React is indeed the leading framework, will Adobe support increasingly popular meta frameworks for JAMstack, e.g. Gatsby or Next.js?

A. At the moment, Adobe is not actively working on extending its support. That said, some of these meta frameworks could already be compatible and only need a few extra configurations. We haven’t explored this topic

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