PatternLab JavaScript

ES6 Modules with Export

The JavaScript of PatternLab Components is structured with ES6 JS Modules (opens new window) and the SEAF Configuration Pattern (opens new window). Since Javascript only has function scoping and closures, this is a very useful pattern for encapsulating modules and making sure your namespace is not polluted with unwanted variables.

TIP

• SEAF = Self-Executing Anonymous Functions
• IIFE = Immediately Invoked Function Expression

Modules in ES6 work only in strict mode. This means variables or functions declared in a module will not be accessible globally.

Patternlab.init

The Patternlab.init(); initializes all included modules and is fired at $(window).on('load'), see index.js. The window.on('load') executes when the complete page is fully loaded, including all frames, objects and images - and later than the jQuery event document.ready, which executes when the HTML-Document is loaded and the DOM is ready.

Concatination and Babel

All modules are concatenated to a concat.js and furthermore transpiled by Babel into the final main.js.

These settings can be changed in the Grunt Build Tasks, see config/build.js.

TIP

Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

It makes available all the syntactical sugar that was added to JavaScript with the new ES6 specification, including classes, fat arrows and multiline strings.

Universal Module Definition

The Babel Plugin @babel/plugin-transform-modules-umd transforms these ES2015 modules to UMD (opens new window) (see build.js). The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others).

Public JS methods can be accessed from within other files using the Prefix "patternlab", e.g. patternlab.Select.init()