The Joomla! Community Magazine™

Joomla JavaScript Dependency Management

Written by | Thursday, 01 May 2014 00:00 | Published in 2014 May
In Joomla, JavaScript usage has been increasing over the past few years. Now it is becoming a required need to have a proper JavaScript dependency handling mechanism to maintain its JavaScript Code.

Current Approach

Currently in Joomla, JavaScript files are loaded using server side PHP functions that include the JavaScript file name to the page body or header accordingly. The nature of these PHP scripts is shown below.

E.g. JHtml(‘Load Script 1’)

This requires proper ordering of the scripts as well as handling conflicts of scripts manually which takes time and becomes difficult.

Challenges

First of all this nature of loading JavaScript is tightly coupled with the PHP code segments that require these scripts. This approach also limits the modularity of JavaScript since it is difficult to maintain the order of execution manually by separating the logic into distinct functions.

Additionally there are inherent problems with JavaScript where these Scripts required to make the functionality available globally, which requires creating Global JavaScript Objects which in turn introduces maintainability issues, causing a rapid decrease in productivity when writing JavaScript-heavy plugins or components.

And one of the major problems encountered is the conflicts that occur with unexpected updates of JavaScript global variables. In particular I experienced this issue when removing MooTools dependencies from Joomla and replacing them with JQuery since it was highly propagated throughout the CMS without the lack of separation of concerns.

Future of Dependency Management

One of the challenging decisions that needs to take place is to separate JavaScript from Server Side Logic written in PHP in Joomla. In relation to dependency management, this includes removing the JavaScrpt dependency loading mechanism with PHP Script loading where the scripts are efficiently loaded using JavaScript itself.

Currently there are many mechanisms proven to be successful in various industrial projects. One such popular approach would be to use the Asynchrony Modular Definition, or in other words AMD approach, which is capable of loading the JavaScript Dependencies (Including JavaScript’s Libraries and Files) that are required to execute a set of JavaScript logic. This mechanism also encourages limiting the usage of global scoped variables as well as modularizes the JavaScript in user required ways without sacrificing the need for loading JavaScript files in execution order.

For example, if we take Require.js which already implements such capabilities, the syntax to load a set of dependencies would be as follows:

Require.js Dependency Loading

When it comes to Joomla these dependency loading syntax can be customized to have an approach like below to create a future proof design wrapping an existing library like require.js.

Joomla.LoadScript([‘’jQuery”,”Search”,”IndexJS”], function($, Search, Index){
      // Logic Depending on jQuery, Search and IndexJS JavaScript Libraries
});

Although at first glance it looks a bit confusing, the first parameter is to specify:

  • Path of JavaScript file
  • Alias that refers to a path

that will load the appropriate JavaScript files/modules, and then call the callback function based on the specified JavaScript modules and files returning its context (Variables in order without making them global). With this approach all the dependencies can be loaded in JavaScript level before executing the individual scripts without the need of adding them to the header.

Cost of Change and Scope

Although this seems to be really challenging all at once, the benefit it gives for the future of the project is really valuable and provides a future proof design concept to introduce more modularized JavaScript based logic to enhance the usability of Joomla.

In the Joomla JavaScript context, based on the current implementations, it requires slightly modifying the exiting JavaScript libraries so as not to spoil the global scope, but to return the specified dependencies in a concept similar to module require.js syntax keeping the backword compatibility. Apart from this tightly coupled JavaScript logic can be separated into different modules and abstracted out hierarchically using proper planning and grouping of JavaScript modules.

Although the needs are not clearly visible at the present, the benefits of doing these changes up front will give Joomla an edge in the future to reduce the JavaScript complexities and utilize cutting edge browser technology improvements.

Read 7916 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.