The Joomla! Community Magazine™

Joomla JavaScript, Fix it Right?

Written by | Sunday, 01 September 2013 00:00 | Published in 2013 September
Today, the Joomla CMS is mainly implemented using PHP where JavaScript (JS) and CSS are contributing as minor supportive technologies. Joomla mainly uses JS to improve usability by providing rich interactions and responsiveness, but is it done right? Can we improve it? What are the new technological advancements related to JS? Can we use these in Joomla? This article is an attempt to answer these questions and bring more attention to improving Joomla CMS’s JS usage.
Joomla JavaScript, Fix it Right? image by @Helvecio

Current State of JavaScript Usage

Joomla uses JS throughout the CMS with customary written code, as well as in libraries like jQuery and MooTools. JS code is not only present in ".js" files, but also is included within PHP code, which create maintenance overhead. The usage of JS libraries is not uniform, and some of the libraries are more specific than generic to a particular section which dramatically reduces the reusability of these libraries. Most of them are tightly coupled with DOM elements, and some are even attached to DOM immediately when it's ready. This becomes a problem when a single page is composed of different views that depend on these scripts, where a single dependent script for a particular view applies globally for all the views. In Joomla, JS dependencies are loaded using special server side include scripts (e.g. JHtml::_('jquery.framework') ) and direct references of JS files which need to be uniform across the CMS. There are unused scripts, conflicting scripts, and direct references, scripts that handle responsibility beyond their scope, and more interestingly obsolete ones that need more attention. So is it done right? The obvious answer is NO and there's lot of room available for Joomla to improve its usage of JS, which I will discuss in coming sections.

Can We Improve?

In Joomla one of the major concerns is to bring up a policy on how to introduce JS to the CMS and its components. Although the structure and policy are there when it comes to server side modules and components, the same importance should be given to JS since it will become a major challenge in managing scripts in the near future. Another important consideration is to remove unused JS code, update the obsolete libraries, and remove or sandbox conflicting JS libraries (e.g. removal of MooTools) from the CMS.

Currently in Joomla, some of the JS's execute globally across different components and views, which need to be improved to scope its ability or else it will become a maintenance overhead which will also lead to an increase of JS conflicts. More importantly it would be better to use a common JS coding style for custom JS implementations across the CMS.

New Technology Advancements

Within the past few years, the usage of JS in the web has been going through a radical change. Now more JS heavy applications are coming out with greater usability experiences even comparable to desktop applications. There are JS frameworks such as backbone.js, durandal.js, angular.js & etc. which lay the foundation and a platform to develop and manage JS code that can evolve on a large scale. These platforms are based on different architectural patterns such as MVC, MVVM, MVP and some compose as hybrids among these. There are popular dependency loading libraries like require.js, that have introduced more scoped and managed JS, neglecting the need of a dependency hierarchy. Another interesting area is the usage of bidirectional binding of knockout MVVMview to JS models using MVVM like patterns (e.g. knockout.js as shown in the diagram), which dramatically reduce the amount of JS needed to implement view components with more intermediate states compared to traditional web applications. This directly influences the improvement of the usability and responsiveness of web applications. As we all know, another advancement is to utilize HTML5 features that run more efficiently in modern browsers. Compared to modern advancements in JS, only a handful is discussed within the scope of this article as an introduction.

Can We Use These in Joomla?

In Joomla, JS libraries like MooTools or jQuery partially provide maintainable code either as MooTools class objects or as jQuery plugins which lack high level organization. To address this problem, Backbone.js or Angular.js like frameworks can be used as a platform to organize and manage JS code.joomla javascript architecture improvement

  • Left hand side image shows how currently JS is organized within the CMS with inline and in-view JS along with external JS file references.
  • Right hand side image shows a possible architecture to manage code with external reusable JS libraries and JS part of the components (structure depends on the architecture pattern e.g. MVC, MVVM & etc.) which are loosely coupled with the actual components.

Another possibility is to delegate a dependency handling mechanism from a "server side include script mechanism" to JS, which can be easily replaced with a require.js like library. This helps to reduce the dependency of server side code with JS, which can be better managed by using JS itself. The following diagram illustrates the difference between the two approaches.

joomla javascript dependency loading

Another major improvement is to use Model View Binding, using a framework such as knockout.js which will reduce the amount of JS needed to implement more interactive view components as well as to loosely couple the view from its model JS's. Here I have purposefully ignored talking about Single Page Application (SPA) style since Joomla has a long way to go to become an SPA with its current architecture.


