Benjamin Tinker Team : Web Development Tags : Web Development CSS jQuery

jQuery it up. But not too much.

Benjamin Tinker Team : Web Development Tags : Web Development CSS jQuery

More and more sites are getting dynamic and the reliance on jQuery is becoming king as Javascript becomes forefront once again. One thing to keep in mind is that the jQuery library has been tried and tested should be held to without getting too creative. It can break.

When setting out to create a responsive site that can cater for the growing number of devices we browse with today it is important to re-use as much of your structure as possible. Having to cut two versions of a site for Desktop and Mobile devices just creates more development time and opens up having two code bases to render each version. With responsive design you are able to expand and contract the display and the site should re-align itself correctly to the devices display area. A well structured combination of style sheets and jQuery can make this all happen without a page refresh.

Sometimes it can be tempting to write your own jQuery plugins or even take some code from an existing plugin and do the magic copy/paste into your own Javascript library. While this may make things easier at the time of slicing it can come back on you if you custom roll an existing plugin. The jQuery UI is very robust and chances are there is someone out there that has already done any effect you are looking for using either the jQuery base library or its expanded UI library. If you hack and existing plugin and later on another developer needs to perform some extra functions on the same plugin they may run into troubles as the custom rolled one does not match the jQuery standard. This can only scale out to bad things.

Working on a site recently there was a lot of effects rolled into the site. They were implemented by a 3rd party doing the copy/paste of some jQuery code and even some of the Prototype framework. Everything worked fine. Sure there was this custom Javascript file with a few thousand lines of jQuery-esque code in it but it seemed to work OK. Then the site need a new feature. It was a simple predictive text drop down.  The jQuery UI has a built in Autocomplete class that allows for implementing some predictive searches with drop downs that can be generated via AJAX calls. The .NET code was already in place so I only need to add the jQuery UI plugin to the site and wire it to the search field. 

BAM!

Simply adding in the jQuery UI library did not go well for the rest of the site. Suddenly carousels stop scrolling, image sizes are out of place and the responsive design does not respond so well. Looking through the Firebug browser plugin it turns out that all that custom rolled jQuery conflicted with a lot of the native jQuery plugins. The end result was I had to remove the jQuery UI and now have to consider either writing my own Autocomplete plugin, the very thing that caused the failure, or I remove all the custom jQuery-esque code and force it to use the jQuery library as it was intended. Writing my own Autocomplete would be a relatively simply task but it does not create a good future if another effect is required that is part of the jQuery UI library. The spiral of creating your own or going back to fix is a question of least resistance.

If you do want to create an effect for your site regardless of what it is I highly recommend checking out jQuery and all of its approved plugins and add-ons. The chances are there is a way to do it with those libraries and it has the guarantee to be future proof as part of the core library. To do otherwise it to create pain and suffering for those that follow in your footsteps.