Require.JS For Web Development: Part 2

Introduction

In this we will see some advanced features of Require JS and their implementation.

Config options

Let's start with various config options. We didn't used config file in the previous article.

What is in main.js?

A call to require() to load all the scripts you need and any initialization you want to do for the page. This example main.js script loads two plugins, jquery.alpha.js and jquery.beta.js (not the names of real plugins, just an example). The plugins should be in the same directory as require-jquery.js:



Our config script will look like the preceding. Every parameter is optional and "baseUrl", "paths" are what we mainly used in this application.

Step 1

Add the script references as shown below in the Master page:

<script type="text/javascript" src="scripts/require.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>

Now when we run the application we get the same results as in the previous article. Why do we want to use the Config option? Notice that we can shorten the JavaScript file names and control the script path also.

Now in the path section, we added two different versions of jQuery. Note that we didn't add the ".JS" file extension to the script names.

In the Default page, we just added the following script. Two different versions of jQuery files will be handled in this script. One main advantage is that if we want to move to future versions of jQuery, we will simply change config file alone to upgrade the entire application.

Shim

Shim is used to Configure the dependencies and exports for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value. Example:



In this code we mentioned that "PrettyPhoto" is dependent on the "jQuery-1.6.1" version and every time the "jQuery-1.6.1" version is loaded before the "PrettyPhoto" loaded. We will check the order of the script as below.



Module

Asynchronous Module Definitions are designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around AMD, since it as the future of modular JavaScript development.

The Asynchronous Module Definition API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. Please check the following URL for more details about module.

http://requirejs.org/docs/whyamd.html

Created a simple module as mentioned below, just return some string data. We will notice that this as anonymous function, we didn't mention any names.

Define another module with the name "another-message".

For easy understanding these modules are kept as a separate js file and in the Main.jS (wherever required) we can refer to the modules as shown below:

In this code we are calling the anonymous function module, passing jQuery and the anonymous function as the parameter and obtaining the results as shown below.

We will combine one more module called "another-message" and the module code will be placed in a separate file.

The output will combine the results of both modules and will see the order of the modules also.



Summary

Using "Require JS" we will write clean code and resolve the dependence via creating the modules.

Call an ASP.NET C# Method (Web Method) Using JQuery

Introduction

In this article we will see how to call an ASP.NET C# method (Web Method) using jQuery.

Step 1

Add a jQuery reference to your project. 



Step 2

Add a web method in your page as mentioned below.



This method simply returns the Server Date time value as a string and the trick is it's a "Static Method", otherwise it won't work.

Step 3

We will use a jQuery "Ajax" method to call, page methods.



The URL value will be the page name/method name and the data will be the optional parameter to pass the value to the server.

Summary

Now we will call the C# methods and get the post back server data without a page refresh. This is one way to access the C# methods.

Basics of Require.JS For Web Development

Introduction

In this article we will see the basics of the "Required.JS" plugin and how to implement the various options of "Required.JS".

"RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino, Node and jQuery. Using a modular script loader like RequireJS will improve the speed and quality of your code."

Step 1

First let's understand the existing problem with a traditional approach and solution structure. We have an ASP.NET master page which has JavaScript references as mentioned below.

For Demo purpose, I have created two pages using "prettyphoto" and "datapick" JavaScript files. Once we run the test pages, we will get the results as below.

PrettyPhoto sample page



Calendar Page



As we will see, the functionalities for the pages are working fine. But the problem is, in the calendar page I didn't use "PrettyPhoto.js" and in the PrettyPhoto page  didn't use "datepick.js". We have simple a page which doesn't use any JavaScripts, but all scripts are loaded because it's referenced in the Master page.



Step 2

Download the sample code and the JavaScript file. Add the js files to the solution.

http://requirejs.org/docs/jquery.html

Comment the existing script references in the Master page and add the Require JS file. The data-main attribute on the script tag for require.js tells Require JS to load the scripts/main.js file. Require JS will load any dependency that is passed to require () without a ".js" file from the same directory as the one used for data-main.



In this article we didn't used the main.jS file. Now in the default page we removed the unnecessary JavaScript files that were loaded.



In the calendar page, just change the script as mentioned below to load only the required "datapick.js" file.



In the calendar page we will see that only the Require JS, main.js and datepick.js files are loaded.



In the Prettyphoto page the script to load only the required "PrettyPhtoto.JS" was also changed.





Summary

Using Require.JS, we will resolve the JavaScript dependency and improve the performance. 

AdRotator Using jQuery

Introduction

In this article will see how to create an AdRotator using jQuery without using the AdRotator ASP.NET control.

Step 1

Add the jQuery file and reference in your page, as in:



Step 2

Create some static "LI" elements as shown below. We can dynamically create these elements from the DB also. Notice that the "Div" id needs to referred to in jQuery.



