Top 5 New Features in Liferay DXP UI Development

The release of Liferay DXP 7 brings with it many changes to the way we develop Liferay themes and layout templates. Although sometimes change can be scary, Liferay UI development has never been easier or more efficient than with the tools we can now bring to bear when developing Liferay DXP themes and layouts. Let’s dive in and explore what is new in Liferay DXP UI developmment.

Bootstrap 3

Liferay DXP themes are built on what is, at the time of this writing, the latest released version of the popular Bootstrap front-end framework.

Those of you who have worked with Bootstrap 2 will find yourselves in familiar territory when working with Bootstrap 3. The grid system has been much improved thanks to .span* classes being replaced by column classes for various screen sizes – example: .col-md-6 for medium screens, .col-xs-3 for extra small screens like phones.

Bootstrap 3 takes a mobile-first approach to the implementation of responsive features. A mobile-first design and development approach is essential considering that mobile-only users overtook desktop-only users in 2015.

NPM

The Liferay DXP theme development toolchain relies on packages installed via Node Package Manager. Not only does this mean we can now more easily use modern front-end development tools like Gulp and Yeoman for Liferay theme development, which I will describe shortly, but that we can also incorporate other NPM packages into our development process.

Yeoman

Liferay DXP themes, themelets, and layout templates are scaffolded using Yeoman. Yeoman is a CLI scaffolding tool you can use to generate a multitude of boilerplate applications to bootstrap your development.

Generating a Liferay DXP theme is as easy as running yo liferay-theme after installing Yeoman via NPM. Documentation for the Yeoman Liferay theme generator can be found here.

Gulp

Gulp has taken the place of Ant and Maven as the default build tool for Liferay DXP themes. Gulp is a build system, also commonly referred to as a task runner, that allows you to do do things like concatenate and uglify JavaScript, compile CSS from SASS and other stylesheet languages, deploy your code, and much more.

Liferay DXP themes scaffolded using Yeoman include an array of default Gulp tasks such as build, clean, deploy, and so on. You can find the repository for these tasks and more information about them here.

You can also hook into these default tasks in order to run your own operations without altering the default tasks. For example, if you’d like to minify and concatenate your theme’s JavaScript you would modify your theme’s gulpfile to contain the following.

    
        'use strict';

        var gulp = require('gulp'),
            concat = require('gulp-concat'),
            rename = require('gulp-rename'),
            uglify = require('gulp-uglify'),
            liferayThemeTasks = require('liferay-theme-tasks');

        var jsFiles = 'src/js/**/*.js',  
            jsDest = 'build/js';

        liferayThemeTasks.registerTasks({
            gulp: gulp,
            hookFn: function(gulp) {
                gulp.hook('before:build:src', function(cb) {
                    return gulp.src(jsFiles)
                        .pipe(concat('scripts.js'))
                        .pipe(gulp.dest(jsDest))
                        .pipe(rename('scripts.min.js'))
                        .pipe(uglify())
                        .pipe(gulp.dest(jsDest))
                        .on('end', cb);
                });
            }
        });
    

In the preceding code snippet I am registering a hook function using hookFn and then hooking into the build:src task using gulp.hook() to tell Gulp to run my JavaScript concatenation and minification task before the build:src task by denoting before:build:src within the hook method.

One of the most useful default Liferay theme Gulp tasks is watch.Executing gulp watch in the CLI will cause Gulp to watch for source code changes and execute a hot deploy of your theme when it detects them. This allows you to refresh your browser and see your changes without you having to go through manual deployments or work directly with the theme in the webapps directory. However, don’t forget to enable the developer properties in your portal-ext.properties file.

ES 2015

ECMAScript 2015 is the latest version of the JavaScript language specification that brings a host of new features and syntactical changes to the language. Liferay DXP ships with a Babel polyfill allowing you to use ECMAScript 2015 within Liferay DXP themes and portlets. ES2015 support means you’ll be able to not only use new language features like classes but also package your JavaScript as modules and require those modules as dependencies in other modules within your themes and portlets. Documentation on this new feature can be found here.

Conclusion

I hope you enjoyed reading about what’s new in Liferay DXP (What is a Digital Experience Platform?) user interface development. Be sure to check back early and often for in-depth tips, tricks, and tutorials regarding these topics and more.

 

Additional Reading

You can also continue to explore Liferay DXP by checking out The Top 10 New Features in Liferay DXP 7 and Liferay DXP Audience Targeting 2.0 Overview from a functional perspective or Creating JAX-RS REST Services in Liferay DXP from a development perspective or Top 5 DevOps Features in Liferay DXP from a DevOps perspective.

If you liked what you read, please share this helpful post with your friends and co-workers on your favorite social media here: