Recently, I’ve completed a fairly large project that involved an invoicing system and electronic time cards. As the system was based in house, I decided to make extensive use of JQuery UI. After taking some time to reflect on this I decided to show JQuery UI some love and write a short list of reasons whyit totally rocks, as it made my life as a developer a lot easier. Yes, it is overkill importing the whole Jquery UI library and using a single, none essential widget, on a one page smaller site. However, when you have a medium sized system, that requires a large range of interactions, there really isn’t anything else I’d rather use, personally.
The Range of Widgets Available
Firstly, I made use of nearly all the widgets available – this resulted in the final system being highly interactive and useable. For instance, having the ability to sort items simply via dragging and dropping when down extrememley well on the useability front with users. JQuery UI made it very easy to save these sorted positions to my database. Having to write something like this from scratch would have been impossible (for me anyway :)) and been very time consuming.The dashboard/portal area was another area, where the requyirement to personalise the location of various content boxes was made easy.
AJAX was always going to be a big part of the final system, so silently loading reports in background whilst users worked was essential. The majority (if not all) of the widgets have functionality to set AJAX options with ease. For instance, adding a nice ajax loading image while a report loads within a tabbed interface took a couple of minutes to achieve. As a further example take the Dialog widget – I was able to easily achieve the following, quite involved effect within a few minutes. A user clicks on a ‘raise invoice’ link, the dialog popups with a dropdown (the user would choose from an action here). Im was able to update the action all within the dialog, via AJAX.
Jquery UI CSS Framework
I’m a huge fan of the css framework used and especially of the fact it’s easy to skin large parts of your application via themes. Additionally, it is easy to borrow small parts of css such as icons and form formatting for use in other parts of the system, thus speeding up development even more, whilst keeping a constant feel to the system. The Jquery UI have added many specific classes that makes it easy to tweak the visual settings. Interestingly enough, it is lucky that JQuery UI has theme switching functionality, as one of the more odd requirements was to have a darker theme in the evening/nightime – this is easy to do on the fly and by conditionally including different JQuery UI css files – job done!
The Filesize Issue
One of my biggest qualms was the filesize of the library in the past. However, the recent 1.8.x release has been the filesize reduced by over 50%! This is of even little concern for me now, as the speed advantages I gain by using JQuery UI are great. Additionally, Google host Jquery UI on their CDN, so you can use the google.load method is silently load the file, with even less disruption to your users.