For those of you, happy web developers already using jQuery, you may jump to the bottom of this article when I will be revealing some nice tools and links to assist you further. For the others, read on, and I will try to explain to you what is jQuery, and why it is so important that any web developer coding in Javascript gets to know it.
I think that most web developers would agree that Javascript can be many times a daunting endeavour. The sheer amount of functions, objects and methods is a challenge for anyone trying to integrate it with their web applications, even if they are experienced developers. Besides that, there is the nightmare of cross-browser compatibility: when coding for the web, one needs to take into consideration at least four of the existing browsers (IE, Firefox, Google Chrome and Safari).
If we consider just the Microsoft Internet Explorer alone, one the most popular browsers for the web, there are all the idiosyncrasies of the different versions adding to the confusion and generating more bugs to solve. Take IE6 and IE7, for instance: a design and code that works perfectly in IE6 may very well be broken when viewed by IE7. Even though IE6 is currently being quickly phased out by the newer IE versions, there are still many differences between those and the other browsers. To make things worse, Microsoft has a long history of preferring to implement its own solutions instead of complying with web standards, like the other browsers try to do...
It is a well known fact that developers do like to reinvent the wheel. Nobody can program better than you, right? So, you are going to code that function yourself and turn it into a real masterpiece! While this mindset was attractive in the past, nowadays it is a pure waste of time. The world is full of good programmers, and a considerable number of them have joined communities that are engaged in high caliber Open Source products.
jQuery is one of such products, an Open Source Javascript framework. There are many out there, but for me jQuery is the easiest to learn and one of the richest, thanks to a very active developer's community. jQuery is a brilliant piece of engineering that encapsulates an enormous range of Javascript functionality into a lightweight, well structured and easy to understand architecture.
jQuery helps you at least in so far as the Javascript code is concerned. It facilitates, among other things, the nightmarish task of making the code compatible with all major browsers, and this is not a small feat. The clear and concise syntax of jQuery is also a big advantage, turning your scripts into much more readable and maintainable code. Also, the Ajax capability of jQuery is among the best and most flexible you can find.
Learning to use jQuery is a small effort, compared to all the benefits you may get from it. My advice to you is to give it a try: download the script, experiment with it and take a good look at all the examples on the jQuery main site. You get good support, frequent upgrades with a lot of improvements, and it's free for the take, it costs nothing.
It is a well known fact that developers do like to reinvent the wheel. Nobody can program better than you, right? So, you are going to code that function yourself and turn it into a real masterpiece! While this mindset was attractive in the past, nowadays it is a pure waste of time. The world is full of good programmers, and a considerable number of them have joined communities that are engaged in high caliber Open Source products.
jQuery is one of such products, an Open Source Javascript framework. There are many out there, but for me jQuery is the easiest to learn and one of the richest, thanks to a very active developer's community. jQuery is a brilliant piece of engineering that encapsulates an enormous range of Javascript functionality into a lightweight, well structured and easy to understand architecture.
jQuery helps you at least in so far as the Javascript code is concerned. It facilitates, among other things, the nightmarish task of making the code compatible with all major browsers, and this is not a small feat. The clear and concise syntax of jQuery is also a big advantage, turning your scripts into much more readable and maintainable code. Also, the Ajax capability of jQuery is among the best and most flexible you can find.
Learning to use jQuery is a small effort, compared to all the benefits you may get from it. My advice to you is to give it a try: download the script, experiment with it and take a good look at all the examples on the jQuery main site. You get good support, frequent upgrades with a lot of improvements, and it's free for the take, it costs nothing.
Sounds too good to be true? I can assure you that it is true, and to confirm that, we see a plethora of jQuery tools, controls and additional functions being created every day by an enormous community of users. I dare say that almost everything you may ever need in Javascript, has already been coded for you as a jQuery extension or control. If, by any chance, you stumble on a very specific need, the excellent documentation will explain clearly how to program your own extension to jQuery.
I always thought that one of the most important characteristics of any piece of code is simplicity. When the code is simple, it can be easily understood, maintained and expanded by someone else. And what can be simpler, for example, than this one-liner:
$("p#msg").load("/errors/wrong_date.html");
The above will call the server to deliver the error message for a wrong date entered by the user, and display it on the paragraph with an id of "msg". And the following one-liner will simply clear the error message from the display:
$("p#msg").html("");
These two lines implement an important part of what is called "real-time error checking", a feature that gives immediate feedback to the user while he's filling each field of a form. This technique is much more user-friendly than waiting for the user to submit the form, and then check all input at the server, to return a long list of errors in one go.
This is the jQuery way of doing things: concise, simple and easy to understand. Isn't the small learning effort worth while?
I always thought that one of the most important characteristics of any piece of code is simplicity. When the code is simple, it can be easily understood, maintained and expanded by someone else. And what can be simpler, for example, than this one-liner:
$("p#msg").load("/errors/wrong_date.html");
The above will call the server to deliver the error message for a wrong date entered by the user, and display it on the paragraph with an id of "msg". And the following one-liner will simply clear the error message from the display:
$("p#msg").html("");
These two lines implement an important part of what is called "real-time error checking", a feature that gives immediate feedback to the user while he's filling each field of a form. This technique is much more user-friendly than waiting for the user to submit the form, and then check all input at the server, to return a long list of errors in one go.
This is the jQuery way of doing things: concise, simple and easy to understand. Isn't the small learning effort worth while?
Tips for advanced usage of jQuery
An alternative way to work with the jQuery library is to include it in the webpage with a script tag, using Google's API hosting service:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Doing this has several advantages over hosting jQuery on your server(s): pages will load faster (decreased latency, increased parallelism, better caching), and you will be sure to always get the latest release of version 1 (the current version).
In the jQuery website, take your time to browse through the extensive list of plugins and get acquainted with what you have at your disposal. This will certainly avoid you to embark in a "reinvent-the-wheel" adventure.
It is a well known fact that the jQuery documentation is excellent. However, due to the sheer amount of functions, a cheat-sheet may prove handy once you are familiar with the arsenal at your disposal, but can't remember the precise syntax for a certain statement. This site offers 25 different jQuery cheat-sheets for web developers.
Smashing Apps is a great place where to look for jQuery plugins and techniques in order to create visually exciting websites. The same Smashing Apps, presents you also with a large number of plugins to render beautiful photo galleries.
Noupe is another very useful repository, listing jQuery plugins ranging from slideshows to graphic charts and various text effects.
On the website of Marc Grabanski you will find a huge list of useful jQuery plugins for all purposes. The best ones are marked EXCELLENT.
You may also want to check the ultimate jQuery plugin list at Kollermedia.at. This list is especially useful because the plugins are nicely grouped into categories.
Webreference will introduce you, step by step, to the techniques that will allow you to extend jQuery with your own plugin. Another excellent tutorial on how to develop a jQuery plugin, is to be found at Sitepoint's, the well known book publisher.
Alternatively, if you are an absolute beginner in jQuery, pay a visit to net.tuts+ website, where you can follow the complete series of 15 screencasts that will help you to become a jQuery pro.
I could go on and on, listing many other jQuery resources spread all over the Internet. What I listed above is just the tip of the iceberg, to show you the popularity of this framework, and to give you a taste of the huge amount of resources and support you will be able to discover in the web. To find much more, there is always Google Search, right?
No comments:
Post a Comment