LifeRay 7 with Single Page Application (SPA) features & SennaJs !!! How It works? In LR7 & LR6.2..

 we can achieve SPA in liferay 6.2 by making changes in theme.

But how can we achieve it in 7 .. ??

Before going into the LR7 SPA.. 

Quickly, we glance .. What is SPA , What is SennJs , SennaJs Key enchancements


so what is Senna.js?

´Senna.js is a super fast single page application engine that can dramatically optimize any site's performance. It's open source and doesn't require any dependency.

´SennaJS is Liferay Portal’s SPA engine.

´ SennaJS handles the client-side data, and AJAX loads the page’s content dynamically. 

SennaJS provides the following key enhancements to SPA:

´SEO & Bookmarkability : Sharing or bookmarking a link displays the same content you are viewing

´Hybrid rendering : Ajax + server-side rendering lets you disable pushState at any time, allowing progressive enhancement

´State retention : Scrolling, reloading, or navigating through the history of the page takes you back to where you were.

´UI feedback : The UI indicates to the user when some content is requested.

´Page resources management : Scripts and stylesheets are evaluated from dynamically loaded resources. 

´ read more about SennaJS as well as see examples at http://sennajs.com/.

But what is a Single Page Application?

´Basically, a Single Page Application (SPA) is a web app that loads all of the resources required to navigate throughout the site on the first page load.

´As the user clicks links and interacts with the page, subsequent content is loaded dynamically.

´A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience similar to a desktop application.

´The page does not reload at any point in the process, nor does control transfer to another page.

Now..
Single Page Applications with SennaJS and Liferay Faces
´One of Liferay 7’s most exciting new features is SennaJS, a Single Page Application engine.

´SennaJS makes the portal more user-friendly in many ways.

´ For example, when a link is clicked and navigation occurs, SennaJS requests the necessary portlet markup via XHR and renders it in the browser so that the whole portal page is not reloaded.

How do I use SennaJS with Liferay Faces portlets?

´Utilizing SennaJS is as simple as using h:link, h:outputLink or any other component Which renders an <a> tag.

In LifeRay6.2, we use to modify portal_normal.vm 

Script was.. 

<script>

                 // initializing senna 

                 var app = new senna.App();

                 // Set links selector for navigations

                 app.setLinkSelector(".senna-link");

                 // set basic path of liferay site

                 app.setBasePath('/web/spa-demo/');

                 // Id of DOM element which will be replaced from

                 // next page request

                 // using content div - default in liferay theme

                 app.addSurfaces('content');

                 // define routes for all the navigation links

                 // route link = Base path + page link

                 app.addRoutes([

                     new senna.Route('FirstPage', senna.HtmlScreen),

                     new senna.Route('PageSecond', senna.HtmlScreen),

                     new senna.Route('ThirdPage', senna.HtmlScreen),

                ]);

      </script>

But how it works in LifeRay 7 ...?

Enabled By Deafult

Go to Properties file & set as your requirement ...

portal.properties

#

# set this true to enable single Page Application Links

#

javascript.single.page.application.enabled=true

SPA 7 ..benefits such as

. Productivity activity will be more

.Less bandwidth consumption.