React development in Liferay

Liferay is one of the leading opensource digital experience platform based on Java. On the other hand React is the most popular and widely used java script framework currently available in the market.

With the release of Lifeay DXP platform we can create pure javascript based portlet in Liferay. This feature enable us to run single page application created using (React/Angular/ Vue) in Liferay DXP platform which allow developer to take advantages of both Liferay and SPA platform. This article explain about the things we consider and challenges faced during React portlet development in Liferay.

SPA vs Portal Architecture

A Portal is designed to have number of pages and child pages under a site and provide option to add multiple application in a single page. SPA have a completely opposite approach compared to Portal, SPA application have only single page which accommodate all your functionality. When we design a Liferay Portal application with SPA this is the first challenge we face. We have to carefully design pages and child pages in such a way that it will take the full advantages of both Portal and SPA.

For example creating number of portal pages and child pages and creating SPA portlet for each page will impact the performance since SPA initial load time is little bit on the higher side, on the other hand Creating a single portal page and putting a SPA portlet in that with all your functionality and navigation will take you away from the Portal features. So this should be carefully designed and well balanced.

Why we selected React over (Angular/Vue) with Liferay

React is not too opinionated, its flexibility allow us to determine how we want to handle project structure, which third party library to use and flexible enough to integrate with Liferay. Liferay front end development also moving in that direction, and with the release of Liferay 7.3 they are completely rewriting front end in React.

Liferay NPM bundler

Liferay is using its own bundler called Liferay NPM bundler instead of using the most popular bundler currently available like Webpack or Browserify. The following are the reason behind this.

Multiple Portlets can be added in a page

In a Portal page we can add multiple application/portlets, The normal bundler like webpack will fail in this case since its designed to have one application in a page. Liferay NPM bundler is designed to support the following features.

Reuse common module across the page

When you have multiple portlets in a page and all this portlet using some common module, liferay npm bundler will allow to load only one common module in the page and share it among the portlets.

Avoid common module conflict

Use different version of same module in a page : It allow you to use 2 version of the same module in a page

OSGI modular architecture

Liferay follows OSGI modular architecture, modules are interact with each other and share package among them. On the same way liferay uses AMD loader for the JavaScript portlet which ensure the modularity in javascript modules.

Project Setup

We can create React portlet in Liferay 2 ways.

Pure Javascript portlet using liferay-js-generator

The liferay-js Yeoman generator is a tool to generate projects based on a toolchain where npm and liferay-npm-bundler are used to manage project's configuration and build process. You can refer the below liferay documentation to create javascript portlet using liferay-js- generator.

https://github.com/liferay/liferay-js-toolkit/wiki/How-to-use-generator-liferay-js

Java-javascript portlet using Liferay IDE

You can create gradle based portlet with some piece of java code and javascript using Liferay developer studio/ IDE. We have to select new Liferay module project and select npm-react-portlet from the project template to create this type of project.

Note :- this feature supported from Liferay Developer studio 3.8 version onwards only.

Challenges

Below are the challenges we faced in real time while developing react based portlet.

Final Jar size is too large : Liferay NPM bundler will add all the dependencies mentioned in package.json into your module final jar file. This will increase the jar size when you add new dependencies.

Production ready JS bundle size is large which impact the performance

Taking Long time to build and deployment.

Limited option to optimize the final bundle

Some third party packages are not supporting

Disadvantages of React portlet vs Liferay MVC.

I believe Liferay MVC portlet is the best way to develop custom application in Liferay since all the Liferay built in service and API's are accessible.

In React portlet we have to depend on Liferay JS object which have limited option as of now.

Liferay Local services (service builder generated) are not accessible in React portlet, instead we have to depend on remote services and initiate ajax call to consume it using Liferay.Service methods.

Request and Session objects are not directly available in React portlet, we have to do some workaround to read those values.

About Author:

I am Deepak Poilil, working as a Senior Lead Software Engineer at Collins Aerospace System. Having 11 plus year of experience as a software developer, I love design, development and architecture enterprise application using JAVA and JavaScript technologies. Our primary focus to deliver enterprise application with best user experience using the latest technologies and skills currently available in the Market. I always focus on 4 parameters while developing web and system applications, robustness, scalability, reusability and performance.Read More...