Highlighted

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

11-02-2019

marquee-p1-forums.png

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.

Replies

Highlighted

Avatar

Avatar

om_vineet

Avatar

om_vineet

om_vineet

20-04-2019

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?

Highlighted

Avatar

Avatar

hanishb17637780

Employee

Avatar

hanishb17637780

Employee

hanishb17637780
Employee

22-04-2019

Hi @om_vineet

Quoting some useful text from our PM:

Hope this answers your query.

Highlighted

Avatar

Avatar

Amol_Anand

Employee

Avatar

Amol_Anand

Employee

Amol_Anand
Employee

22-04-2019

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",

Highlighted

Avatar

Avatar

om_vineet

Avatar

om_vineet

om_vineet

30-04-2019

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.

Highlighted

Avatar

Avatar

kautuk_sahni

Community Manager

Total Posts

5.6K

Likes

969

Correct Answer

1.1K

Avatar

kautuk_sahni

Community Manager

Total Posts

5.6K

Likes

969

Correct Answer

1.1K
kautuk_sahni
Community Manager

30-04-2019

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.

Highlighted

Avatar

Avatar

hanishb17637780

Employee

Avatar

hanishb17637780

Employee

hanishb17637780
Employee

19-05-2019

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

Highlighted

Avatar

Avatar

alisong74870907

Avatar

alisong74870907

alisong74870907

25-10-2019

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!

Highlighted

Avatar

Avatar

_Bruce_Robertson

MVP

Total Posts

1.8K

Likes

268

Correct Answer

372

Avatar

_Bruce_Robertson

MVP

Total Posts

1.8K

Likes

268

Correct Answer

372
_Bruce_Robertson
MVP

25-10-2019