jQuery Challenge - Part1

05/05/2008 12:00 am

Maxime THOMAS

During a mission, I discovered jQuery : a javascript library providing facilities and strong functionnalities to static web pages.

jQuery

The use of this library is very simple. It has been made to use the developper's life and specially the maintenance of functionnalities. The javascript entered is shorter and more simple. It has few concepts so it is very quick to learn.

There is only one entry point in jQuery : the $ function. It allows you to access some standard functions to select nodes in the DOM, to manipulate them or to handle events.

The selectors are very useful because you can select almost every item in the DOM using id, css class or javascript variable name. Then, if there is more than one occurence, the function will result an array. Moreover, you can use XPath expression as filters, to reduce the number of object returned.

The strength of jQuery is the chainability of the functions. It allows to increase readability and maintenance of a javascript. You can also combine jQuery with classical JavaScript scripts.

The Challenge

To test this library, I've decided to develop an eZPublish extension integrating the jQuery library.

As a user case, I've chosen the Facebook tagging functionnality : you choose a picture, you tag your friends, you save it, hovering the head of a friend, the name is shown...

I have first worked offline to design the javascript. Here's a snapshot of what I have done : image gallery

Conclusion : it's very easy to come to grips with jQuery and a bit hard to debug. So I've searched and found a plugin to debug my script. See below.

Other interresting libraries...

I also heard about the ExtJS library which is a professional javascript library providing user interface components to build professional applications. jQuery is also experimenting this way by launching jQuery UI. It will be at the end equivalent I guess, but you will be able to still use the jQuery library as an independant library.