Using Angular JS with AEM CMS

It’s increasingly necessary to use MVC or MVVM JavaScript frameworks in integration with content management systems, to do session specific page assembly on the client side by directly accessing web services APIs. With AEM this is almost always necessary for any high traffic, dynamic website because the AEM publish nodes are so slow at page assembly that you would need dozens of publish node servers (and the associated Adobe licenses at tends of thousands of dollars per node, which is why Adobe prefers you to do everything inside AEM) to deliver such a site at volume.

But integrating an Angular JS application with a CMS like AEM that builds pages from component based template fragments poses additional challenges – how do you ensure that all the code necessary for the application to run is always available no matter the combination of components used for one thing.

AEM Certified Architect Suryakand writes on his blog about the best practice for using AngularJS with AEM here.

When you’re building a website with Angular (or similar frameworks like React, Knockout and Backbone) – really any heavy dependency on AJAX type loading of content – you need to be mindful of not compromising your SEO, as having your key content excluded from the primary html that loads in on the first request can limit the ability of crawlers to index your site. Strictly speaking this isn’t true any more since Google’s web crawler DOES execute JavaScript and indexes the finished page, and has been true since at least mid 2014, but other search engines don’t necessarily do that yet. Brad Jayakody and Giacomo Picciani talk in this posting at Medium about how they implemented an Angular application on CQ5.6 without compromising SEO using a method still valid with AEM6 in mind.

View story at Medium.com