Step 3

Add the jQuery scripts to load the AdRotator.



In the script, first the variable for the active "LI" element needs to be initialized and we set to "0". Using "nth-child()" jQuery selector we can select specific child elements and check the following link for more details about the selector:

http://api.jquery.com/nth-child-selector/ 

Step 4

Run the solution and check the output.

Summary

Creating an AdRotator using jQuery is simple as well as powerful.

Performance improvement using JavaScript Lazy Loaders:

Introduction

In this article is a demonstration of how to improve performance using the "Rocket.JS" and "Head.JS" open-source library.

About Rocket.JS

Rocket is a simple JavaScript lazy loader that aims to reduce the loading times of pages caused by blocking JavaScript. It's usage is as simple as possible in order to ensure it's easy to fit into existing code.

Step 1

Configure Rocket.JS file

We will download the JS file from the following Git repository:

https://github.com/imagehst/Rocket

Once we have download the JS file, we add a reference to our existing project.



We need to add the "head.js" file reference and add some jQuery code to determine if the Jquery.js works correctly or not. 

Step 2

First we will see the page performance without "Rocket.JS".



This is just a normal ASP.Net start-up page and note the timelines for each page's resources (like JS and CSS files) to complete the page load. Overall it requires a major consumption of resources to complete and the most of the time is consumed by our "Jquery.JS" file.

We just considered the first-time page load now and see the following image for JavaScript code.

Step 3

Now we will do some changes in the JavaScript code as described below.



We added the "Rocket.JS" file reference to our page and call the rocket.load method to implement the JavaScript lazy loader and added some jQuery to determine if the lazy loader is working correctly or not.

After the "Rocket.JS" implementation our JavaScript file (foobar.js) will load at the end.




But I am not still convinced, because the Jquery.js file still takes more time. We will try another alternate solution using "Head.JS".

Using "Head.JS" will result in further performance improvements:

About head.JS

Head JS loads JavaScript files like images without blocking the page. Your page will be faster even with a single combined file.

Download the JS file and reference file as described from the following URL:

Download URL: http://headjs.com/#download

Implement the Head.JS as mentioned below:



After implementation we will see the jQuery and foobar.js files are loaded as in the following image.



Summary

Using head.js we can control what are all the scripts we need to load in the page and the order of the scripts as well.

Note: The network time for chrome may vary depending on your browser and version; it is just for your reference.
 

Load Master Page User Control Dynamically to Improve Performance

Introduction

Problem: We have the master page and we will embed the user the control and the same master page will used by various pages. For some pages we don't require the user control to be visible. If we also hide the call to that user control, we cannot avoid it.

Step 1 : We have very simple user control, just some label in HTML.



Step 2 : In code behind, we will hold the thread for a while, assuming we are doing some complex process in that user control and display the content.



Step 3 : Add the user control to the master page. First register it and using the tag name embed the control.



Step 4 : Just create a new ASP.Net page with master page reference and load it and the result will be as below. Ignore the design aspects; we will focus on the user control alone.



The User Control will be loaded in right side and below the load time as well.

Step 5 : We will create one more page, that doesn't require the user control. We will just hide the control using jQuery.


Even if we hide also, the user control will be called internally.



Step 6 : We will remove the user control related "HTML" in the master page and just add a placeholder.



Step 7 : Now we can load the master page control from the child/content page. Write the following code in the Page_LoadComplete event of the Content Page, which comes just after the Page_Load event of the Master Page.


We will run the page and get the same result as below.



Now we will load the other page which doesn't require the Master Page User Control. It just loads the master and child page contents alone.



Summary

We need to add some code in the page which requires loading the Master Page User Control dynamically. 

Using Mongo DB in .Net

Here I am not going to explain about Mongo DB, but i just try to use Mongo DB in .Net.

By default, MongoDB wants to store data in the default file system path, c:\data\db.but this is configurable with a text file passed by name on the command line via --config.

 If you got the below error.  Just run the below mentioned command.

Error: couldn't connect to server 127.0.0.1 shell/mongo.js:84

Command:  mongod --dbpath "c://data/db"

Once configured the Mongo DB, we will install C# driver or we can use the NuGet package.

 http://www.nuget.org/List/Packages/mongocsharpdriver

After install the driver, add reference dll’s as mentioned below.

We will go through the sample application to use Mongo DB in .Net:

Just like SQL Server we need to create connection instance to the Mongo DB server.

Once the Db will be created we can able to go and check the db folder “\data\db” and the final thing is we can able to  add and query the data like sql.

Check the SQL to Mongo Mapping chart:

http://www.mongodb.org/display/DOCS/SQL+to+Mongo+Mapping+Chart

We execute the select query (.Find), get the data.