Tuesday, August 31, 2010

User Interface Libraries

I have been all about the UI/UX in my work now for the past 4 years or so.  The biggest hurdle of course was the cross-browser compatibility issues.  Way back when I first got into standardizing UI's, I built my own javascript cross-browser library (ouch!).  It was painful, but worked through a lot of those pesky issues.  The original purpose of it was to make AJAX standard across browsers but soon turned into much more.

Then I discovered all these people who had more time on their hands that already did that work for me and I soon scrapped that idea of reinventing the wheel and used my first third-party JS library.  I built a JS library on top of prototype.js that suited the needs of the project.  I then moved onto MooTools and did the same by building my JS library on top of it.  This time though, I threw in some CF custom tags that generated the markup for some common UI components and then initialized them from my JS library.

This vicious cycle of building UI libraries has continued.  I think I am now on number 4.  I have moved onto jQuery now for my 3rd and 4th libraries which is definitely a keeper.  However now I build my JS lib as a jQuery plugin which makes it much easier to integrate, implement, and upgrade.

My 4th installment I am building myself on my own time so for the first time ever, I will actually be able to share it with the world.  I plan on putting it on Google Code when it gets to a good point.  I have to say this time around, I think I really nailed it!  I have learned a lot from each version I have written.

In my 4th version, I am still using jQuery (as I mentioned) and using jQueryUI as well.  I have created CF custom tags as wrappers to jQueryUI components.  The custom tags simply create the markup required for the UI component.  My library plugin once loaded simply scans the page for any components and calls the appropriate jQueryUI class passing in any config.

Another thing I try to accomplish with my UI library is ensuring it takes advantage of HTML5.  Especially the new form controls.

The thing I did differently with this version over my 3rd was rather than duplicating all the attribute logic in each custom tag, I moved all logic into CFC's.  So basically the custom tags are do nothing more than instantiate a CFC passing all attributes.  The CFC takes care of validation the attributes; ensuring all required are passed, ensuring they have proper enumerated values, etc.   Using CFC's came in very handy so I could add inheritance to the tags.  Some of my tags are just wrappers with additional attributes to other tags.  This got sloppy when all logic was in the tags, but by using CFC's, this was a piece of cake.

Anyway when I release this one I'll explain more.  Until then...