Introduction to Front-End Development

Liferay Portal offers complete developer front-end freedom. Whether you like coding JavaScript by hand, have used Liferay’s front-end frameworks in the past, or prefer jQuery, Lodash, or modules, you can use your front-end framework of choice.

Prior users of Liferay Portal can continue to use Liferay’s venerable Alloy UI, but you are also free to use the front-end technologies you love the most:

  • EcmaScript ES2015+
  • Metal.js (developed by Liferay)
  • AlloyUI (developed by Liferay)
  • jQuery (included)
  • Lodash (included)

To load modules, you must know when they are needed, where they are located at build time, if you want to bundle them together or load them independently, and you must assemble them at runtime. Keeping track of these tasks can be a hassle. Liferay Portal’s Loaders (YUI/AUI, AMD, and npm in AMD format) handle loading for you, so you don’t have to worry about all the details. Just provide a small bit of information about your module and Liferay Portal’s loaders take care of the rest.

You can use npm in your portlets. To do this, you must create an OSGi bundle with all the npm dependencies extracted and modified to work with the Liferay AMD Loader. Liferay Portal’s liferay-npm-bundler is built for just this purpose, and even provides several presets for common module types (AMD, React, Angular JS, etc.) to save you time.

If you include the liferay-npm-bundler in your project, with just a small amount of configuration, the liferay-npm-bundler bundles your portlet for OSGi and transpiles your code for the Liferay AMD Loader, which lets you share JavaScript modules and take advantage of semantic versioning among portlets that use the same npm modules on the page.

Lexicon and Clay

Liferay Portal uses its own design language, called Lexicon, to provide a common framework for building consistent UIs and user experiences across the Liferay product ecosystem. The web implementation of Lexicon (CSS, JS, and HTML) is called Clay. It is automatically available to application developers through a set of CSS classes or our tag library.


For templating, you can use Java EE’s JSP as well as FreeMarker, but the platform’s modularity enables using Google’s Soy (aka Closure Templates), or whatever else you like.


A Liferay Portal Theme provides the overall look and feel for a site. Themes are a combination of CSS, JavaScript, HTML, and FreeMarker templates. Although the default themes are nice, you may wish to create your own look and feel for your site.

From the Theme Builder Gradle Plugin, to the Liferay Theme Generator, to Dev Studio CE, to Blade CLI’s Theme Template, Liferay Portal lets choose the development tools you’re most comfortable with so you can focus on creating a well designed theme.

Front-End Extensions

Liferay Portal’s modularity has many benefits for the front-end developer, in the form of development customizations and extension points. These extensions assure the stability, conformity, and future evolution of your applications.

Below are some of the available front-end extensions:

Read on to learn more.

0 (0 Votes)
Finding Extension Points Previous