Important

You are browsing documentation for version 5.0 of OroCommerce, supported until January 2025. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

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:

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.

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