1. Javascript

2. Topics
Javascript Basics
Modularization
Dependency Management
Bundling

3. JavaScript Basics

4. Topics
 Variables & Data types
 Object Literals
 Functions
Declarations
Functions as arguments
Anonymous functions

5. Variables & Data types
In javascript, variables can hold any type of
data.
Variable types keep on changing as we assign
new data to them.
Code Examples:
var hello = “world”;
hello = 23;
hello = function(){ return “world” }

6. Object Literals
 An object literal is a comma separated list of name
value pairs wrapped in curly braces.
 In JavaScript an object literal is defined as follows:
var person = {
name: 'James',
age: 28,
isAlive: true
};

7. Objects can have arrays, objects and functions as
their properties
var person = {
name: 'James',
age: 28,
isAlive: true,
childObject: {
property1: „hello world‟,
property2: 4938,
property3: false
},
favoriteColors: [“Blue”, “Yellow”, “Magenta”],
getAge: function(){
return this.age;
}
};

8. Function Declarations
 function isNimble() { return true; }
 var canFly = function () { return true; };
 window.isDeadly = function () { return true; };
 Differences:
 isNumble is defined at parse-time, whereas canFly and isDeadly is
defined at runtime.
 canFly and isDeadly are merely two variables which have anonymous
functions assigned to them whereas isNumble is a named function.

9. Functions as Arguments
function greet( getMessage ) {
var message = “Good “ + getMessage();
alert( message );
}
function eveningGreet () {
return “evening”;
}
greet( eveningGreet );

10. Anonymous Functions
function greet( getMessage ) {
var message = “Good “ + getMessage();
alert( message );
}
greet( function () {
return “evening”;
} );

11. Modularization

12. What & Why?
 A module is an independent unit of functionality that is part of the total
structure of a web application
 it‟s very important to have all the code well-organized
 Maintaining a spaghetti-coded application will only cause you headaches
and nightmares
 Modularization makes your code easier to manage

13. Benefits
 Small pieces of code are separately stored in modules
 Easier maintenance
 Avoid global namespace problems.
 Encapsulation - Expose only selected functions or
properties by wrapping all your code inside a module

14. Module Rules
Modules are like little kids, they need a strict set of rules so
they don’t get into trouble.
 Hands to yourself
 Only call your own methods or those available in application core.
 Don‟t access DOM elements outside of your box
 Don‟t access non-native global objects
 Don‟t leave your toys around
 Don‟t create global objects
 Don‟t talk to strangers
 Don‟t directly reference other modules

15. LoadRunner
 A small javascript dependency manager.
 Modules are loaded asynchronously.

16. Defining a module:
provide(„module_name‟, function( exporter ){
function say ( text ) {
alert ( text ) ;
}
exporter( say );
});

17. Using a module:
using(„module_name‟, function( speak ){
speak( „ hello world „);
});

18. Code Examples
 Example1.html - Global functions
 Example2.html - Modularized functions – single module
 Example3.html - Modularized functions – multiple modules at once

19. Dependency Management

20. Single module dependency
using(„module_say‟, function( speak ){
speak( „ hello world „);
});

21. Multiple module dependency
using(„module_say‟, „module_greet‟,
function( speak , greet){
speak(„ hello world ‟); // say hello to world
greet(„Mr. Zain‟); // greet Mr. Zain
});

22. Automatic dependency loading
Loading external files automatically when
required.
Code Examples
 Example4.html - Modularization - loading external modules
 Example5.html - Modularization - loading external modules on
click event

23. AMD – Asynchronous Module Definition
 Non-blocking
 Parallel loading
 Fast
 Improved maintainability
 Well-defined / standardized

24. How AMD works?
 Core methods to implement an AMD Module
 require – used to get reference to an already loaded module.
 define – used to define a module.
 define method:
 require, exports, module parameters

25. debug module()
define(„ debug„ ,
[ „module‟, „require‟, „exports‟ ] ,
function (module , require, exports) {
function debug( data ) {
console.log( data );
}
module.exports = debug;
}
);

26. define()
define(„ module_1 „ ,
[ „module‟, „require‟, „exports‟, „depA‟, „depB‟ ] ,
function (module , require, exports, depA , depB) {
var myModule = {};
myModule.play = depA.play;
myModule.player = depB.player;
module.exports = myModule;
}
);

27. Lets see code examples
 Example6.html - Modularization – define a module AMD way
 Example7.html - Modularization – loading external AMD modules
 Example8.html - Modularization – loading external modules which are
dependent on other modules.
 Example9.html - Modularization – loading external modules on click event

28. Bundling

29.  Used to merge multiple modules in one single file to reduce number of http
requests.
 Code Examples
 Example10.html – loading bundles instead of separate modules

30. Questions?

31. References
 Function definition
 http://stackoverflow.com/questions/336859/javascript-var-functionname-
function-vs-function-functionname
 Modularization
 https://github.com/danwrong/loadrunner
 https://tutsplus.com/tutorial/writing-modular-javascript/