You have complete front-end development freedom. You can use Liferay DXP’s front-end frameworks, along with the front-end technologies you love the most:
- EcmaScript ES2015+
- React, Angular, Vue, etc.
- Metal.js (developed by Liferay)
- AlloyUI (developed by Liferay)
- jQuery (included)
- Lodash (included, but disabled by default)
To load modules, you must know when they are needed, where they are at build time, whether they should be bundled together or loaded independently, and you must assemble them at runtime. Liferay’s Loaders (YUI/AUI, AMD, and npm in AMD format) handle loading for you. All you must do is provide a small bit of information about your module.
The Liferay JS Bundle Toolkit(the
JS Portlet Extender,
Liferay Bundle Generator,
and
liferay-npm-bundler
) has the tools you need to create and develop JavaScript portlets with pure
JavaScript tooling. You can use the
liferay-npm-bundler
to bundle npm packages in your applications. It even has several presets for
common module types (AMD, React, Angular JS, etc.) to save you time. It creates
an OSGi bundle for you, extracts all npm dependencies, and transpiles your code
for the Liferay AMD Loader.
While developing JavaScript applications, you may need to access
Liferay DXP-specific information or web services. The Liferay global JavaScript
Object
exposes this information for you,
to use in your JavaScript applications.
Lexicon and Clay
Liferay 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.
Templates
For templating, you can use Java EE’s JSP, FreeMarker, or whatever else you like.
Themes
Themes use the standard components (CSS, JavaScript, and HTML) along with FreeMarker templates. Although the default themes are nice, you may wish to create your own look and feel for your site. The Liferay JS Theme Toolkit has all the tools you need to create and develop themes, but you can use the tools you prefer.
From the Theme Builder Gradle Plugin, to the Liferay Theme Generator, to Blade CLI’s Theme Template, you can choose the development tools you like best, so you can focus on creating a well designed theme.
Front-End Extensions
Liferay DXP’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:
See Theme Components and Understanding the Page Structure for more information.