Designing and Developing Web Applications Using Microsoft .NET Framework 4: Designing the Application Architecture

Objective 1.3: Choose Appropriate Client-Side Technologies

Client-side technologies can make webpages feel responsive and interactive. However, because they run on the client, they can be challenging to plan. The richest client-side technologies require plug-ins, which some browser platforms do not support. Although JavaScript has become standard, many developers use client-side libraries that can increase bandwidth and page load times.

This section provides an overview of common client-side scripting languages and plug-ins, and it gives you the information you need to choose the right technology for different scenarios.

Using Client-Side Scripting Languages

In practice, there is only one client-side scripting language: JavaScript. The JavaScript syntax closely resembles C# syntax because it requires lines to end with a semicolon and uses brackets to group lines of code together (for example, to group the code that makes up a function or a for loop). However, the structure is looser than C#, and you don’t always need to declare variables.

Here is a sample of JavaScript code to demonstrate the syntax. Because anyone with access to a page can examine the source code, JavaScript code rarely contains comments in the real world. To reduce bandwidth usage, JavaScript is almost always minified, which means unnecessary indenting and white space has been removed.

// Declare variables (without specifying a type)
numPics = 11;
secDelay = 7;

// Call the built-in functions Math.floor and Math.random
// Adding "var" identifies a local variable
var randomOffset = Math.floor(Math.random() * 11);

// A for loop
for (i = 1; i <= numPics; i++) {
    // Declare and define picNum
    picNum = i + randomOffset;

    // An if statement
    if (picNum > numPics) {
        picNum = picNum - numPics;
    }

    // Define a function call that will be passed to setTimeout using a string
    // StartPic is a custom function not shown here
    var sp = "StartPic(" + picNum + ", " + numPics + ", " + secDelay + ", '" +
        picUrl[picNum] + "')";

    // setTimeout, a built-in function, runs the function declared by the first
    // parameter after the delay, in milliseconds, specified by the second parameter
    setTimeout(sp, secDelay * 1000 * (i - 1));
}

Client-Side Libraries

JavaScript itself is not as robust as the .NET Framework. For example, it could be time-consuming to write pure JavaScript code to retrieve data from a web service, sort it, and display it in a grid format, because JavaScript does not have built-in functions to do that. Even if you did write the large amount of code required to perform that task, you would then have to test and debug it using every different browser you planned to support.

To extend JavaScript’s capabilities and provide better cross-platform support, the open-source community has created many JavaScript libraries. There are two you should be familiar with for the exam:

• jQuery. jQuery is the most commonly used JavaScript library. It is only 29 KB in size when compressed (which the client must download before it can process any JavaScript), but it provides functions for easily selecting document elements, handling events, animating objects, and performing other AJAX actions.

• Microsoft AJAX. A client-side JavaScript library created by Microsoft specifically to add client-side capabilities to ASP.NET.

Both jQuery and Microsoft AJAX are included with Visual Studio 2010. However, new versions of each are released regularly. Because they often contain important updates, you should always use the latest version available. Additionally, you should test and update references to new libraries for web applications you maintain.

Using a client-side library on your page requires the client to download the library from your server the first time a page requests it. For all subsequent requests, the client will normally have a copy cached. Unfortunately, the initial download of the library increases page load time and bandwidth usage. On a LAN, these differences might be negligible. On the public Internet, however, they can be significant.

For example, the jQuery library is only 29 KB in size when minified, which broadband users can download in a fraction of a second. However, the browser has to first download the page, parse the reference to the jQuery library, download jQuery from the server, and then process the library before it can begin executing any JavaScript. Depending on the client’s bandwidth and latency (the delay it takes to send messages to and from your server), that can delay page-rendering time by up to a full second.

Because of the performance impact of loading client-side libraries and the importance of page load time to users and search engines, avoid using libraries for websites on the public Internet unless absolutely necessary. At times, however, using a library can save such a significant amount of development time that the performance impact becomes worthwhile.

Delivering Libraries with a CDN

To reduce the impact of downloading a library, you can use a CDN. A CDN stores copies of a library in many different locations on the Internet. Browsers download whichever copy of the library is closest to them, reducing latency and eliminating the extra bandwidth required of your web server. Additionally, if the browser has visited another webpage that uses the same version of the library from the same CDN, it can use the cached version, further improving page-load time.

Microsoft, Google, and Edgecast all provide CDN services for the jQuery library. Instead of referencing jQuery from your local server:

<script type="text/javascript" src="/Scripts/jquery/jquery-1.5.min.js" ></script>

