How to Create a Light and Fast-Loading Theme with Liferay?

When It Comes to Websites, Page Speed Matters!

This article is motivated by our website project accomplished by our Integration Platforms and AI Department using Liferay 7 (the latest version of Liferay Portal) for one of our clients– a large Canadian corporation in telecommunications and media industry. Alexis, our front-end developer, shares with you his first-hand experience of this project with the overarching objective to demonstrate how to create a light and fast-loading theme using Liferay portal? 

Right off the bat, we need to acknowledge the fact that, “The average online shopper expects your pages to load in two seconds or less…; after three seconds, up to 40% will abandon your site” (Gomez Inc., 2010). Thus,”page speed is increasingly important for websites” (see Lara Callender Hogan).

Thus, “page speed is increasingly important for websites.”

However, Liferay portal technology itself is not a one-size-fits-all solution. For example, in some cases, if the integrator does not develop a context-specific front-end libraries, the website will be crippled by unnecessary delays. Some experts have also suggested a mainstream recommended method which is to extend the Liferay theme by default. This, however, would result in a technical failure thereby extended web page loading time. Thus, based on the lessons learned from our past projects, i.e. experiential learning, and lucky to have the latest Liferay portal, Liferay 7, we decided to tweak the technology, develop a new module, and adapt it to unique expectations of our client. In what follows we share with you our feedback and the positive test results.

Liferay Portal: A Powerful, Yet Delicate Tool

Liferay is an Open Source Content Management System (CMS) and Portal, written in Java. Therefore, a service provider like us has flexibility to customize it as much as required to fully adapt it to the client’s needs. It provides the developers with an extensive user management, access rights and documents. However, there are some theme specific and performance issues to consider before starting a new website project. Here is a list:

  • Generally, a Liferay theme is home to a bulk of all the front-end libraries and styles needed by Liferay and its portlets. However, a big chunk of the codes and dependencies is useless for a guest visitor. In case of our client, these kinds of visitors form the majority of their users and indubitably the unnecessary code overload will cause performance issues and slow the site down.
  • Liferay imposes the presence of its Design Language, Lexicon (or rather, its only implementation: Clay). This may also cause several problems:
    • Mismatch between Design Language and the client’s design requirements can limit the project’s design feasibility.
    • This situation causes conflicts between CSS rules, therefore increasing the development time.
    • Liferay’s template bugfixes and updates can break the developed styles causing a an increase in maintenance time.
    • With content administration being on the pages, the developed styles can break the behavior of the administration styles also contributing to the increase of the development and maintenance time.

Although these issues impose challenges on a Liferay deployment project, we can offset their impact by developing front-end libraries, as you can read in what follows.

The Solution for Creating a Light and Fast-Loading Theme with Liferay

The solution to benefit from the state-of-the-art Liferay Portal while keeping in check the loading speed is to create a light theme without any Liferay front-end libraries such as senna.js, AlloyUi, Lexicon/Clay, etc.

However, in Liferay 7 this objective cannot be obtained as easy as it looks mainly due to not having the possibility to have an administration view of the site. In order to avoid this issue, we have internally developed a stand alone liferay module which is called “Theme Switcher“. This added functionality allows us to dictate the portal to display a theme according to the role of the user. Here is the link to the github repo: savoirfairelinux/liferay-theme-switcher

5 Steps Towards Setting Up a Light Theme

Here are the five steps for creating a light theme using Liferay 7. But before we get started, let’s look at this instance of a Liferay’s light theme which can be found on GitHub: savoirfairelinux/lightweight-liferay-theme. This theme is created using Maven, and if you wish to modify it you actually can. It is all open source.

Step 1 – Clean Up Your Themes

Remove the inclusions from the portal_normal.ftl file, mainly: <@liferay_util [" include "] page = top_head_include />. But also <@liferay_util [" include "] page = body_top_include /> and so on.

Step 2 – Repair the Themes

Unfortunately, the top_head_include variable does not only contain Liferay’s CSS and javascript libraries, but also many other things. It is therefore necessary to re-include the tags of the head that interest us. For some examples of the tags, consider the following:

  • The meta-tags that the user can define in each pages (keywords, description, etc.):

