UI Plugins Check List

UI plugins must meet the requirements specified in the following sections.

Compression and Minification

Provide gzip and brotli compressed versions of your static resources.
Check that the brotli-compressed version of each static resource is loaded in Chrome.

How to check:

1. Open the developer tools.
2. Open the Network tab.
3. Filter by your plugin’s name.
4. Check that the Response Headers content-encoding shows “br”.

Consider using minification to reduce the network transfer cost even more.

Plugin Size

Check the size of the plugin’s resources loaded during initial loading:

AV.internal.getResourceSizesForPlugin('avid-mcux-browse'); 

This method is a utility method that allows you to check the size of already loaded resources of your plugin and all its dependencies.

Regard the following plugin size limits (these limits are specified for brotli-compressed resources).

Case 1: Plugin that provides an app

The plugin’s own resources size must not exceed:

• 30kB - application is not opened initially after page load

To comply with the requirement mentioned above, use dynamic loading to load the main chunk when the app method onRender is called.

Case 2: Plugin that provides the Asset Editor tab

The plugin’s own resources size must not exceed:

• 150kB

Case 3: Plugin that extends other apps/views

The plugin’s own resources size (including all its dependencies) must not exceed:

• 30kB

Case 4: Other Plugins

The plugin’s own resources size must not exceed:

• 150kB

Plugins Metadata Description

Provide the correct metadata description for your UI plugin in the package.json avid section.

1. Check autoload: false for all non-core plugins (see Autoload).
2. Check that the mode property is specified (see mode).
3. Check that the plugin contains the correct features metadata (see UI Plugins Lazy Loading).

CSS Selectors

Do not use reset css stylesheets, as it might affect all other applications.
Do not use underspecified selectors (span, div, etc.).
Specify styles only for your components and scope them locally.
Using style selectors with simple class names (for example, .left-plugin) that are defined in global scope is an unsafe practice.
We recommend using one of the following approaches:

• CSS modules
• CSS-in-JS
• BEM

z-index Usage

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items.
Components that are to be rendered on the specific layer need to contain the z-index in the appropriate range
of values.

Javascript

Make sure that 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 approaches are equivalent. Just do not have any code
outside of a function or Webpack-processed module.
Make sure that 100% of your code uses the strict mode (use strict).

Warning: Do not add any polyfills that attach themselves globally.

LocalStorage, SessionStorage, IndexedDB

Use keys for your data that has a prefix your-company-plugin-name-.
Do not modify any local data that is not created by your app.

IFrame Usage Limitations

It can be tempting to use IFrame elements as part of your application plugin
to embed your widget or application inside MediaCentral Cloud | UX.

Keep the limitations of this approach in mind.