jQuery UI and you. (Part 1 of 2)

Well, I had a number of potential first post topics listed out and am deciding to go with the most topical at the moment. For my post I won't be revolutionizing the game with something cutting edge but rather discussing an interface framework I've grown more and more fond of over time. If it wasn't immediately evident from the subject, that framework is jQuery UI.

To know jQuery UI, you need to know what jQuery is. At its simplest, jQuery is a Javascript API that you can bolt into any web application/site that will make your (client side programming) life infinitely easier/better. jQuery not only simplifies standard client side programming but it also makes advanced things like effects and animations much easier to achieve. With all it can do and for how lightweight it is, jQuery is quickly (if not already) replacing Flash as the go to for advanced front end effects. This is old news for most devs but there are still a great deal of people to live in the server side world only or only know what college told them to know.

The High Level
jQuery UI ( jUI ) is basically an interface widget framework that is just additional extension on top of jQuery. It offers a lot of effects and controls (buttons, calendar, sliders, drag-n-drop, etc.) that are now common place on the web in addition to some newer concepts which can be implemented easily into your front end code. They take care of the basic core functionality so, if necessary, you can focus on addressing user interactions. Additionally, all HTML elements in all of the widgets are driven by a single style sheet that is inheritance driven so it really makes changes easy to implement globally.

This sounds a lot like ASP.NET themes but is on the complete other side of the spectrum. They are roughly the same idea but jUI lets you off road a bit more and style every component of your application as one cohesive unit and not just buttons, text boxes, etc.

Keep a Programmer Programming
Personally, I like working in Photoshop and building concepts/graphics - always have. However, I am quickly learning that I am in the minority in this area as programmers tend to be more inclined to have those responsibilities be delegated to a “legit” designer and just worry about the middle tier and punch out. Sometimes you have no choice. No matter how much I enjoy it though, tasks like making icons and small graphics is tedious/time consuming and there are tons of packages available that are probably better for such a simple task. That’s where jUI comes in handy. They offer a built in icon set for all of the standard (and some advanced) actions a user might need to perform. In their typical baller style, their dev team provides all of the icons in one lightweight image and uses CSS Spriting to determine which is displayed.

What’s that all mean? Colors, icons, width, etc. are all dictated by CSS classes applied to HTML elements which makes changes a code endeavor which is more up any programmer’s alley. No time fussing with in the 15x15 pixel world in Photoshop or PSPro.

Jazz Hands
One of my favorite aspects of the framework can be summed up in one word – ThemeRoller. The jUI people have been courteous enough to provide a customization tool that lets you tweak just about every aspect of your theme (background color, gradient styles, borders, hover styling, etc.) through a web app and then have it all packaged up to be deployed into your application within minutes. That way you can make your interface as loud or muted as you want. Client wishing they would have picked cornflower blue instead of sky blue last minute? Ain't no thang. Make the necessary changes in ThemeRoller and swap in the new CSS file. You can take it to the extent of providing them a link to the ‘Roller and let them tweak things until they are satisfied and just have them send you the link to the new theme when they are done so you can pull down the new CSS file. It’s simple as that.

.... and now its a made guy.
jQuery being bundled with Visual Studio 2010 was one of the notable additions to the IDE. Not notable because it made jQuery easier to implement (easier to use,maybe, with Intellisense), notable because the little open source framework got a nod from the Don. Fast forward to today, things have grown to the point where MVC3 is now tightly coupled with jQueryUI framework (quite well actually) to where developers can't help but leverage it to get the job done better/faster.


Side note - The script libraries Microsoft is including seems to be the final admission that "OK, we know MSAjax _might_ have sucked."..... and lets be honest, there is an UpdatePanel or two all of us would like to take back.

Wrap Up
Before this all comes off as a fan boy material (too late!) I will admit, if you are relatively new to the UI/Client side of things there is a bit of a learning curve with jQuery and its UI extension. Additionally, out of the box, these are straight forward web components so that means you'll be wiring up your own postbacks, hombre. Which also creates another obstacle in maintaining/recovering state. So there in lies the lead in to my next installment. MVC lets you architect a lot of this in a pretty seamless manner but for the rest of us that don't have clients/companies that are willing to drop the clams on VS 2010 I'll be piecing together some basic .NET wrappers to get you going in the right direction (or at least what I think is the right direction). Alright, that's all, the gardener has gardened all day and doesn't want to mow his own lawn anymore. I hope to have Part 2 done with the next couple weeks with some other posts sprinkled in between.