Matt Brickner and I recently gave a Lunch and Learn session here at RCM on JQuery and its impact on the modern web.  The presentations primary goal was to introduce those who hadn’t seen JQuery to the syntax and what it can do, increase the awareness of solutions outside the standard Microsoft stack, and finally to get the ball rolling on revamping some of the methodologies and principles we develop web applications with.

JavaScript has a strange story to tell.  It was the subject of much ridicule throughout the early part of its existence and was considered to be a “dead” language prior to the rise of Ajax in the early 2000s.  Since then it has advanced considerably through the development of plugins, libraries, and frameworks.  So important is JavaScript to the Web 2.0 movement that we are seeing major companies like Google and Mozilla releasing new engines for processing JavaScript.  In fact, it may not be long till we see compiled and typed JavaScript.  A listing below describes the browsers and the code name of their JavaScript engines:

• Chrome (V8)
• TraceMonkey (Firefox 3.1)
• SquirrelFish (Safari)

Along with JavaScript is the emergence of Semantic Markup design principles for HTML and the idea of Interaction Design as an integral part of the development design process.

Interaction design consists of designing how a user will interact with your website and being able to coherently label what should be Ajax and what should not.  Web 2.0 application cannot simply be considered prettier versions of their 1.0 counterparts.  Web 2.0 requires a change of thinking because the pages can do so much more and be so much more interactive.  For example, most people would agree that adding an item to a shopping cart should likely be done in an Asynchronous matter, however, if I click the ‘About Us’ link in your main navigation, should that be synchronous or asynchronous.

In addition, having a proper Interaction design process allows you to understand the interactive elements on your page and makes coding your JavaScript easier and more straightforward. It also allows for you to plan the degradation of your JavaScript should the technology not be available.  Depending on the feature you may choose to implement in also synchronously, or simply state that the feature is not available.  These are decisions that should be made during design and not as you are coding.

Interaction design obviously rests on Ajax and JavaScript in the end.  To that end, understanding how to properly implement Ajax based functionality is critical.  When I code up Ajax solutions I tend to follow the three tenants of Ajax:

• Less is More
  • Ajax is designed as a means limit the amount of bandwidth the site is using. To that end, Ajax calls should only include what is absolutely needed for the service to carry out its task. And the service should only return what the JavaScript needs to update the view.  This is the primary tenant violated by the ASP .NET Ajax framework’s Update Panel
• Instance Feedback
  • Since the operations you will be engaging in will not elicit the standard progress indication mechanism within the browsers. Most users are going to be looking for this. Communicating to them that something is happening is essential to creating a positive user experience
• Synchronization
  • We should be transmitting data between the client and the server. However, the server should never be ahead of the client in terms of state and errors with storage on the server should be communicated and reflected on the client

Obviously there are some points here I am forgetting, such as the back button and history maintenance, but I want to leave those for ad-hoc conversations. The one point I do want to make is that, regardless of whether your client is thin or fat, expect to write a lot more JavaScript.  And face it, at least right now, not many people really enjoying writing standard JavaScript.  It is for that reason that frameworks exist, in any language.

JavaScript has many problems, from its long list of incompatibilities to the differing implementations of DOM traversal/manipulation between browsers.  Often times event he simplest operations require large amounts of code to get around type errors or account for browser variances.  This difficulty makes it hard to properly code JavaScript in an unobtrusive way.  Frameworks, like JQuery, are designed to address these problems, as well as bring structure to the JavaScript coding process.

Here at RCM we are making JavaScript a standard part of our development toolbox and including it on all projects where we can use it. We have even started researching and discussing patterns for development so we can create a standard look and feel for our JavaScript code to decrease ramp-up time for new team members.

So now that you understand why JQuery is important and why using a framework such as it is paramount in the modern web, lets look at some basic syntax examples:

$(".entry").css("color", "red");

This is a very basic example of JQuery.  We are using CSS definition notation to select elements.  This statement effectively says: select all elements whose use the class entry.  Set the color css style the value of red.  For ids its very similar:

     $("#lblName").css("color", "blue");

So in this case JQuery is doing the following: select the element whose id is lblName and set its color style to blue.  There is an important distinction here.  ID is singular, class is plural.  That means if you need to store something that you will be looping through, use a class, if its something that has one instance on the page, use an ID.

JQuery also makes it very easy to wireup events for elements.  The most common one you will see will be the ready event, which fires when the DOM is ready and is the most acceptable time to begin DOM manipulation via JavaScript.  A sample is below:

$(document).ready(function() {
   $("a.nav").each(function() {
      var elem = $(this);
      elem.bind("click", function() {
           alert($(this).attr("href"));
      });
   });
});

So this is a bit more complex, but it demonstrates the ready event as well as two ways to bind events to elements.  So to describe what this block does: When the DOM is ready select all with a class of nav and bind their click event to an anonymous function.  This function, when invoked, should look at the current linked being clicked and alert back its href attribute value.  Some important notes for this block:

$(".header").click(function() {
     $(this).next().slideToggle("slow");
});

     $(".entry:first").load("HelloWorld.html")

$.ajax({
   type: "POST",
   url: "BookService.asmx/GetBook",
   data: '{}',
   success: function() {
     alert("yeah");
   },
   error: function() {
      alert("bah");
   }
});

http://cid-18f9d8896416d2fb.skydrive.live.com/embedrowdetail.aspx/BlogFiles/JQuerySampleDemonstratiion.zip

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }