Single Page App in AEM

AngularJS

If you are in the web development field(Especially front end) then I am sure you must have heard about AngularJS. It is a great framework to build SPA – Single page applications and a lot of things that can be achieved very easily with minimum JavaScript code. AngularJS brings some cool features to web application development, some of them are:

1.    Two Way Data-Binding

2.    Templates

3.    MVC (Models, Views/Partials, Controllers) and Services

4.    Dependency Injection – we can create services, factories and other libraries that can be injected as and when you need it.

5.    Directives – create custom HTML elements, attributes for your application.

Let's take IMDB as a reference website to understand the benefits on angular js:

Current Implementation of IMDB:

·       We generally search for a movie and go to the respective page to provide ratings or check reviews.

·       For every view, we are loading the complete page just to see movie details like reviews, ratings, etc.

·       This will hit the user experience.

New Implementation using Angular JS and Sightly in AEM:

 Now with AngularJS, everything is in single page with features as mentioned below:

·       Getting all the list of movies in a single shot in the form of JSON, which would cache in dispatcher for better performance.

·       Now using the angular JS service, we would load the JSON on page load and create a structure with filters and lists.

·       We can create filters for jonour, by celeb name, by date on the same page, so the user can select them and the list of data would be updated on the fly without going to a different page.

·       User can select multiple filters and get desired results on the same page and select the required jonour and celeb name and compare them.

·       We can also add a feature like sharing links to friends with pre-applied filters, so he can directly see the required list he requires.

·       We can display the filter like a tag and add an option to delete or remove all filters.

·       We can also create a mobile-friendly design with help of angular show/hide functionality to facilitate mobile experience(This was done in a few lines of code).

Just to brief out about AngularJS 2 Integration with AEM at Build time:

·       Generally we cannot use angular js 2 directly as we mostly use ECMA 6 syntax, which is not supported by all browsers.

·       So we need to convert the ECMA 6 code to vanilla JS and then use it in our code.

·       For this, we might have to include a plugin in our pom, where we can download node and install all the dependencies required by Angular JS. To do all the processing we can use grunt, generate the clienlibs dynamically and place it in /etc/designs folder then the normal flow of build kicks in and deploys the generated clientlibs.

Conclusion: 

·       Angular is very useful when we are dealing with data-driven websites, where the data is coming in JSON format.

·       It can also be useful when there are some lists of things that need to shown and filtered on the fly.

·       It can be normally used as a replacement for jQuery and do all the page related logic in a few lines of code.