Asynchronous module definition (AMD) is a JavaScript specification that defines an API for defining code modules and their dependencies, and loading them asynchronously if desired.Below are benefits of AMD:-
1)Application is broken in multiple smaller files,so only needed files are loaded at time.
2)AMD allows developers to define dependencies which must be loaded before module is executed.
3)If you are working with big applications then by module you have to work one by one and you don’t have to
remember the logic of entire application at one time.
4)AMD specification is implemented by Dojo Toolkit, RequireJS.
We will be see practically why and when to use this.
Lets create a use case.
1)In a family there is one child and his mother and father.
2)One question is asked to child which he have to reply in just true or false.
3)Child will reply after asking to his mother and father.
4)For replying to child his father will also ask to his mother.
Now lets code for this small scenario.
Create folder with name ‘js’ in application and create all .js files inside this folder. Now lets create classes for this use case one by one :-
1)index.html:-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo For AMD with requirejs</title>
</head>
<body>
<h2>For detail info Check console and js files for watching details.</h2>
<!-- Script no. 1 -->
<script src="js/mother.js"></script>
<!-- Script no. 2 -->
<script src="js/father.js"></script>
<!-- Script no. 3 -->
<script src="js/boy.js"></script>
<!-- Script no. 4 -->
<script src="js/main.js"></script>
<script data-main="js/main" ></script>
</body>
</html>
2)main.js:-
var result = askToBoy();
if(result){
alert("Your Question is answered as " + result);
}
3)boy.js:-
function askToBoy()
{
console.log("Function : askToBoy()");
var fatherResponse = fatherReply();
if(fatherResponse){
var motherResponse = motherReply();
if(motherResponse){
return true;
}
else{
return false;
}
}
else{
return false;
}
}
4)father.js:-
function fatherReply(){
"use strict";
console.log("Function : fatherReply()");
var fatherResponse = wifeReply();
return fatherResponse;
}
5)mother.js:-
function motherReply(){
console.log("Function : motherReply()");
myRepsonse = true;
return myRepsonse;
}
function wifeReply(){
console.log("Function : wifeReply");
myRepsonse = true;
return myRepsonse;
}
Now run the application it will give you “true” as result in alert.
Now in index.html just shift line :-
<script src="js/main.js"></script>
to 1,2 or 3 lines up.Now you will see that this is not running no alert is coming and giving exception in code(check console).
Here you can see that there is no way of knowing dependency of knowing any class.For a big application we can not rely on this style.And if with a lot of caring we will code then also it will be loading a lot of files and hence the performance will be decrease.
Now Lets start with AMD style.
First of all get the require.js file from link below :-
http://requirejs.org/docs/download.html#requirejs
Create folder with name ‘js’ in application and create all .js files inside this folder including downloaded ‘require.js’. Now Create classes one by one as below:-
1)index.html:-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Asynchronous Module Definition( i.e. Lazy/Asynchronous loading) with requireJS </title>
</head>
<body>
<h2>Asynchronous Module Definition( i.e. Lazy/Asynchronous loading) with requireJS </h2>
<h2>For detail info Check Console.</h2>
<script data-main="js/main" src="js/require.js"></script>
</body>
</html>
2)main.js:-
require(["boy"],function(boy){
"use strict";
var result = boy.askToBoy();
alert("Response to your question is "+ result);
});
3)boy.js:-
define(["father","mother",console], function(father,mother) {
"use strict";
console.log("boy class.");
return {
askToBoy : function() {
var boyResponse = father.fatherReply() && mother.motherReply();
return boyResponse;
}
};
});
4)father.js:-
define(["mother",console], function(mother) {
"use strict";
console.log("class father");
return {
fatherReply: function() {
var wifeResponse = mother.wifeReply();
return wifeResponse;
}
};
});
5)mother.js:-
define([console],function() {
"use strict";
return {
motherReply: function() {
console.log("mother class's motherReply function.");
return true;
},
wifeReply:function() {
console.log("mother class's wifeReply function.");
return true;
}
};
});
Now you can see that using ‘requirejs’ for AMD style application, we are able to provide the dependency of each and every module at it’s inner level.So as the classes will be require by application those will be served accordingly.And hence the load of application will be also less and we will able to optimize performance also.
This approach will be provide much better result as much as big application you will be having.
Hope this will helpful for someone.
Smart Web FrontEnd 