Introduction to Front-End Development

When approaching the development of your application’s front-end, Liferay Portal offers a wide range of approaches, frameworks, utilities, and mechanisms to make your life easier.

JavaScript

If you’ve used Liferay in the past, you can of course continue to use Liferay’s venerable Alloy UI, but you are also free to use the front-end technologies you love the most:

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

Lexicon

Liferay Portal follows a design language created by our designers called Lexicon. It is automatically available to application developers through a set of CSS classes, or our tag library.

Templates

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

Themes

A Liferay Theme is 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.

In Liferay Portal, Liferay provides an easy-to-use tool called the Liferay Theme Generator that helps automate the theme development process.

Themes created with the Liferay Theme Generator give you access to theme gulp tasks that offer basic functions, such as build and deploy, along with more complex interactions, such as auto deploying when a change is made and setting the base 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:

JavaScript in Liferay Portal

Liferay Portal’s front-end is extendable, flexible, and future ready. Like previous versions, many components are written using AlloyUI. AlloyUI is based on YUI, and is no longer under active...

Read More

Metal.js

Metal.js is a lightweight, easy-to-use JavaScript framework that lets you create UI Components with ease, thanks to its integration with templating languages. Figure 1: You can create UI’s easily,...

Read More
0 (0 Votes)
Fundamentals Previous