<@liferay_theme["meta-tags"] />

  • The definition of canonical URLs:
<#if !is_signed_in && layout.isPublicLayout() >
  <#assign completeURL = portalUtil.getCurrentCompleteURL(request) >
  <#assign canonicalURL = portalUtil.getCanonicalURL(completeURL, themeDisplay, layout) >
 
  <link href="${htmlUtil.escapeAttribute(canonicalURL)}" rel="canonical" />
 
  <#assign availableLocales = languageUtil.getAvailableLocales(themeDisplay.getSiteGroupId()) >
 
  <#if availableLocales?size gt 1 >
    <#list availableLocales as availableLocale>
      <#if availableLocale == localeUtil.getDefault() >
        <link href="${htmlUtil.escapeAttribute(canonicalURL) }" hreflang="x-default" rel="alternate" />
      </#if>
      <link href="${htmlUtil.escapeAttribute(portalUtil.getAlternateURL(canonicalURL, themeDisplay, availableLocale, layout)) }" hreflang="${localeUtil.toW3cLanguageId(availableLocale)}" rel="alternate" />
  </#list>
  </#if>
</#if> 

In order to know what to look for, and how, you need to know the basics of jsp which is used to generate the variable top_head_include. For more information, please consult the following link.

Step 3 – Organize the Themes

One of the challenges is that liferay-theme-tasks (link) which is a gulpfile provided by Liferay may not function smoothly. The good news is that you can organize the themes the way you want; i.e. according to your team’s development standards (sass, less, es6, etc.). In case of this client, we have used and embellished the usual gulpfile to our web projects. All headed by Maven and the front-end plugins.

Step 4 – Automate the Deployment of the Themes

Step 4 is perhaps the longest one, but as soon as it is completed you have a turnkey solution at hand. To quickly deploy the light theme files you have developed, take this advice. You do not have to compile and wait for the deployment of the theme for each modification of CSS or JavaScript (the features normally present in liferay-theme-tasks). In the OSGI context of Liferay 7, it is not possible to simply access the theme files (CSS, js, templates, etc.). Thus, you have to do the trick which you can learn by looking at the gulp `deployLocal:syncTheme` task.

The main idea is to transform the deploy module in webbundledir mode instead webbundle.

Step 5 – Enjoy the Developed and Deployed Themes

You now have a Liferay theme, which contains only what you want for your project, and which is deployable like any other Liferay themes. So, it is time to just enjoy the fruit of your efforts.

Results and Robustness Checks

In order to evaluate the performance of the theme(s) created, you can conduct three tests on each page (i.e. instance) with the same content. We have tried these tests, running each one of them on a Liferay server configured for production. Below are the three instances for which we used these tests (on a serveur with 8 CPU and 28Go of RAM, with a SSD disk).

3 Instances Tested for Robustness

  1. A Liferay vanilla theme, the “Classic” theme
  2. The light theme we developed for the client’s web page project
  3. A possible “real” case scenario: the “Classic” theme with more styles and JavaScript of the theme that we have developed for the client.

To perform these 3 tests, we used a local instance of speedtest.io (6.0.3), with Chrome 62. For each test, 10 calls were made, below is the summary of the results.

Results of the Test 1: The Classic Liferay Theme

  • 52 requests
  • 1064.77 kb
  • DOMContentLoaded: 1.24s (±31.95ms)
  • Load: 2.06s** (±52.89ms)
  • SpeedIndex: 1349 (±34.99)

We deemed these results acceptable as we could not find a single glitch in the theme as far as page performance was considered. The results are significant as they pass beyond the threshold for requests. As a rule of thumb, if the number of requests go beyond 40, it is considered a large number of requests.

Results of the Test 2: The Light Theme

  • 37 requests
  • 800.38 kb
  • DOMContentLoaded: 588ms (±42.96ms)
  • Load: 1.17s** (±55.17ms)
  • SpeedIndex: 863 (±39.57)

Fewer queries were made as it was a smaller page. Thus, this custom theme is more powerful than a basic Liferay theme!

