Introduction to modular programming

Features of modular programming

The modular programming concept is currently one of the most prevalent concepts in modern Javascript programming. It is based on breaking a large application into smaller, encapsulated, independent pieces of code – modules. The goal of modularity is to reduce complexity according to the “divide and rule” principle. The most significant advantages of modular programming are:

• a clearer and more understandable application
• easier control of mutable domains
• prevented “global domain pollution”
• code reusability
• possibility of working on the same project by several different teams or developers doing separate smaller tasks.
• easier debugging

Syntax types

Depending on the version of JavaScript, there are different approaches to the problem and different syntaxes that enable modular programming:

Native ES5 syntax

At the time JavaScript was written, modular programming was not planned as a way of programming, so JavaScript up to ES6 (ES2015) version has no support for modules. Within native ES5, various patterns are used, which have similarities with modular programming, but do not have all the characteristics of a “pure-blood modular pattern”.
Read more about native ES5 syntax in the article Modular programming with ES5.

ES5 with external libraries

Exactly because of the lack of support for modules in ES5, external syntaxes were created, which give the language the missing syntax:

• CommonJS Modules
• Asynchronous Module Definition (AMD)
• Universal module definition (UMD)

You can read more about ES5 collaboration with external libraries in the article Modular Programming – External Syntax (AMD & CommonJS).

ES6 modules syntax

With ES6 comes support for a modular system built into the language itself – ECMAScript 6 modules. The new syntax is not yet supported by the browser, so you need to use Babel or TypeScript to transpile it to ES5.
See more about the new ES6 modules syntax in the article Modular programming with ES6.

Module loaders and bundlers

If we decide for a modular way of programming the application, we will face the problem of organizing the loading of modules and the modules on which they depend, the so-called. dependencies. Module loaders and bundlers are indispensable support for programmers for simpler and more efficient work with modules.

Module loaders

“Module loaders” enable dynamic loading of modules by paying attention to the loading schedule. The most famous module loaders are:

• RequireJS – implements the AMD modular system.
• SystemJS – is a universal loader and can load modules in any popular format (CommonJS, UMD, AMD, ES6). It is most often used together with jsmp.io which is more than just a package manager, it can transpile ES6 as well asTypeScript or CoffeeScript.

Module bundlers

“Module bundlers” solve the problem by compiling all modules into one file according to a certain order, making sure that any module that is a dependency of another is loaded on time. The most famous bundler-i module:

• Browserify – implements CommonJS in the browser environment as well. It can be upgraded with various plugins and with the help of a task runner (Gulp or Grunt) it can complete various jobs.
• Webpack – can load modules in any popular format (CommonJS, UMD, AMD, ES6), comes as a single package and does not require additional plugins. In addition to loading modules, it can perform ES6(Typescript) to ES5 transpiling as well as SASS to CSS transpiling.

Conclusion

Choosing the type of support for working with modules mostly depends on the application itself. Therefore, if the application consists of a smaller number of larger modules, the “module loader” is considered to be a better choice, while the “module bundler” is considered to be more suitable if the application consists of a larger number of smaller modules. In any case, it is safest to try both types and see which one gives better results.

The popularity of tools for working with modules over the last few years can be studied on the graph google trends. Based on the graph, it can be concluded that there is a huge interest in Webpack as a representative of the module bundler, while the popularity of SystemJS is visible among the representatives of the module loader.