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

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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

Avatar

Avatar
Validate 1
Level 2
om_vineet
Level 2

Likes

3 likes

Total Posts

29 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 2
om_vineet
Level 2

Likes

3 likes

Total Posts

29 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Affirm 1
View profile
om_vineet
Level 2

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?

Avatar

Avatar
Boost 5
Employee
hanishb17637780
Employee

Likes

7 likes

Total Posts

23 posts

Correct reply

6 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Affirm 5
Affirm 3
View profile

Avatar
Boost 5
Employee
hanishb17637780
Employee

Likes

7 likes

Total Posts

23 posts

Correct reply

6 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Affirm 5
Affirm 3
View profile
hanishb17637780
Employee

22-04-2019

Hi @om_vineet

Quoting some useful text from our PM:

Hope this answers your query.

Avatar

Avatar
Give Back
Employee
Amol_Anand
Employee

Likes

2 likes

Total Posts

3 posts

Correct reply

1 solution
Top badges earned
Give Back
Boost 1
Affirm 1
View profile

Avatar
Give Back
Employee
Amol_Anand
Employee

Likes

2 likes

Total Posts

3 posts

Correct reply

1 solution
Top badges earned
Give Back
Boost 1
Affirm 1
View profile
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",

Avatar

Avatar
Validate 1
Level 2
om_vineet
Level 2

Likes

3 likes

Total Posts

29 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 2
om_vineet
Level 2

Likes

3 likes

Total Posts

29 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Affirm 1
View profile
om_vineet
Level 2

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.

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,200 likes

Total Posts

6,394 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,200 likes

Total Posts

6,394 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
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.

Avatar

Avatar
Boost 5
Employee
hanishb17637780
Employee

Likes

7 likes

Total Posts

23 posts

Correct reply

6 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Affirm 5
Affirm 3
View profile

Avatar
Boost 5
Employee
hanishb17637780
Employee

Likes

7 likes

Total Posts

23 posts

Correct reply

6 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Affirm 5
Affirm 3
View profile
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

Avatar

Avatar
Boost 1
Level 1
alisong74870907
Level 1

Like

1 like

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
alisong74870907
Level 1

Like

1 like

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile
alisong74870907
Level 1

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!

Avatar

Avatar
Establish
MVP
_Bruce_Robertson
MVP

Likes

271 likes

Total Posts

1,782 posts

Correct reply

372 solutions
Top badges earned
Establish
Give Back 25
Give Back 10
Give Back 5
Give Back 3
View profile

Avatar
Establish
MVP
_Bruce_Robertson
MVP

Likes

271 likes

Total Posts

1,782 posts

Correct reply

372 solutions
Top badges earned
Establish
Give Back 25
Give Back 10
Give Back 5
Give Back 3
View profile
_Bruce_Robertson
MVP

25-10-2019