Results of the Test 3: The Classic Theme with JavaScript and CSS of the Client’s Light Theme

  • 56 requests
  • 1214.59 kb
  • DOMContentLoaded: 2.22s (±457.34ms)
  • Load: 2.97s** (±458.11ms)
  • SpeedIndex: 2475 (±456.71)

Conclusion

Creating a light theme with Liferay is advantageous as it empowers you to maintain control over your company’s image by managing all the items that are sent to the browser. Liferay technology as a tool coupled with our expertise and years of experience working with it offer your company a solution, a powerful website, to stay on top of your content management efforts signaling a positive image to clients.

Overall, this experience has been an instructive and informative one. Our client and us are genuinely happy for the results are satisfactory and in line with our expectations. It is indeed a powerful website worthy of bearing its brand name.

 

Three Chief Pillars of Our Success in Liferay: Experience, Expertise, and Community Embedment

            

Since 2010, we have been training, coaching and accompanying a range of enterprises and organizations in their digital transformation based on Liferay Portal solutions. Having received a number of awards and observed the rising success of our clients, today, we have unreserved confidence in what we can offer and how we can actually transform an organization through Liferay technology. In retrospect, we believe our successful performance rests upon three chief pillars (Figure 1):

  1. Our longtime experience accumulated through working on different projects,
  2. Our expertise rooted in our engineers’ know-how of Liferay, in particular, and open source technologies in general, and
  3. Our engineer-to-engineer relationship building capability which has placed us firmly embedded in Liferay expert community.
Figure 1. Successful Liferay Implementation

Experience and Expertise: Managing the Paradox of Catch-22 Situation

When it comes to deploying Liferay Portal in an organization’s hybrid information system, two main factors: experience and expertise, play a significant role. Experience is mainly built through having years of hands-on approach to deploying Liferay on different IS platforms in a myriad of service and manufacturing industries. Expertise, on the other hand, is a matter of accessing, creating, and accumulating abstract knowledge and know-how on the related technology fields. The paradox – the catch-22 situation – therefore is, the two feed on one another. Without expertise, a team cannot deliver on project promises and obtain an enriching experience, and without actually engaging in high impact projects one cannot gain solid expertise. Learning from mistakes, learning to tackle new problems, learning to understand new business models and forecasting needs, all translate into the indispensable interdependence between experience and expertise.

At Savoir-faire Linux, the team of enterprise solutions, which is responsible for Liferay-based projects, comprises 20 highly experienced open source software consultants half of them are Liferay certified. This means that they have successfully completed Liferay training programs and passed the certifying exams. Although Liferay expertise/experience is a necessary condition to successfully complete a Liferay project, it is not sufficient. Java experience/expertise is the complementary piece. For this critical reason, we have hired, trained, nurtured, and empowered a number of experienced Java developers who know about ‘ins and outs’ of Java; namely, technical specifications, philosophy, and ecosystem.

Liferay Community: A Place for Sharing Knowledge and Experience

Liferay community comprises the following: Liferay Projects, Community Projects, Community Feature Ideas, Releases, Forums, Blogs, Wiki, User Groups, Special Activities, Upcoming Events. Each of these elements is a window to countless opportunities for developers, users, researchers and enthusiasts to engage in a meaningful conversation leading to a helpful take-away such as experience, learning, know-how, or even social capital (See Picture 1). Wining five Community Excellence Awards has been a source of pride and gratitude for us since this is a testimony to our community embedment and collaborative software R&D.

Picture 1. An Illustration of Liferay Community Knowledge and Experience Exchanges

At Savoir-faire Linux, we make sure our Liferay experts (Click here to read an example) stay connected, deeply engaged, and collaborate on online open source platforms. In fact, it is one of our core beliefs that optimal software development process depends on open scientific knowledge sharing practices, as embodied in Open Source Initiative’s definition of OS and Debian Social Contract. We also believe, we have the moral obligation to hold ourselves accountable and give back to OS communities, the same way we receive from them. Another example would be the Liferay Montreal User Group which has been a successful initiative to bring developers, clients, and users together to exchange ideas and discuss future road maps.

Picture 2. Map and Logo of the Liferay Montreal User Group Source: https://web.liferay.com/community/user-groups/montreal/welcome


Experience, Expertise, and Community Embedment… So What?

