CommonJs - SystemJs

CommonJs

“CommonJs is one of the specification of module format”.  lot of new term (Module, Specification of Module, Format). Let me take you with each word, let us understand first "what is module ?"

Now days Lot of innovation is happening on JavaScript side, People are writing their plug-in or library or framework. If we want to use any of these thing is our project, we directly reference javascript file and use its functionality. Very simple.

Our focus to use reusable piece of JavaScript which is nothing a module. But still we require to reference each module in project and their different way of initialization.

Let say we have three module Customer, payment and Notification. and our goal is to credit the amount in customer account and send notification.

//Customer.js

var Customer = function (name)

{

    this.name = name;

   

    this.getMyAccountDetails= function()

    {

        if (name = "user") {

            return {"accountno":"100x00010","email":"user@test.com"};

        }

        else

        {

            return "";

        }

    }

}

//Payment.js

var Payment = function ()

{

    this.DoPayment = function(accountNumber, amount)

    {

        alert("Payment hasbeen done for " + accountNumber + " amount: " + amount);

    }

}

//Notification.js

var Notification = function () {

    this.sendEmail = function(name, email)

    {

        alert("email has been send to " + name + " email: " + email);

    }

}

//index.html

<!--Added reference of all module-->

    <script src="Customer.js"></script>

    <script src="Payment.js"></script>

    <script src="Notfication.js"></script>

    <script type="text/javascript">

        (function () {

            //Load customer

            var customer = new Customer("user");

            var user = customer.getMyAccountDetails();

            //Load payment

            var payment = new Payment();

            payment.DoPayment(user.accountno, 100);

            //Load customer

            var notification = new Notification();

            notification.sendEmail("user", user.email);

   

        })();

    </script>

Here we have added the reference of all module on top of page, it means every module is getting loaded even before start to consume modules functionality. Then we accomplished our goal by calling functionality of each module one by one.

why we can not have any solution which allow us to communicate the modules with each other.

Mr. Kevin Dangoor has started project ServerJS in 2009, the goal of project is to bring collaboration between java-script developers and utilize the reference of individual modules. the format was more recently formalized by CommonJS , The CommonJS module proposal specifies a simple API for declaring modules that work with external world.

CommonJS modules basically contain two primary parts: a free variable named exports, which contains the objects a module wishes to make available to other modules, and a require function that modules can use to import the exports of other modules. 

Let see how we can accomplish above functionality using commonjs specs.

Please add one additional line at end of file.

// Customer.js

exports.Customer = Customer;

//Payment.js

exports.Payment = Payment;

//Notification.js

exports.Notification = Notification;

Till now we clear the concept what was need of CommonJs, but who is going to perform the dynamic loading of modules or on demand loading of module. Then System.js has come in picture which allow us to dynamic loading of modules. Along with CommonJS format, It supports the following module format 

esm: ECMAScript Module

cjs: CommonJS

amd: Asynchronous Module Definition

global: Global shim module format

system: System.register or System.registerDynamic compatibility module format

Just add the reference of System.js , run the node command prompt and run "npm install systemjs" command under your project directory.

I have added one more module “Account” which communicate with different module to perform the result. It loads the other module based on demand.

//Account.js

var Account = function (name, amount)

{

    this.CreditAmout= function()

    {

     

        alert("customer module will load.")

        //Load customer

        var customer_module = require("Customer.js");

        var customer = new customer_module.Customer(name);

        var user = customer.getMyAccountDetails();

  

        alert("payment module will load.")

        //Load payment

        var payment_module = require("Payment.js");

        var payment = new payment_module.Payment();

        payment.DoPayment(user.accountno, 100);

        alert("notification module will load.")

        //Load customer

        var notification_module = require("Notification.js");

        var notification = new notification_module.Notification();

        notification.sendEmail("user", user.email);

    }

}

exports.Account = Account;

//index.html

    <script src="node_modules/systemjs/dist/system.js"></script>

    <script type="text/javascript">

        (function () {

            // Load Account

            System.import("Account.js")

            .then(function (exports) {

                var account = new exports.Account("user", 100);

                var result = account.CreditAmout();

            });

   

        })();

    </script>

I hope , you would have learnt the Basic of CommonJs and SystemJs. Happy Learning :)