Web applications might be all about accessing and manipulating data from within a web browser but the way the application looks and feels to the user is just as important. A user interface that is non-intuitive, sluggish, or fails to work on some mainstream browser will not invite users to use your application again.
HTML, the markup language commonly used to display content, does allow for some interaction through the use of<form> elements and the way a page is presented can be styled with cascading style sheets, but its use has some major drawbacks:
- It is quite difficult to create user interface components from basic building blocks that resemble commonly used applications.
- The use of HTML feels sluggish because each form, when submitted, fetches a completely new page.
Fortunately, all major browsers support JavaScript and that language can be used to add a whole new level of interactivity. However, in order to smooth out all inconsistencies between browsers, you can save a lot of development time when you use a JavaScript library that takes care of those inconsistencies and adds cross browser compatible user interface components (widgets).
Although such libraries are used client side, HTML pages can be composed in a way that instructs the browser to fetch these libraries from a central source, for example, the same server that serves the web application. This way, the use of these libraries imposes no extra requirements on the browser.
Some points to consider when choosing a suitable library are:
- Is it really cross browser compatible? Not all libraries support each and every browser. This might be important if your application still needs to work with a fairly old browser.
- Does it offer the graphical components and functionality you need?
- Is it well designed and documented, extensible, and consistently implemented? After all, such a library should be fairly easy to learn and as no library can offer everything, extensibility and especially how easy it is to extend it are important considerations.
- Does it have an active user community? All the more important here because such a community may not only provide answers to your questions, but may be a good source of reusable components.
Based on these considerations, we choose to use two intimately connected JavaScript libraries: jQuery and jQuery UI.
Let's have a look at why jQuery and jQuery UI are such a good choice.
jQuery provides the functionality to select and manipulate HTML elements on a page and jQuery UI provides a number of sophisticated widgets and effects. Together, they offer many advantages:
- jQuery not only hides browser inconsistencies, but its methods take CSS3 compatible selectors even on browsers that do not support CSS3 in the style sheet they accept.
- Both libraries are widely used, actively maintained, free, and are distributed as small files. The latter is important when you consider that these files need to be transferred from server to client so any bandwidth saved is good.
- jQuery UI offers a rich set of well designed and professional looking graphical components and effects.
Other advantages of the wide adoption of these libraries are that there are many resources available to get you started and that many people have written plugins that extend the usability of these libraries even more. As we will see on many occasions, the essence of developing a good application efficiently is often choosing the right plugin for the job.