Synergy or exponential knowledge growth is an invaluable gain in open source ecosystem. The real magic happens when you have a team of engineers who know what to do, who have done it a couple of times, and when faced with the unknown, they know how to figure it out and find the missing pieces and/or co-create them in collaboration with other gurus. In business world and organizational context, the synergy of the three pillars within open source software ecosystem leads to several benefits:

  1. business need is met through digital transformation,
  2. End users are satisfied because there is a value-added innovative service to enjoy,
  3. Development costs reduce while margins increase.

Not long ago, we have completed an award winning project called HuGo for Humania Assurance. HuGo Platform has won two prestigious national and provincial recognition: Digital Transformation Award, and SME Grand Prize OCTAS 2017 Lauréat (Picture 3).

Picture 3. Awards Won by HuGo Platform Using Liferay Portal Technology

These awards are tangible artifacts that showcase abstract elements underpinning a successful case of digital transformation. The dedication of top management of Humania Assurance, the expertise, experience and community efforts of Savoir-faire Linux, as well as the accumulated know-how on open source technologies over the past decades collectively create a synergistic and pronounced result. Bottom line is easy to read. The client’s brand name strengthens as an innovative SME in insurance industry. Their end users – the source of revenue generation – enjoy seamlessly a creative service/product which facilitates their insurance policy applications painstakingly, rapidly, and easily. Savoir-faire Linux gains yet another piece of experience, circulates the expertise in-house, and solidify its commitment to progressing Liferay community platform. (read the Case Study)

Shaping the Future Ensemble

We foresee three ways to better shape the future of Liferay based digital transformation. First, we invite enthusiasts to join our Liferay Montreal User Group and participate in the events. We want you to be heard, and to this end, we organize events and invite speakers like Raymond Augé, Senior Software Architect at Liferay (@rotty3000) to make sure you receive quality responses to your queries. Second, contact us and let us know about your specific expertise and experiences. We would love to have you on our team. Third, we are currently inviting new ideas to realize in collaboration with Liferay community, you may want to consider helping us push Liferay technological boundaries forward.

Savoir-faire Linux Announces Gold Sponsorship at Liferay Symposium North America 2017

Montreal, QC – (October 11, 2017) – Savoir-faire Linux – a Canadian leader in providing expertise on a range of open source technologies to enable digital transformation strategies – announces today its participation as a Gold Sponsor at this year’s Liferay Symposium North America, hosted by Liferay.  Liferay makes software that helps companies create digital experiences on web, mobile and connected devices.Liferay Symposium North America will take place from October 16 to 17 in Austin.

This premier event for digital business and technology leaders will include two days of customer case studies, expert sessions, hands-on workshops, networking opportunities, access to Liferay’s top executives and architects, as well as the keynotes from digital experience thought leaders.

Savoir-faire Linux is proud to be a Gold Sponsor at the Liferay Symposium North America”, said Christophe Villemer (Executive VP). “We look forward to meeting other Liferay enthusiasts and offering our expert knowledge and experience in insurance, and banking as well as other sectors such as public services, education, health, mechanical and industrial to the attendees.”

This digital business technology event will showcase the company’s experience, expertise and excellence in Liferay technology field and it is poised to unveil their expertise in other domains of open source software as well.

To obtain more information on our Liferay services, please directly contact Marat Gubaidullin (VP Integration Platforms & Artificial Intelligence) through email (marat.gubaidullin@savoirfairelinux.com) or by phone (+1 514 276 5468   ext. 162).

Mastering the Thumbnail Generator with Liferay 7 CE and DXP

The Thumbnail Generator aims to improve and facilitate the generation of thumbnails provided by Liferay.

This plugin was created during a project requiring a large number of thumbnails with precise dimensions in order to minimize the loading time of the web pages. Currently, Liferay is only capable of generating two different sizes of thumbnails, when a new image is uploaded on an application (using the dl.file.entry.thumbnail.custom* settings of portal-ext.proprties). This new plugin, however, allows you to have full control over the number of thumbnails created as well as the way they are generated.

This article is structured as follows. After briefly describing the main components of this plugin, I will explain how to configure it in order to manage an unlimited number of thumbnails with Liferay.