Currently Joomla is gaining more popularity with its latest improvements like fluid UI's with Bootstrap and its robustness. But the current usage of JS within the CMS lacks the ability to evolve, which is also becoming increasingly difficult since it requires a better managed code. Based on all of these concerns, we need to think more about Joomla's JS usage to "fix it right" and make improvements so that JS itself won't become a disruptive technology for Joomla in the future.

Read 16674 times
Tagged under Developers, English
Ashan Fernando

Ashan Fernando

I'm a graduate student having BSc (hons), in Computer Science & Engineering from University of Moratuwa, Sri Lanka and currently following MSc degree in Software Architecture from the same University. I got selected for GSoC2013 with Joomla! and currently working on MooTools to JQuery project.

Yeah, this is what we're talking about! :))
This is going to be a big step forward for Joomla and its frontend capabilites.
Right now we have really strange mixture of jQuery, MooTools and Bootstrap.
Hey Ashan,
Very good overview of the current state.

But are we actually turning the wheel? Do we have discussions in the project about the right JS framework that should be included in the core? What we've witnessed in the past is a change from mootools to jquery that didn't address any of the maintainability issues you talk about.
I myself, I'm relying on a JS framework called Epitome:

For good or bad it is based on mootools, which the project wants to deprecate. Now I'm OK with that, but I don't see the project thinking about maintainability & scaling of javascript. As you said scripts are loaded all over the place & the issue becomes more complext when we have different modules, plugins & extensions on the same page. Let us not forget that a JS error in a file, causes most of time 10 other js files not to work.

How do we move the wheel forward? Are we adding requreJS to the core & angularJS or any other MVC/MVVP framework to the core and asking developers to do this? How can we spark the conversation and do something in this direction before it is too late?

Hi Daniel,

Its good that you pointed out it here. Yes there is a long way to go and removing MooTools does not take us anywhere rather reducing the conflicts. At the moment, it's a small step to make the core stable.

I don't think we can restrict developers from using the JS libraries but its a good practice if we can scope the dependencies within a context of each plugins (e.g like in require.js) which will address at least the issue of JS library conflicts. And if we can provide boilerplate code (e.g like Ruby on Rails) or a set of guidelines(for JS) to build extensions, it would be a great investment for the future of the CMS.

As you mentioned, there are lot of questions unanswered at the moment and yes, let hope it won't e too late.
Yeah Its what Joomla requires the most.
Joomla development is still suffering from use of both technologies MooTools and jQuery in the same website which is the main reason majority of Joomla website suffer with low speed. Things looks much better in Joomla 3.0, but still many developers are building their components using alternative libraries.
Ditching Mootools entirely will be a huge step forward.
@Pierre Yes. It's already taken place under GSoC2013 project for MooTools removal.

PR's for Mootools removal
We are working on a proof-of-concept like Task management component using Joomla and AngularJS. This is a timely article.

We follow most of your suggestions. To state things simply

- Manages control actions, data handling
- It passes the requested data to the AngularJS

AngularJS (implemented primarily to render the view and handle the usability functions)

- Controls most of the views (the user interface)
- Model View Binding

Almost 90 % of the work is over. It will be soon available for the Joomla community explore.
@Ramesh Great to hear. Hope you can share more information in future.
This is one of the most important issues in Joomla that still requires a viable solution.
The problem is not should we use MooTools or JQuery or which of the MV* frameworks we should adopt. That is just kicking the can down the road, whatever we adopt may well be outmoded in 2 or 3 years time.
What is more important is to put in place a set of maintainable and enforceable structures that set out how developers can include any JavaScript into their Joomla app.
Currently Joomla puts JS scripts into the head in an order running from the smaller components first up to the system last with no means to enforce any dependencies.
This means that as a component developer I cannot depend upon the JQuery that Joomla will load to be passed in to my JS module, as it will be loaded later than my component scripts. So I am forced to load my own version of JQuery, which if I am using JQuery plugins, risks having these break as the later loading JQuery then writes over the same namespace.
We need to have an enforceable queue system that will assemble the scripts to be loaded along with their dependencies on the server side. These can then be intelligently loaded by a script running in the footer to avoid blocking any part of the HTML page load.
Any scripts required for the head (e.g. Modernizr) can be flagged as requiring loading in the head, but the majority can use require.js or similar to load the scripts in an order that ensure dependencies are met, and global objects are loaded only once.
Fixing this would be a massive step forward in taking Joomla into the next phase of web application development. Leaving it as it is, or simply updating the system with a few new toys will shackle future development and will put many developers, who see no distinction between front and server side components, off developing for and with Joomla.
Great article, Ashan!