Voice Of A Developer: Decoupling Your Application - Part 35

Javascript is the language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.

What is coupling?

In computer systems, coupling refers to the degree of direct knowledge that one component/class has of another. In a way, it is the degree of interdependence between the software modules. Our Application quality metrics depend upon the degree of interdependence components.

Types of coupling

Primarily, there are two types of coupling, i.e., loose and tight. Loose coupling is a better design, as it promotes single-responsibility and separation of the concerns principle. A loosely coupled module can be consumed and tested independently of other modules. In OOPS programming languages, interface is a powerful tool to use decoupling. Classes communicate via interface rather than other concrete classes. In general, tight coupling is bad and not preferred because the modules are dependent on each other. If you want to change one module then it is not easy if it is tightly coupled with the other modules.

What is modularity?

An Application is modular, when it is composed of decoupled pieces stored in the modules. As developers, we shall aspire for loose coupling. Hence, our Application will be easy to maintain, update code, and make changes.

Module writing in JavaScript

If you remember, I mentioned in ES6 v2 (article 20), that we have a module available where we can export and import JavaScript functions. The popular concept in loading the module is AMD.

Asynchronous Module Definition (AMD)

The overall goal for the AMD format is to provide a solution for the modular JavaScript, that the developers can use today. It loads the module and dependencies asynchronously. There are many advantages associated with AMD and these are:

There are various implementations of AMD, i.e., CommonJS, RequireJS, Dojo Toolkit.

Key concepts with the Modules

Here are the key concepts. The loader loads the JavaScript code that handles the logic behind defining & loading modules. You need an AMD loader like dojo.js or require.js Define function Here is the signature of this function. define (id?, dependencies?, factory);

Sample

In our directory structure, you can see three files,

Now data-main attribute will load js/page1.js. Note- RequireJS assumes that file ends with .js. Both js/page1 & js/page1.js work fine.

Define module

There is a module that we created messages.js in and defined a dependency in lib/print.js file. The purpose of the messages is to include dependency and return a callback function. print.js file returns a callback print function.

Calling module

Page1.js- This page1.js has a dependency on App/messages and uses require() form, that just uses the string name of the module to fetch it. Run www/page1.html in your Browser and review Network & Console Developer (F12). Console

Network tab
You can also try www/page2.html and check the Console & Network tab to see page2.html related files only. Console Network

Summary

Please share your feedback/comments.