Adobe Summit 2019 | L784 - Building for the Modern Web with the Adobe Experience Manager SPA Editor

[#1]

Session Details

As brands move to single-page applications (SPA), too often the digital marketer has minimal control over content and layout decisions. With the SPA Editor framework in Adobe Experience Manager, digital marketers are no longer left out of the process. Front-end developers continue to build highly performant and rich experiences while enabling content authors to make in-context editorial updates. Gain hands-on knowledge of the authoring experience with the SPA Editor framework, and see how fluid experiences play into powering SPAs and traditional websites with Adobe Experience Manager.

Speaker(s)

Amol Anand, Principal Consultant, Adobe

Chris Borland, Technical Architect, Adobe

Session Length

90 Minutes

Digital Lab Manual

L784 - Experience League Intelligent Guidance | Adobe

Q&A

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

[#2]

Thank you for the guide.

Does the SPA editor support a mix of Sightly and react based components? Otherwise, we will require to create more than 1 header, footer and other components in 2 different languages?

[#3]

Hi @om_vineet

Quoting some useful text from our PM:

Hope this answers your query.

[#4]

One minor update to get this code to work with AEM 6.5 GA release:

In the angular-app/package.json file, please update the following dependencies with the latest versions as shown below and then run the maven build as usual:

"@adobe/cq-angular-editable-components": "^1.2.0",

"@adobe/cq-spa-component-mapping": "^1.0.3",

"@adobe/cq-spa-page-model-manager": "^1.0.7",

[#5]

Thanks for the reply.

However in real world, situation might be different. Since SPA is not offering any SSR offering (officially and yet in technical preview), we can not just build everything as a client side app which will negatively impact SEO. I was thinking to have a possibility of multi-page for SEO specific user jouneys and spa for transactions journey in the same site which is quite feasible. However the issue is to duplicate common components (header, footers) across react and sightly since SPA doesn't support a mixed model. This will introduce manageability and maintainability overhead. So IMHO, please do consider to have this in roadmap at least. The format could still be JSON however the JSON will have HTML snippet for Sightly component rendered in server and react component just inject that HTML at the correct div.

Please let me know what do you think about it.

[#6]

One thing I find necessary for any discussion on the headless topic is to draw the distinction between headless delivery and headless authoring: you can well have headless authoring (CF) with headful delivery (HTML) and have headful authoring (SPA Editor) with headless delivery (JSON) - any of the 4 combinations are possible.

So, as mentioned by Hanish, with SAP you are having Headful Authoring and headless delivery (JSON) from AEM would be recommended.

[#7]

Hi @om_vineet

As I explained in my previous comment, Inserting pre-rendered HTML pieces doesn't really seem to be recommended by the SPA frameworks (React even names the method "dangerouslySetInnerHTML").

We actually already have some of this problem with the RTE that returns HTML and that must be injected into React/Angular in that ugly way. As future enhancements, we might therefore rather do that the RTE uses Markdown syntax for such cases, so that there's no more HTML at all mixed up in the JSON.

So no, what you suggested is not on our roadmap, and rather the opposite is on the roadmap: to also remove the last pieces of HTML output from the JSON.

Also, Regarding your comment -

> Since SPA is not offering any SSR offering (officially and yet in technical preview), we can not just build everything as a client side app which will negatively impact SEO.

I would like to inform you that we SSR support for SPA will be available in the upcoming 6.5 SP1

[#8]

smacdonald2008​

The link for the Lab Resources in the tutorial is broken: https://expleague.azureedge.net/labs/L738/resources

Can we get an updated link? This turtial is different from the ones on the Adobe website and I would like to complete it as well for some more exposure to SPA Editor dev. Thanks!

[#9]

Hi,

Try https://expleague.azureedge.net/labs/L784/resources.zip