I. Describing the Plugin Components

The Listeners
The Thumbnail Generator uses two Model Listeners to listen to ”persistence events” like the creation, modification and deletion of documents in Liferay application. A document can match any file’s type (text, image, video, pdf, …). Later, you will learn how to configure the plugins in order to process only relevant documents.

The first Listener listens for the creation and modification of a document, then it creates or updates the document’s thumbnails. The second listens for the deletion of a document, and deletes the thumbnails associated with this document in the aftermath.

The Servlet Filter
The Servlet Filter intercepts all requests calling for a document of the application and performs a series of validation before returning a thumbnail in response. It will first analyze the parameters of the query in order to know if a thumbnail is requested. Next, the filter is going to verify that the thumbnail does exist in order to finally return it to the author of the request. If one of these checks fails, the query will be ignored by the filter and it will follow its normal course – i.e. returning the original document requested.

The ThumbnailService
Lastly, the ThumbnailService handles the creation/deletion of the thumbnails and organizes them in the storage system of Liferay, using the plugin’s configuration.

II. Using the Plugins

The use of the Thumbnail Generator entails configuring the plugins and retrieving the thumbnails.

Configuration
The Thumbnail Generator’s configuration page (Menu => Control Panel => Configuration => System Settings => Thumbnail Configuration) allows you to define two options:

  • The format of the files that will be processed by the plugin.
    For example, to restrict the creation of thumbnails for JPG and PNG files, simply add these formats to the configuration and all the other files will not be taken into account by the plugin.
  • The command lines that will generate the thumbnails.
    In order to define a thumbnail and to generate it, you need to add a line in the configuration with the following syntax : ‘name:command‘. The name will later provide access to this thumbnail, the command corresponds to the command line that will generate the thumbnail (see ImageMagick’s documentation to explore all possible options). For example : ‘img_480:convert ${inputFile} -resize 480×270 ${outputFile}‘ will generate a thumbnail of dimension 480×270 and that will be retrievable through its name « img_480 ».

Thumbnail Generator configuration page

In the above screenshot, three different thumbnails will be created for each JPG and PNG files uploaded in the application.

The plugin’s configuration not only allows the user to control the number of thumbnails to be generated, but also the way in which they are created. In this scenario, the ‘convert command’ comes from the powerful image editing library ImageMagick. Instead of this command, we could have used any other commands executable on the machine hosting the Liferay application.

Thumbnails’ Retrieval
Once the plugin is deployed and configured, it is ready for use. Thumbnails will be automatically generated each time a document is uploaded into your application. In order to retrieve the thumbnail of the document, you just have to add the parameter “thumb={thumbnailName}” in the URL using this document.

An Example of Thumbnail Retrieval Process

  • The URL of a document (test.jpg) on a local instance of Liferay looks like this : http://localhost:8080/documents/20147/0/test.jpg/0d72d709-3e48-24b3-3fe6-e39a3c528725?version=1.0&t=1494431839298&imagePreview=1
  • The URL of a thumbnail associated to this document, named img_480, can be called this way : http://localhost:8080/documents/20147/0/test.jpg/0d72d709-3e48-24b3-3fe6-e39a3c528725?version=1.0&t=1494431839298&imagePreview=1&thumb=img_480

III. Administration

In order to give more control to the user in the management of this module, an administration page (your site > Configuration >  Thumbnails administration) has been created allowing you to perform some actions on the thumbnails:

  • Re-generate all the thumbnails
  • Delete all the thumbnails
  • Delete orphans thumbnails (Which are no longer linked to any documents but are still present due to a change in the configuration)

Thumbnail Generator administration

In conclusion, this brief tutorial introduces to you the Liferay’s utility app called Thumbnail Generator and describes how to use, configure, retrieve the thumbnails and administer the plugin. Should you have any further questions or comments please contact us.

Liferay DXP on Azure: A Practical Case Study

When it comes to deploying a common Java server on a common cloud infrastructure, a range of possibilities crosses one’s mind. This article presents some feedback on a particular, real-life, case of deploying Liferay Digital Experience (DXP, aka. Liferay 7 EE) on Microsoft’s Azure cloud platform.

