Blogs

Those of you who were following the Frontend trends the last two years, would know that there was a big movement toward the next version of JavaScript, previously know as ES6 and now as ECMAScript 2015 (ES2015).

If you just want to know what is this blog post about, here it is - writing ES2015 and loading JS modules as specified in the standard, as well as installing and using third party libraries via Bower is now possible in Liferay Portal!

To show you what we did, we prepared an astonishing demo for you. It shows more or less what you can do in Portal right now:

• Writing ES2015 code which runs on IE9+, Safari, Chrome and Firefox.
• Installing third party modules via Bower and use them in your Portlets from both JSP and JS files.

Here is the video, watch it and read the rest of the post for more details:

Using ES2015 features in Portal

Why is this such a big deal? Well, since the Ajax explosion in 2004/2005 we were writing ES3 (ecma-262-3) code and recently - ES5 (ecma-262-5). ES5 was a big improvement over ES3, but still in the Frontend world the patterns were not so well established.

The committee, which drives JavaScript forward (TC39) listened to the community and added to the language many of the patterns, which the community accepted as de facto standard. Moreover, they also fixed some of the well known glitches in the language.

The changes in ES2015 are many, but maybe the most important improvements are:

1. Arrow functions
2. Modules
3. Destructuring
4. Generators
5. Promises
6. Template literals
7. Spread operator
8. New object literal features (including method definitions)
9. let and const
10. Rest parameters

Credits to Dr. Axel Rauschmayer for the above list.

As you may guess, these features are too new and even the modern browsers like Chrome, Firefox and Microsoft Edge lack some of them. They will be added of course, but the web developers don’t want to just stay and wait. They want them here and now. From the other side, these features are not presented in IE < 11 and will never be and by the way, even in IE11 just a few of these are being supported. And we want to write consistent code which runs out-of-the-box in all of these browsers.

So, how come you can use these features right now in Liferay Portal? Well, for a long time different projects were invented in order to transpile ES2015 code to ES5. The most popular project is BabelJS and we picked it to do the transpilaton in Portal. So yes - everything which Babel transpiles, you can use here and now.

Loading JavaScript code in Portal

Please take a look again on the list with features. As #2 it is written “Modules”. Here is where our biggest problems were. In short, the main question was - how to load JS files, if we are going to get rid of YUI?

As you probably know, AlloyUI was built on top of YUI and for many years we were writing our code in the module format, specified by YUI. However, to load and run JS code in browsers, many people preferred another format, called “AMD”. Unfortunately, none of these two was part of any standard. So, when Yahoo stopped YUI in 2014, we had to choose something else. We went through many options, but three were shortlisted:

1. Switch to AMD and load the modules using the most popular AMD loader - RequireJS
2. Use Webpack
3. To use the modules, as specified in ES2015. That was what we decided to do, despite this was the hardest road.

Loading ES2015 modules in Portal

How exactly you load ES2015 modules in Liferay Portal? On first glance there were so many obstacles, that it looked impossible, but we finally managed to do it. What we did was to transpile the modules from ES2015 format to AMD and to create two NodeJS projects:

1. An AMD compliant (well, almost) Loader, which was able to load the files using our combo service.
2. Config generator, which basically creates the module configuration automatically so we can calculate the dependencies in the browser and loading the modules without making multiple requests.

Installing components via Bower

Bower is a well known package manager, often used in the Frontend world. In your OSGi modules you will have a chance to install modules via Bower, and if they export themselves as AMD modules, to load them too.

Wrap up

This is huge step for Portal. This will be our new way to write JS code and load modules for the future. YUI will disappear and we will follow the road, as drawn by ES2015.

We hope you liked this. We are happy with the results so far, but this is not the end. Now is the time to hear your opinion and improve what we have!

Thanks,

The Liferay UI Infrastructure Team