What is Senna.js and how it affects Liferay DXP

If you have been in touch with the Liferay community in the past years, you've probably heard about Senna.js before.

We first introduced this project in late 2014 and since then we've been anxiously waiting for Liferay 7 and DXP to be released so we could talk more about it. Now it's a good time to see what this project brings to the table.

Ok, 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.

It was created by Eduardo Lundgren with the help of amazing contributors and it's actively maintained by Liferay engineers.

But what is a Single Page Application?

Even though this term may not be familiar with non-technical people, chances are you already interacted with dozens of applications like this. If you ever used Gmail, Facebook, or Google Docs, then you had the experience of using a SPA.

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.

The application often updates the URL in the address bar to emulate traditional page navigation, but another full page request is never made. This is possible due to new browser capabilities like the HTML5 History API.

There are many frameworks for single page applications out there. First we had Backbone, then Ember, then Angular, now React. They all had their ups and downs, but we decided to create our own lightweight solution for many reasons:

First, because Senna.js was built for a single purpose, SPA, rather than being a fully-featured framework. Second, so you don't necessarily need to learn a new technology every time the JavaScript community comes with a new library.

How does it affect Liferay DXP?

As I told before, Senna.js can improve the performance of any site. By optimizing speed we can make incredible advances in terms of user experience, and that's crucial for Liferay DXP to be successful.
 
Ok, enough with the blah blah blah, let's see the difference between having Senna.js enabled and disabled when  using Liferay DXP with a 3G connection.
 
 

I don't know about you, but we think that a 13-second difference for a single page navigation is HUGE.

Want to learn more?

Below you can find an entire talk about this topic. Also make sure you check sennajs.com for more technical details and examples.

 

And that's it! Any questions? Feel free to leave a comment :)

Blogs
Hi,
This really sounds promising. I was wondering if I can develop a portlet using senna.js. I have posted a question on a requirement I have at https://web.liferay.com/community/forums/-/message_boards/message/77145582

Thanks in advance!