Initial Shopping List

  • Liferay DXP, with Enterprise Subscription, fitting in the compatibility matrix
  • Process of deploying Liferay DXP on Azure
  • Reliance on SaaS solutions as much as possible
  • Use of infrastructure & platform provisioned by Ansible

The Happy Path : Azure SaaS Building Blocks

In this process, we consistently use Azure’s SaaS platform. We set up the following three (3) services:

Service I : Azure SQL database

Our team configures Tomcat JDBC using driver sqljdbc42.jar from https://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=11774 .

Instructions :

/etc/tomcat8/Catalina/localhost/ROOT.xml :

<Resource
    name="jdbc/LiferayPool"
    auth="Container"
    type="javax.sql.DataSource"
    driverClassName="com.microsoft.sqlserver.jdbc.SQLServerDriver"
    url="jdbc:sqlserver://******.database.windows.net:1433;databaseName=*******"
    username="liferay-dev"
    password="*******"
    maxActive="100"
    maxIdle="30"
    maxWait="10000"
>

(note : there seems to be a new MS-SQL JDBC release going on github)

Service II : Azure files

We set up the Liferay document store library using the Advanced File System Store mounted locally on Liferay’s VM. For the mounting process we use CIFS from an Azure file share.

Instructions :

/etc/fstab :

//<storage account name>.file.core.windows.net/<file share name> /var/lib/liferay/data-remote cifs vers=3.0,username=<storage account name>,password=<storage account key>,uid=tomcat8,gid=tomcat8 0 0

/var/lib/liferay/osgi/modules/com.liferay.portal.store.file.system.configuration.AdvancedFileSystemStoreConfiguration.cfg :

rootDir=/var/lib/liferay/data-remote


Service III : Azure Application Gateway

We use an Application Gateway to handle a)SSL termination ; and b)load-balancing of the web traffic between two Liferay instances (round robin only).

In order to convert the SSL certificate + chain + key to Azure’s .pfx bundle, use :

$> openssl pkcs12 -export -out <new pfx filename>.pfx -inkey <key filename>.key -in <certificate with chain filename>.crt -passout pass:<new pfx password>

The Plain Old Virtual Machine Part

Liferay DXP itself is installed on an Ubuntu Virtual Machine. This matches the recommended installation scheme for a production instance, which is deploying Liferay in the system tomcat8 installation. Liferay Hot Fixes and Service Packs can also be installed in this context, using Liferay’s patching-tool utility.

The Unexpected : Boundaries of Liferay’s Compatibility Matrix

Liferay DXP uses Elastic Search by default as its indexing and search provider. To stay within the compatibility matrix on production, Elastic Search needs to be hosted on a separate, dedicated Java Virtual Machine (JVM) (as opposed to the default development scheme which embeds ES alongside Liferay in a single JVM). Azure does not propose any Elastic Search as a service (managing your ES cluster is up to you). Furthermore, in order to secure a connection from Liferay DXP to a remote Elastic instance (e.g. Elastic cloud), you will need the extra “Liferay Elastic Shield Integration” marketplace item, purchasable as part of the Enterprise Search Add-On Subscription. This extra item would allow you to use Elastic Shield, though you cannot stay in the compatibility matrix today using Elastic Cloud, as its ES version is more recent than the one officially supported by Liferay.

Following this approach, we can install a 2.2 Elastic Search instance on a VM accessible from Liferay without having any need for Elastic Shield (on the same machine or internal network). Figure 1 below presents the summary of the global scheme explained here.

Figure 1. The Summary of the Global Scheme

Based on Figure 1 above, and the detailed explanations we can map three alternatives which can be evaluated and tested in future. First, it seems that the pre-packaged Liferay appliance allows for a single-click deployment on Azure but only for CE edition only. This is one avenue for further discovery. Second, we need to explore and evaluate the feasibility of pushing various Docker Liferay images to Azure Container Service and identify which ones do not offer this possibility. Third, is it possible to deploy Liferay as a custom Azure Web App? This is yet another issue to pursue further. For more insights on deploying Liferay Digital Experience Platform (DXP) on Microsoft’s Azure cloud platform stay tuned…