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 <a> 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:
- ready event - fired when the DOM is ready. Is the standard script initiation event in JQuery.
- $(this) - refers to the current item the JQuery block refers to
- attr - function to get/set attributes of the selected element
- each - iterator statement to loop through an array of JQuery results
In addition to making DOM traversal and manipulation much easier JQuery's core also boasts some great UI effects available right out of the box. The block below demonstrates an example of collapsing a sibling via header text:
$(".header").click(function() {
$(this).next().slideToggle("slow");
});
So here we look for all elements with the class header. For each one in the listings we attach the click event so that when clicked it will look at its immediate downward sibling and slide it up or down depending on its present state. This is a prime example of how you can achieve a highly attractive an interactive effect in JQuery is a few lines. Some important notes for this block:
- next - refers to the next sibling in the HTML. Its counterpart is prev
- slideToggle - combines slideUp and slideDown with statement management. It take as a parameters: fast, slow, medium, or a numeric entry for the duration the effect should take
In addition to its proficiency with handling DOM traversal and maniulation JQuery is also fully capable of handling Ajax. This is done, primarily, through the .ajax and .load functions. .load is the jack of all trades enabling you to load a pages <body> HTML content through Ajax. This would be most useful for contextual switches within websites where you are loading pages in a template based design. The following code block demonstrates this:
$(".entry:first").load("HelloWorld.html")
This will basically load the <body> HTML content of HelloWorld.html into the first element with the class entry. Some important notes for this block:
The alternative, and more low level, approach to performing Ajax is the .ajax function. The following code block demonstrates using a web service to return XML:
$.ajax({
type: "POST",
url: "BookService.asmx/GetBook",
data: '{}',
success: function() {
alert("yeah");
},
error: function() {
alert("bah");
}
});
I am not going to dive in and talk about this in too much depth. It should be clear what is being done. The only thing I want to make note of is the data parameters and how we are passing an empty object. Because we are working with Microsoft Web Services, this practice is required due to security considerations on the backend.
So that explains some of the basics of JQuery and should give you some ideas on what you could do with this and how you could potentially use this to make your interaction code better. I want to stress, however, that I dont see JQuery as a replacement for ASP .NET Ajax; merely an augmentation, a new tool in my toolbox. The two can be combined quite successfully to form an application that can be developed quickly and easily with a high level of performance.
To conclude, Web 2.0 is not just about Pastels and Rounded corners. Its not about making an application using standard web technologies pretty. Its about understanding a new process for getting closer to the user. Its about understanding and anticipating your user and deliver an experience that will keep them coming back. The web has changed and the expectations our users have changed as well. JavaScript is paramount for achieving the level of interaction that users and craving, clients are desiring, and developers are excited to provide. Frameworks like JQuery can make the implementation of the features very easy and clean by providing a rich and robust way of select elements and groups of elements in an unobtrusive fashion
Interaction design will continue to be at the forefront of changing the way companies like RCM deliver our solutions. I believe the best way to move forward and take the next step beyond the simple adoption of JQuery is identify what processes you are having to do over and over again and encapsulate them into functions/libs supported by JQuery. Again, having a standard framework like JQuery for all projects will reduce the amount of code you have to write as well as help people get ramped up on new projects faster: its a win win.
I am including a zip file below here. This contains the Power Point presentation and the application that was used to demo JQuery on the fly.
