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.
The JQuery Dialog went down a storm too on the useability front too, as people were used to nasty old default JavaScript ones – the ability to include HTML within each dialog, on the fly allowed me to achieve some pretty informative and useable diaglog.
AJAX Integration
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!
A Single JavaScript File
Through a single javascript file, I have a huge range of effects and widgets at my fingertips, all of which are compatible with each other. There is nothing as annoying as finding a nice widget for your application and the realising it breaks exsiting areas of your code. For instance, the JQuery Tools set of widgets look very nice, but seem to break a lot of existing code – this seems to be fairly regular for that particular set of plugins. Compare this with JQuery UI – I know I’ll have a range of rich interactions that will always work together. As a developer, this makes my life so much easier and aids development time. For example, I don’t have to scour the internet for a individual plugins, all of which will work and look different – I have them all in the form of JQuery UI.
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.
My <3 is all for jQuery UI. I use it extensively too but you've done good in also writing your experience. I have used it allover on [LOL] 🙂
very useful website!
JQuery makes the web developming world much better.
when we build web sites for our clients we add as much jQuery as possible.
Great blog! Jquery is one of the best libraries I have worked with. I always use some Jquery in my pages.