Brennan’s Blog

Now that ASP.NET MVC has been released and jQuery is included it is time for every ASP.NET developer to start embracing jQuery. I personally have been using jQuery and other JavaScript libraries for the past few years. Ever since JavaScript became popular again thanks to the likes of the Google Mail interface in 2004 and the naming of AJAX by Jesse James Garrett in 2005.

With JavaScript becoming a central piece of a modern web application, I decided that I had to start taking it seriously. For years I only used JavaScript to enhance a page and ensured that if the user had JavaScript disabled the page would still work as required. It was time consuming to add a lot of JavaScript and it was often not worthwhile. Starting in 2004 I started seeing more and more sites start building sites which simply would not work without JavaScript. I decided that since I plan to do web development for many more years to come that I had to learn how this was all done, and I found that these modern sites were leveraging JavaScript libraries that would abstract away browser differences and reduce the effort necessary to implement a rich experience.

I tried out several libraries and after working with libraries like Prototype and MooTools I settled on jQuery. The compelling features of jQuery were the small download size along with the powerful plugin model with a rich collection of available plugins. The other libraries are still useful, but jQuery is what I reach for first and it typically does not let me down.

An important point that I have to get across to developers and designers who are getting into jQuery is that it is not a replacement for JavaScript. It is simply a compatibility layer that has an elegant interface which is far easier to use than the standard DOM API. It is still necessary to understand JavaScript to build modern web applications well. I also stress the fact that you must have a strong grasp on HTML and CSS because jQuery manipulates HTML and CSS to achieve the interactive features that you are building with jQuery.

Web page layout is known as the Box Model. It is a simple concept but working with it can be difficult with many browsers which do not behave in the same way. CSS alone can be intimidating, but if you break it down and keep it simple for a while you can pick it all up gradually. I have found books by Eric Meyer and Jeffrey Zeldman to be the best resources to master the Box Model.

I have been doing web development for a very long time and back in 1999 the JavaScript that I wrote then is very different than what I am writing now. I have had to unlearn a lot of bad coding practices. The most difficult lesson that I have learned is that every book back then had it all wrong. When I read Pro JavaScript Techniques by John Resig I finally started to see the language as it was meant to be. A year later I found JavaScript: The Good Parts by Douglas Crockford which is a book that you must read. It is packed full of important details you wish you had known before, and it is a very short book which makes it much easier to finish reading. Both of these books are the foundation for all of the modern techniques I am using every day. And a new book coming soon by John Resig called Secrets of the JavaScript Ninja will cover additional topics that he did not get deep into in with his first book.

Once you have started to come up to speed with HTML, CSS and JavaScript you will want to make sure you are making use of the best tools that are now available. I compiled a list of Web Developer Tools for the Power Developer. If you are not familiar with these tools yet you will discover the work you have been doing can be much easier. Since I created this list there have been updates to these tools and new browsers like Google Chrome and Internet Explorer 8 have started to implement useful tools in the browser which are similar to the extremely popular Firebug extension to Firefox.

I have built some tools to assist with web development. Packer for .NET is one which I have started using on every web site I build lately. This utility can compact your JavaScript and CSS by stripping whitespace and comments which are not necessary in your production environment but are very useful in making your work maintainable. Recently I have implemented functionality making it easier to combine multiple files into one. I find that instead of one large file that is over 1000 lines long it is better to break that file into pieces which are used during development and then when it is moved to production, where the debug attribute in the Web.config is set to false, the files are combined, compacted and sent in the response. The Packer project also includes an MSBuild task to update your Web.config during deployment. I use this feature often to automate my deployments with a single click. You may find this utility will save you a great deal of time.

Going forward with jQuery and ASP.NET MVC is going to be a very different experience from the PostBack model. I will have greater control over the HTML which will allow me to define the semantic structure and style it the way I see fit with CSS. Adding behavior with JavaScript is going to be a lot easier. It won't all be rainbows and I am sure new problems will come up, but it does feel like a fresh start.

If you would like to read more on jQuery and Javascript, please subscribe to this blog and also browse my past blog entries. In the next few months I will continue writing about jQuery and ASP.NET MVC, so more content is coming. And be sure to post comments. I always like to know what others are doing.