Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Angular with AEM - drawbacks?

Avatar

Level 5

Hello,

I've seen a few posts here discouraging the use of angular with AEM with HTL being suggested as the preferred approach. What specifically would be the drawbacks of using angular with AEM?

I understand that angular templates won't be author-able with AEM dialogs right off the bat - but we can use some workarounds to make this happen. Many examples of how to do that available on the net.

Also, angular generated HTML won't be cache-able since the HTML generation happens on the front end side. But on the plus side, caching should not be really required since angular will bring with it all the performance advantages of using an SPA framework.

Any other specific downsides to using angular with AEM?

Also, those who decided to use angular with AEM - why did you go that route? Is it just because you wanted to have your site be built as an SPA?

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

First of all, you should be clear about what you are building. Is it just a webpage and you use angular or any other SPA framework just because it makes building client-side widgets (carousels, stages, etc.) so much easier? In that case you are not building an "app" (the "A" in "SPA") but you are treating it like any other frontend library, I could call it then "jquery++". In that case the authoring experience is mostly untouched and not a problem. The problem here is that these libraries add a lot of weight to your page in terms of downloading time.

The interesting part is if you are really building an app. Interactions happening purely on the clientside. Fetching data from one or multiple backends (AEM might be one of these).  That's causing issues with the authoring aspect, and the "SPA feature pack" [1] might help with it.

My personal dislike of these approaches grounds in the fact, that it takes away the power from the author. While the author has a lot of freedom on pages (rearranging them, adding and removing content, linking them as the business requires), this isn't possible that easily anymore with SPAs (or it requires careful design of the SPA, but honestly I haven't seen such SPAs yet in the AEM ecosphere). Instead it often requires development efforts.

If you give the power back to authors (as they are used from the non-SPA pages) i am fine. The impact on page load might be negligible then.

</rant>

Jörg

[1] Adobe Experience Manager Help | Understanding SPA components in AEM SPA Editor  (don't know if it's released yet on package share, but from my point of view you should be able to get it, just raise a ticket on Daycare).

View solution in original post

2 Replies

Avatar

Level 10

Here is SPA information for AEM -- Getting Started with SPAs in AEM

Ang can be used for SPA in AEM.

If you want to build AEM components - then HTL and Sling Models is the recommended way to do so.

Avatar

Correct answer by
Employee Advisor

First of all, you should be clear about what you are building. Is it just a webpage and you use angular or any other SPA framework just because it makes building client-side widgets (carousels, stages, etc.) so much easier? In that case you are not building an "app" (the "A" in "SPA") but you are treating it like any other frontend library, I could call it then "jquery++". In that case the authoring experience is mostly untouched and not a problem. The problem here is that these libraries add a lot of weight to your page in terms of downloading time.

The interesting part is if you are really building an app. Interactions happening purely on the clientside. Fetching data from one or multiple backends (AEM might be one of these).  That's causing issues with the authoring aspect, and the "SPA feature pack" [1] might help with it.

My personal dislike of these approaches grounds in the fact, that it takes away the power from the author. While the author has a lot of freedom on pages (rearranging them, adding and removing content, linking them as the business requires), this isn't possible that easily anymore with SPAs (or it requires careful design of the SPA, but honestly I haven't seen such SPAs yet in the AEM ecosphere). Instead it often requires development efforts.

If you give the power back to authors (as they are used from the non-SPA pages) i am fine. The impact on page load might be negligible then.

</rant>

Jörg

[1] Adobe Experience Manager Help | Understanding SPA components in AEM SPA Editor  (don't know if it's released yet on package share, but from my point of view you should be able to get it, just raise a ticket on Daycare).