JavaScript Modularity

Overview

Nowadays Oro uses ES6 modularity approach as best practices. However since a build of JS gets made with webpack other types of modules are supported as well (e.g. AMD, CommonJS).

Note

Since OroPlatform uses ES6 only starting from 4v a lot of legacy AMD modules are still present in the code.

AMD, CommonJS (legacy)

AMD (Asynchronous Module Definition) – is a concept of creating modular JavaScript code with a defined set of dependencies. It defines the order in which resources have to be loaded and executed and, therefore, keeping the global scope clean.

See also

You can find more information on how to write modular JavaScript using AMD and CommonJS in:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
define(function (require) {
    'use strict';

    const MyEmailVariableView;
    const BaseEmailVariableView = require('oroemail/js/email/variable/view');

    MyEmailVariableView = BaseEmailVariableView.extend({
        /* define extended logic here */
    });

    return MyEmailVariableView;
});

Loading script from remote resources

Sometimes you need to download dependency which is not managed by webpack. For that you may use scriptjs library. It takes care of downloading and evaluating the external script at runtime.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import scriptjs from 'scriptjs';
import BaseView from 'oroui/jsbase/view';

const MyView = BaseView.extend({
    initialize() {
        scriptjs('foo.js', () => {
            // foo.js is ready;

            this.doShomething();
        })
    },

    doShomething() {
        /* do something */
    }
});

export default MyView