you can reference it from Microsoft’s CDN:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.min.js" ></script>

you can reference it from Google’s CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

or you can reference it from Edgecast’s CDN:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

If a user has visited another page that used the same library from the same CDN, the browser will already have a cached copy of the CDN stored locally. Therefore, the more webpages that use a CDN, the more visitors will have already cached the library. As a result, you will get a greater performance benefit by using the most popular CDN.

To use the Microsoft CDN for Microsoft AJAX (your only option), simply set the ScriptManager.EnableCdn property to true, as the following example shows:

<asp:ScriptManager
    ID="ScriptManager1"
    EnableCdn="true"
    Runat="Server" />

Using Rich Client-Side Plug-ins

JavaScript is capable of providing a moderately rich user interface that changes based on user actions. JavaScript can also display some video and animation. However, if you want to provide a rich user interface beyond JavaScript’s capabilities, use high-performance or 3D graphics, or display some types of video, you need to use a plug-in. Two of the most common plug-ins are Adobe Flash and Microsoft Silverlight.

Flash and Silverlight are capable of complex, interactive animations, high-definition video, and games. They can also directly access some aspects of the computer that are not accessible to JavaScript, such as the video adapter’s graphical processing unit (GPU), which is useful for accelerating graphics displays and performing some computations. However, Flash and Silverlight have several disadvantages:

• They require users to download and install a plug-in before they can be used.

• Users who already have the plug-in installed might have to update the plug-in before they can access content created for a newer version of the plug-in.

• Some browsers (such as the Safari browser built into the popular iPhone and iPad products) cannot support one or both of the plug-ins.

• The Flash and Silverlight objects must be stored in a separate file and embedded in a webpage. These objects tend to be large, increasing the size of the page and reducing page performance.

Because of these drawbacks, you should use plug-ins only when you can limit the impact of the drawbacks. For example, if you have a technology-savvy customer base that is willing to install and update the plug-in, or if you are deploying an intranet application and the Information Technology (IT) department will support the plug-in.

If you create web applications that use Flash or Silverlight and you must support a wide variety of browsers, create webpages that degrade gracefully. If a browser does not have the plug-in installed, provide a link so that users can install the plug-in. If a browser cannot support the plug-in, provide alternate content that duplicates as much of the functionality as possible using traditional HTML and JavaScript.

Objective Summary

• JavaScript is the only widely accepted client-side scripting language, though Internet Explorer also supports VBScript. You can use client-side libraries to extend JavaScript’s capabilities. Visual Studio 2010 has built-in support for two client-side libraries: jQuery and Microsoft AJAX.

• Rich client-side plug-ins, including Flash and Silverlight, provide a responsive and interactive experience rivaled only by desktop applications. However, they both require plug-ins to be installed in most browsers. Some browsers, especially those on mobile devices, do not support either plug-in. Therefore, when using a rich client-side plug-in, you need to plan to provide alternate code for clients that lack the plug-in.

Objective Review

Answer the following questions to test your knowledge of the information in this objective. You can find the answers to these questions and explanations of why each answer choice is correct or incorrect in the Answers section at the end of this chapter.

1. You are designing an ASP.NET web application that allows end users to chat live with customer support when they click a Button control. At times, it might take several minutes for customer support to respond to a user. You need to design the application to be responsive to users, even when customer support cannot immediately reply. You need to support a wide variety of browsers, including browsers built into mobile devices. Which approach should you recommend?

   1. In the Button.Click event handler, return a webpage that contains a real-time chat client implemented by using Flash. Configure the Silverlight client to communicate directly with customer support.

   2. In the Button.Click event handler, return a webpage that contains a real-time chat client implemented by using Silverlight. Configure the Silverlight client to communicate directly with customer support.

   3. In the Button.Click event handler, connect to the customer support chat client. Add the response to the webpage.

   4. In the Button.Click event handler, return a webpage that contains client-side JavaScript code that connects to a web service running on the server to send messages from the user and retrieve responses from customer support.

2. You are designing the client-side component of web application with the following requirements:

   • Retrieve data from a web service, and display it in a <div> element on the webpage.

   • Work with all common browsers.

   • Do not require client-side installation.

   Which two technologies should you recommend? (Choose all that apply. Each answer forms a complete solution.)

   1. Silverlight

   2. jQuery

   3. VBScript

   4. Microsoft AJAX

3. You are designing a 3D game that will run in client browsers. The platform you choose must be able to work in all common browsers and must support GPU acceleration. Which technology should you choose?

   1. Silverlight

   2. jQuery

   3. VBScript

   4. Microsoft AJAX