Single Page Application In Liferay

Hi All,

This is my first blog for the Digital HeartBeat. Not really nervous, been scribbling down blogs for some time now on different forums. Hope at the end of this I'm able to inspire a few on what we were able to accomplish with one of Mindtree's prestigious clients on implementing Single Page Application (SPA) with Liferay.

Let's firstly understand what Single Page Application are:

1. Associated to web based applications.
2. Page does not reload at any point in the process.
3. Provides a more fluid user experience.
4. HTML, JavaScript, & CSS are retrieved with a single page load.
5. Resources are dynamically loaded and added to the page.
6. Going through the points did it strike you what new about this! Technically there are various techniques to empower browsers to retain a single page, like:
7. JavaScript frameworks (AngularJS, backbone.js, etc...)
8. Asynchronous JavaScript and XML (AJAX)
9. Browser plugins (Silverlight, Flash, or Java applets)
10. The above technologies do support in having a superficial concept of Single Page Application implementation. We needed a Single Page Application implementation from the root of the Liferay portal and not relaying on adding frameworks mentioned above.
    Looking at Liferay 6.2 and prior Single Page Application are not Out Of the Box (OOTB). Liferay allows creation of pages and on navigate from one page to another page, the entire page reloads and the Portlets get refreshed. We expect the flow from one page to another page being seamless.
    As in all research ideas we stumbled around with several proof of concepts and found a solution to utilize the OOTB Web Content Display Portlet. This portlet allows developers to incorporate dynamic html, java script, and much more. The end result was presenting scrollable divisions on click of anchors on a Portlet. 
    The appeal was amazing, but the draw back where on the ability to drag and drop Portlets, was difficult to maintain. In short it's was best for developers not being user friendly.
    It was back to the drawing board for us. Many other ideas came and passed by and on one fine day we ventured on tweaking Liferay Layouts.
    What is a Layout? Each page created in Liferay is assigned to a Layout that partitions out percentage and locations where Portlets can be dragged and dropped.
    We customized the Liferay Layout and designed to support scrollability, and when the page loaded all the details would be populated and a seamless transition was achieved.
    This idea was presented to the Mindtree client and this helped us winning the project from numerous prospectors. The same idea was showcase to Liferay and this feature is a highlight of the upcoming Liferay 7 release.
    Thanks to our great Liferay team we are able to showcase expertise across, by presenting in Liferay India User Group and to Liferay US and Germany.
    Here are a few screen shots of the proposed application.