Liferay DXP is a comprehensive technology offering an environment with implemented solutions that meet many needs that web applications built today have to meet. Although it’s possible to easily prepare basic application elements utilising languages like HTML, CSS, JavaScript and jQuery, to meet more complex and specific demands, you can leverage more advanced frameworks. Examples include Angular, Metal.js, Vue, React or even Java-based ones such as MVCPortlet, Liferay Faces, PortletMVC4Spring and Bean Portlet for more sophisticated and tailored solutions.
🤔 Are you new to the Liferay technology? Make sure to read the easy Liferay introduction or watch the step-by-step Liferay video tutorial prepared by my colleagues
In Liferay, app components that meet a customer’s specific business needs are called “portlets” and can be placed anywhere in the application.
Portlets allow you to place the logic of an entire small application within a bigger one – Liferay. This allows you to use such small apps as widgets on your main page (and other pages of your choosing, even ones that aren’t connected in any way). You set this up on an existing page via a drag & drop interface or create an entirely new one dedicated to fulfilling specific needs.
Image source: Liferay Help Center.
Thanks to this approach, it’s possible to implement the page styles both locally, affecting only a single portlet, and also globally, affecting the appearance of the entire page. You can also create the front end of each small application you use with a different technology – though it has to be one that’s supported by the platform.
The Liferay platform has gone through numerous changes over time in terms of front-end development. The technologies enabling portlet creation have changed, and the philosophy behind their use has also evolved. Liferay in versions before GA Liferay 7.3 GA1 (General Availability) used Soy and Metal.js as the default way to create complex interfaces. These technologies were developed by the Liferay team to create an optimal solution to meet complex business needs via custom portlets. In the case of lower-complexity problems, MVC (Model View Controler / Modal Veal Contractor pattern) portlets were used since they were quite enough for such purposes – in fact, they are optimal for non-complex applications.
The current approach still uses MVC portlets to create simple solutions due to the wide familiarity among developers, short compilation time and the efficiency of server-side rendering. However, the approach to creating solutions for more complex business problems changed drastically. The new approach assumes the use of commonly used libraries and frameworks for this purpose – in particular, it’s recommended to use React. This is due to many beneficial features of these solutions, such as an open source license, wide availability of supporting tools, numerous and mutually supportive communities gathered around them, and a relatively short time required to transform business needs into code.
This means that, ultimately, front-end development is not limited to just one option. The front end in Liferay DXP has been prepared to be as neutral as possible concerning the technologies used. It’s possible to choose the technology in which you feel the most comfortable. It’s a good approach, considering the large range of solutions available in the front-end technology market today. You can use the potential of an existing solution, and you can choose one that suits your company’s business needs best.
Image source: Logos-world.net.
The first way to develop front-end interfaces is by using technologies based on Java EE standards – because Liferay itself is based on Java. The platform currently offers four Java-based solutions for front-end portlet development. Each of them has its own features that allow the technology to be adapted to the project’s specific needs.
Liferay DXP supports the JSR 362 Portlet 3.0 standard, which is backwards compatible with the JSR 286 Portlet 2.0 standard from the Java Community Process (JCP). These standards define new features added to the Java platform related to creating portlets. Currently, the only framework that fully supports the Portlet 3.0 standard is the Bean Portlet.
Let’s take a closer look at all these options.
The Liferay MVCPortlet tool is extremely popular among experienced Liferay developers and has been an integral part of Liferay core development for over 10 years. MVCPortlet has been carefully designed to be fully compatible and highly extensible, adapting to the diverse needs of the Liferay platform. Using OSGi DS (Declarative Services), a specification of the Open Service Gateway Initiative, the tool enables dependency injection and the definition of configurable extension points.
Because both the Liferay DXP core and the applications developed in Liferay make extensive use of DS, experience with this technology makes it much easier to develop extensions and customizations for Liferay DXP. Liferay MVCPortlet integrates perfectly with many Liferay frameworks, covering MVC commands, Service Builder, and more.
This approach is an ideal choice for Java developers looking for a simple front-end development framework that will allow them to meet particularly complex business requirements. As part of this solution, you create a front-end application using JavaServer Pages (JSP) – a technology that allows code written in Java to be inserted directly into HTML code, similar to creating pages in PHP. Thanks to this, web documents in HTML, XHTML, DHTML and XML formats can be dynamically generated.
Liferay Faces is an open-source project that supports using the JSF (JavaServer Faces) standard to create modular and interactive Java EE-based portlets. Liferay Faces includes the following projects:
In this approach, JavaServer Faces developers can use Liferay-specific tools to facilitate application development, such as the LiferayPortletHelperUtil tool, which offers various methods to facilitate the use of Portlet-API and Liferay-specific tools. Additionally, JSF Components provide a set of equivalents for popular tags offered by Liferay DXP JSP, and Expression Language adds a set of expression language keywords such as “liferay” for obtaining Liferay-specific information, and “i18n” for integration with the available default internationalized messages in Liferay.
Spring Portlet MVC, now maintained as PortletMVC4Spring, is a popular way to develop portlets using the Spring framework and the Model-View-Controller (MVC) pattern. While the Spring framework supports developing servlet-based applications with Spring Web MVC, PortletMVC4Spring supports developing portlets according to the JSR-362 standard.
Thanks to this approach, Java developers can create portlets for the Liferay DXP platform using the functions offered by the Spring Framework, which significantly lowers the entry barrier, increases work comfort and enables the use of extensive documentation and the community centered around the Spring framework.
Bean Portlet is an innovative method for developing portlets in Java (of course, it’s worth noting that Java isn’t the premier choice for front-end development programming language – JavaScript reigns supreme in this area), introduced in the Portlet 3.0 standard compliant with JSR 362.
Although the tool is currently in development and not yet available, it promises to revolutionize the field of portlet creation. The key distinguishing feature of Bean Portlet is the proposed programming approach, where portlets are ordinary Java objects (POJOs). They don’t require extending any specific class but are declared as portlets in descriptors instead, providing a more flexible and understandable approach to application development.
The tool takes advantage of new features introduced in the Portlet 3.0 standard within the Liferay DXP environment. One of the key aspects is the use of Contexts and Dependency Injection (CDI), which allows for better management of dependencies between application components. Additionally, Bean Portlet introduces extended annotations for methods, which allows for a more flexible definition of portlet behavior in different phases of the lifecycle. The framework also offers clear render state management, so developers can precisely control when and how a portlet should be rendered. Additionally, Bean Portlet supports various types of parameters, such as Action, Render and Resource parameters, which makes creating interactive and dynamic portlets more intuitive. The last innovation introduced is support for asynchronous operations, which enables effective use of system resources and improves the responsiveness of portlets.
Thanks to these advanced features, Bean Portlet should give developers full control over the process of creating portlet applications while providing modern tools for effective and efficient work – or at least, that’s the theory. We’ll have to wait for release to verify how effective the tool is in actual development.
Image source: Wikipedia.
Liferay DXP lets you use the most popular frontend libraries and frameworks (such as Angular, React and Vue) in portlets. Development in these technologies is consistent with practices used outside the Liferay environment, using tools such as npm and webpack.
With Liferay JS Generator, you can create portlet packages (individual projects) for developing and deploying applications built using one of these technologies. The package contains ready-made npm commands for building, testing and deploying applications. The application’s dependencies (including JavaScript packages) are then packaged, and the package is deployed as a JAR file and installed into the Liferay DXP runtime, allowing access to the application as a widget.
React is currently the most popular library among JavaScript frameworks. Its documentation is detailed and precise, and the framework offers high performance. The entry threshold is relatively low while allowing you to choose from many components and libraries, which streamlines the application development process. The number of available components and libraries constantly grows, and the React library is systematically developed and improved. The Liferay team currently recommends React as the safest choice of frameworks available, as evidenced by the move from MetajJS to React in Liferay 7.3.
Liferay provides tools designed to streamline and simplify the process of creating React-based portlets. There are two approaches to developing new React applications. The first one involves manually creating a new project without using the tools provided by Liferay, while the second one allows you to significantly shorten this process by using existing solutions.
In the case of manual installation, the user must configure the metadata and portlet themselves, which requires knowledge of the liferay-npm-bundler, dependency management (e.g., Babel) and portlet configuration. You should also know how to properly specify a stylesheet file, such as an SCSS file, and use the NPMResolver API to achieve high-quality and maintainable code. After adding the code responsible for rendering the component, it is necessary to place it in the view.jsp file, enabling the prepared portlet to be used in the application.
If you decide to use ready-made tools for creating portlets based on the React library, you face a much simpler configuration process. In this case, it is possible to use one of two command line tools: Blade CLI or Maven. Creating a new portlet implementing React is limited to invoking the appropriate command.
Let’s say you want to create such a portlet. To generate a React portlet, it is necessary to use the npm-react-portlet template. Let’s assume you want the portlet project to be named new-react-portlet, have a package name of project.npm.react, and a class of NewReactPortlet. Additionally, you’d like to create a service of type javax.portlet.Portlet that extends the com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet class.
To achieve this goal, you can use one of the following commands, depending on the tool you are using.
If you use Blade:
blade create -t npm-react-portlet -v 7.1 [-p packageName] [-c className] projectName
If you use Maven:
mvn archetype:generate \ -DarchetypeGroupId=com.liferay \ -DarchetypeArtifactId=com.liferay.project.templates.npm.react.portlet \ -DartifactId=[projectName] \ -Dpackage=[packageName] \ -DclassName=[className] \ -DliferayVersion=7.1
Differences in project generation by these two commands include the existence of a pom.xml file and the lack of Gradle-specific files when using the Maven CLI. Despite these differences, both resulting designs are identical. The created module is a fully functioning portlet that can be deployed within the application. To introduce modifications and extensions, proceed similarly to creating any other React application.
To facilitate developing and managing components made using React, two very useful tools have been created:
<react:component data="<%= data %>" module="js/pages/FirstPage/ExampleApp.es" />
You can also deploy your existing React app on Liferay DXP and use it as a widget on your website pages. Unfortunately, even though such an option exists, this solution doesn’t provide access to the bundler and loaders necessary for further project development in the Liferay environment. To take advantage of all the features offered by the Liferay platform, you must use tools such as Liferay JS Generator and liferay-npm-bundler, which allow you to merge files into a portlet package, update paths to static resources, and deploy the package.
The main competitors of the React library are Vue and Angular frameworks. While both are great solutions that are on par with React, React was chosen as the preferred solution by the Liferay team. However, this doesn’t mean these technologies should be excluded or considered inferior for any reason.
Integrating Angular and Vue in Liferay DXP is similar to configuring a React portlet, and each option enables the implementation of very complex business needs. The configuration differences are minimal and result from the specificity of each solution, but neither can be considered more difficult than others. Therefore, the choice between them is often a matter of personal preference, existing tech stack, developer availability, and a thorough analysis of your requirements and the possibility of meeting them with a given solution.
As with React applications, in the case of both Angular and Vue, it’s possible to integrate existing projects into portlets within Liferay – and the process is nearly identical. The only significant difference in developing portlets using Angular or Vue instead of React is the lack of tools mentioned in the previous section of this article, which help you create and manage them.
🔥 Still maintaining apps written in the legacy AngularJS framework? Check out the popular AngularJS to Angular migration guide written by my colleagues
Metal.js, while conceptually promising, turned out to be a failure for the Liferay DXP ecosystem. When creating this framework, the developers aimed to provide developers with a tool to create dynamic UI components easily. Metal.js uses similar principles to React – based on one-way data binding – which made it an attractive option for those who were already familiar with this popular library. One of its key features was template flexibility, which enabled it to support both the Soy language (a Java-like language used in Google Closure Templates), and JSX, a popular JavaScript extension known from React (among other technologies).
Due to the dominance of the React library on the market, the creators of Metal.js decided to imitate this popular library as closely as possible, integrating it with JSX – an extension to JavaScript that enables the declarative creation of DOM tree structures. In the context of Metal.js, JSX was a powerful tool for defining user interface components. With an XML-like syntax, it made writing readable and concise code easier, which had a positive impact on the intelligibility of the user interface structure.
Image source: The Software House.
JSX integration not only improved the readability of the code in Metal.js, but also enabled developers to take advantage of advanced features such as lifecycle components. As a result, using JSX within Metal.js simplified the process of creating the user interface and helped increase the performance and flexibility of this JavaScript framework.
For those looking for an alternative to JSX, Metal.js offered support for Soy templates. It was a set of tools that allowed you to generate HTML, XML, JS, etc., effectively. Soy portlets were an extension of the MVC portlet framework in the Liferay environment. Thanks to this, developers had access to the full functionality of the MVC portlet and, at the same time, could use the advantages of Soy templates to build the front-end layer of the application.
Soy, known for its isomorphic nature of templating language (it can be used both server-side and client-side), integrated beautifully with Metal.js to provide a solid design solution user interface. Liferay invested a lot of resources in the development of Metal.js, believing that it can be the solution to many problems. However, despite all efforts, the expected performance couldn’t be achieved. Metal.js also didn’t gain recognition in the community – in practice, its users were mostly limited to the framework’s creators.
Liferay has spent many years developing Metal.js technology, believing it to be the Golden Grail. However, along with Liferay 7.3, the team decided to leave the framework in favor of the React library. This strategic move was intended to better align Liferay with standards and trends in the front-end world while ensuring greater popularity and community support. Despite the setbacks, Metal.js remains a part of Liferay’s history, and an important step in the evolution of the platform that provided valuable experiences and lessons.
I hope that this introduction to the technologies used in Liferay DXP front-end development sheds light on the complexity and evolution of this platform over the years. The subsequent stages of development that Liferay has gone through perfectly illustrate the constant changes in the world of front-end programming.
The platform has been on the market for many years, which forced it to constantly adapt the offer of supported technologies to the current needs of developers. As a result, it now supports a wide range of front-end solutions that enable the creation of portlets. This versatility is one of Liferay’s biggest advantages that helps it maintain, and even constantly grow, its user group. Nowadays, you don’t even necessarily need to know JavaScript to create an effective application. Moreover, work is underway to further lower the entry threshold for creating a front end on the platform – by introducing the Bean Portlet.
To summarize, frontend development in Liferay DXP offers developers diversity and flexibility, enabling technology to be tailored to specific project needs. The Liferay team has created an environment that not only follows trends in the front-end field but also actively supports developers in creating innovative and effective web applications. Additionally, regardless of technology choice, you can count on high-quality documentation, which is always great to see.
Do you want to develop a front end for your system in Liferay, but lack the necessary expertise? Consider outsourcing your project to an outside vendor. At Pretius, we have experience creating great custom software using this technology. Reach out at hello@pretius.com (or use the contact form below) and tell us your needs. We’ll get back to you in 48 hours.
