Version: 8.2

Module overview

Level: advanced

note

The functionality is relevant to Classic UI.

AMD concept

Creatio front-end is a set of function blocks implemented in separate modules. In accordance with the Asynchronous Module Definition (AMD) concept, Creatio loads modules and their dependencies asynchronously at runtime. Therefore, the AMD concept lets you load only data with which you need to work currently. Learn more about the AMD concept: Asynchronous module definition (Wikipedia).

Different JavaScript frameworks support the AMD concept. Creatio uses the RequireJS loader to work with modules. Learn more on the official RequireJS website.

Modular development in Creatio

A module is a code fragment encapsulated in a separate block that is loaded and executed independently.

The Module programming pattern declares the module creation in JavaScript. Learn more: JavaScript Module Pattern: In-Depth. The classic pattern implementation uses anonymous functions that return a specific value, for example, object, function, etc., associated with a module. In this case, the module value is exported to a global object.

Example that exports the module value to a global object
/* Immediately invoked function expression (IIFE). The anonymous function that initializes the myGlobalModule property of the global object using a function that returns the module value. Thus, the module is loaded and can later be accessed via the myGlobalModule global property. */
(function () { 
    /* Access a module on which the current module depends.
    Load the module into the SomeModuleDependency global variable before accessing it.
    The "this" context is a global object. */ 
    var moduleDependency = this.SomeModuleDependency; 
    /* In the global object property, declare a function that returns the module value. */ 
    this.myGlobalModule = function () { return someModuleValue; }; 
}());

When the interpreter finds a functional expression like this in the code, the interpreter immediately resolves it. As a result, a function that returns the module value will be placed to the myGlobalModule global object's property.

The concept specifics are as follows:

Declaration and use of dependency modules are complex.
Load all module dependencies before Creatio starts executing the anonymous function.
Dependency modules must be loaded via the <script> HTML element in the page header. Use global variable names to access the dependency module. In this case, the developer needs to implement the load order of module dependencies.
As a result of the previous item, Creatio loads the modules before the browser starts rendering the page, so the modules cannot access page controls to implement custom logic.

The special features of using the concept in Creatio are as follows:

You cannot load modules dynamically.
You might need to apply additional logic when loading modules.
Managing a large number of modules with multiple dependencies that can overlap adds complexity.

RequireJS loader

The RequireJS loader provides a mechanism that declares and loads modules based on the AMD concept and lets you take into account the specifics listed above.

The operating principles of the RequireJS loader are as follows:

The module is declared in the define() function that registers a factory function to instantiate the module. At the same time, the define() function does not load the module immediately when this function is called. Learn more about the define() function: official vendor website (GitHub).
Module dependencies are passed as an array of string values, not via the global object properties.
The loader loads the module dependencies that are passed as arguments of the define() function. Modules are loaded asynchronously. The loader sets the load order arbitrarily.
After the specified module dependencies are loaded, the loader calls a factory function that returns the module value. The loaded module dependencies are passed to the function as arguments.