Javascript

JS in T1 is the backbone of the client, it defines behaviour, supports client-side templating and event messaging.

For behavioural scripting jQuery is still set as standard, however since jQuery is not very performant in some cases, use vanilla JS where possible, extend with jQuery where applicable.

For instance for looping arrays a “for (var i = 0; i < arr.length; i ++)” loop will be way more performant than “$(array).each( function(k, v))”, for looping an object use “for var item in object” rather than $.each.

In this version of the T1 client, we introduced ES2015 (ECMAScript v6). A transpiler will translate to ES5 for unsupported browsers.

Basic JavaScript guidelines

JavaScript coding guidelines

JavaScript patterns

Since we are moving towards ES6 class based component and AMD modules, the recommended pattern has changed from module pattern where modules were added to the global window T1 object to a specific T1 AMD approach.

Event-drive JS

In order to achieve loose coupling between modules, the Postal.js library will be used to publish or subscribe to events. Since it is against the event driven paradigm principle, direct calls to module functions outside of the module's private scope should NEVER be done from outside the marketing's application and limited/done-in-a-safe-way from within the application(more details in communication and resource access page).

The names for events will be stored in 'constant variables' in the T1-constants module. For third parties that shouldn't access those constants directly, a provided value from the marketing team will have to be done. A list of all events name can be found here: PENDING

Postal.js example:

    //in T1.constants:
    var T1.constants.MY_TOPIC = "eventname";

    //in module 1:
    Postal.subscribe(MY_TOPIC, function(msg, data) {
        console.log(data);
    });
    //in module 2:
    Postal.publish(MY_TOPIC, 'hello world!');

More details on modules communication and resource access HERE.