Using Sennajs on a Static Website

Created: 16 January 2020  Modified:

Sennajs is a Single Page Application (SPA) Javascript framework. It allows navigation of a website/web application and only updates the part of the page that changes. This allows for faster navigation and less page flicker. I became interested in Sennajs because it is used by Liferay Portal 7.x. For light weight static content Sennajs can be overkill. I wanted to learn about it and used this site as my testbed. I am now looking to remove it and want to document how I used it.

[NOTE] This site is static content. I have slowly been trying to reduce the page size by eliminating Javascript libraries. Progress has been hampered by my using it as a testbed for Boostrap, JQuery, CodePrettify and Sennajs.

Sennajs is on GitHub. I cloned the repository and copied the build folder in its entirety to my website.

Sennajs changes only the marked section of your HTML when navigation occurs. In the screenshot (below) the static parts of the page are highlighted in blue and the changeable part is highlighted in green. When a link is clicked only the portion in green will change. This results in faster load times and reduced page flicker.

Highlighted Web Page

Now lets see how the HTML looks.

example.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="/js/senna/build/globals/senna-min.js"></script>  
  </head>
  <body>
    <div id="navbar">
      <!-- This would be the navigation across top of page. -->
	</div>     
    <div id="content">
      <!-- This would be the content that changes as navigation occurs. -->
    </div>
    <div id="footer">
      <!-- This would be the information across bottom of page. -->
    </div>
    

 <!-- Initializing Senna -->
  <script>
    'use strict';
    var app = new senna.App();
    app.setBasePath('/');
    app.addSurfaces('content');
    app.addRoutes([
     {
        path: 'index.html',
        handler: senna.HtmlScreen
      },
      {
        path: 'archive.html',
        handler: senna.HtmlScreen
      },    
      {
        path: '',
        handler: senna.HtmlScreen
      },    
      new senna.Route(/.*\.html/, senna.HtmlScreen)
      
    ]);
    
    app.on('endNavigate', function(event) {
      /*
        Place code here that would normally go in document onload events.
      */
    });    
  </script>    
  </body>
</html>

We have included the minified version of Sennajs in the header. The body contains the header, content, footer and javascript. The content is a Div tag with an id of “content”. Sennajs calls the areas where content changes “surfaces”. In the Javascript you can see where we set “content” as a surface. Routes are how you tell Sennajs which pages it should handle. There is a route definition for index.html, arhive.html and the root of the site. Which is followed by a route definition for all pages ending in “html”.

The last part of the Javascript is where code goes that you want to run after a page loads. Without Sennajs you would handle this with a Javascript method called from the HTML body or document onload event. If you were using JQuery this would be the equivalent of using document.onReady. Sennajs does not trigger those events when navigation occurs. When a page first loads all the normal events occur. After the initial load Sennajs takes over and the page onload event will not re-occur.

In the case of this site, I was using Code Prettify for syntax hightlighting of my code examples. This highlighting would not occur after the initial page load because I was relying on page load events.

tags: sennajs - static - website
   Less Is More