Blogs

TL;DR

Continuing with our efforts to make Liferay Portal technology agnostic - as David Truong explained us in his post The State of Frontend Infrastructure  - all jQuery usages have been removed, and now the library is not being loaded by default in master, and will be disabled in the next 7.3 CE GA2 as well.

What have we done?

As part of our efforts of reducing the quantity of different libraries and frameworks used in Liferay Portal, this comes as a big step on.

This has been a huge and delicate epic that affected not only Frontend Infra components but also many applications with different risk levels. 

Following the same strategy we followed with Lodash, now we’ve replaced all jQuery usages with native JavaScript solutions in most of the cases, but also with some of our already existing Clay Components. In the past there were loads of legacy code that used jQuery to achieve things that couldn’t be easily done natively, but thanks to all the features present in ES6 and to the polyfills we’re introducing in Portal we can now get rid of it. And after doing it we could disable the downloading of jQuery by default.

So… can’t I use jQuery anymore?

You can, but you must not. jQuery can be enabled via System Settings / Third Party for those users that want it to be loaded globally instead of importing it on the module they’re using it. But for Liferay’s Portal development we’re not using it anymore.

What can I use then?

Most of the things you’ve been doing with jQuery can be done with pure JavaScript. You can check http://youmightnotneedjquery.com to see direct replacements.

For some Bootstrap JS components (tabs, dropdown and collapse) we created some simplified alternatives that work in the same way bootstrap does, but using data-toggle=“liferay-(dropdown|collapse|tab)” instead original BS API. Anyway, while possible, it’s preferable to use Clay Tags or components (2.x for Soy and 3.x for React).

Tasks

If you're curious about this topic and want to deep dive on what we've done you can take a look at the jQuery Usages Removal Epic, where all related tasks are listed.