Media Central UX FAQ

Best Practices for JavaScript Modules

Please observe the following best practices to prevent JavaScript variables from leaking into the global scope:

  1. Make sure all your code is either wrapped in IIFEs, or bundled with Webpack. As Webpack bundles multiple modules in one file by wrapping each module in a function, these two things are equivalent. Just don't have any code outside of either a function or a Webpack-processed module.

  2. Have 100% of your code use the strict mode (“use strict”).

  3. Don’t add any polyfills that attach themselves globally. Global polyfills have to be added to the page by core modules, not by plugins. For list of polyfills that are currently included in MediaCentral | UX,

  1. Don’t use babel-polyfill in your plugins. Use Babel as a code transpiler, but avoid including the core-js-based polyfill that comes with it.

Global polyfills in MCUX/NUX

As UI plugins should not be modifying any global variables outside of their window.AV namespace, any globally-installed polyfills should be added only by the core UI team (Jedi Pirates). Here is a list of JavaScript polyfills that are already in place in MediaCentral | UX and NUX, available to all plugins and core modules.

Since MCUX 2.8:

Promise
URLSearchParams
fetch
Object.assign
String.prototype.startsWith
String.prototype.endsWith
String.prototype.includes

Since MCUX 2.10:

Object.values
Object.entries
Array.prototype.includes

Can I use...?

Thanks to the fact that MediaCentral's browser support is very limited, quite a lot of features are already available to its plugins natively, with no polyfills needed. Our lowest-supported browser at the moment of writing this (2.8) is the QtWebKit component that’s being built into desktop applications like ProTools and MediaComposer. To check if a certain browser feature is available natively, you can test your code in the QtWeb 3.8.5 browser (www.qtweb.net). QtWeb 3.8.5 has the same version of Qt (4.8) as the desktop apps that we need to support. So if a feature works in QtWeb 3.8.5, then go ahead and use it.

Adding CSS and image resources to static plugins

The recommended way to include CSS and image resources in your static plugins is to add them as files (so that they are accessible by an URL like /plugins/com.avid.SomeName/css/style.css), and then import them into the page using an API function call like this one:

window.AV.modules.importStylesheets('com.avid.central.AssetLocationsUI', [
    'css/asset-list-view.css',
    'css/locations.css'
]);

Within the CSS file, simply use a relative path to your images. If you need to programmatically get a path to your image files in JavaScript, use the following API call to avoid hard-coding the /plugins/ folder path:

// this call will return '/plugins/com.avid.SomeName/images/icon.svg'
window.AV.modules.resolvePluginPath('com.avid.SomeName', 'images/icon.svg');

Paths that start with a dot and slash (like ./css/style.css) are also acceptable.

In future, we plan to introduce a possibility to call these API functions without the need to access the window.AV global variable.

Avoid using ExtJS wherever possible

Remove all usages of ExtJS utility functions that are listed at the

Don't use ExtJS-based classes (Ext.extend, etc) for things that are not going to be thrown away when ExtJS gets removed from your project. Use ES6 classes instead.