Andrew's ramblings

Coldbox plugin to help with JavaScript Management

Tags: Coldfusion, Coldbox, Javascript

As most of you might have noticed I have put a new theme up on my blog, which wasn't without some challenges when I accidently broke the RSS feed :-(

I had been refactoring a lot of code to minimise the amount of code duplication as much as possible, one of the new features to the blog is a twitter feed. Now although the inclusion of this is nothing new, the code behind it uses some to help to reduce the amount of extra code that I write.

Hence a simple Coldbox plugin evolved in helping manage the JavaScript in the Application under the hood.

Now one of the things you may have noticed is that when you browse from the home page to the blog page, there are different pods on the left hand side. When I originally created the views for the website, and the layouts I had all this extra code to display different pods for different sections and believe me it soon became messy with code being duplicated all over the place.

So now I have minimised the pods down to another management plugin, and will blog more about that at another time once I have finalised the code in that plugin. But for now lets look at the Application that is running my blog at the moment, it is built upon the Coldbox framework and as most would know it is an implementation that utilises the MVC pattern amongst other things.

So lets look a little closer at layouts in Coldbox for a moment.

Coldbox uses the concept of using layouts for controlling the page that has been requested, the layout is then used to display any views that are asked to be rendered along with it. So a typical view might look something like this, minus all the nice trimmings.

Now currently that looks just like a standard html template, but if we remove the text and replace it with something like this.

And that tells Coldbox to render the view along with Layout, nothing special at this point and is all very basic stuff. But the problem I faced was trying to minimise the views that actually do get displayed for my blog, and the one piece of content that began to cause me some problems was the twitter view. The reason this caused me issues was because I had to place some JavaScript at the bottom of the layout to go and populate the content further up in the page. That problem was extra JavaScript code added to the page that would be loaded when I switched to another section in my Application that no longer needed that viewlet.

So the solution was to then write some code to add the data to the page, and this is what then transpired at the bottom of my Layout.

Now as you can see by this code it loops over a list that then adds the code to the layout, and I then had this in my Controller or as Coldbox calls them handler.

Which worked well, and made sure that the javaScript would not be included where it was not needed. After awhile when I thought about how much extra work that actually involved, became a bit more of a nightmare. Let me explain for a minute. From a maintenance point of view, tracking which section had the code to be included, would be not difficult to locate, but just more of a pain than what it was trying to solve.

So there had to be a better way, and there is. When I eventually refactored the code I thought about how it might impact other libraries and such, and eventually settled on something that is working and can be improved upon some more.

So now I have this in my code rather than what I had above.

Now you can also see that I am using another plugin called coldTweet, now the thing is that all I need to do now is just use that one line of code to include the JavaScript when ever I need too. And I have now reduced the amount of Layouts that I would have had to create, one with Twitter JS and one without and also minimised the fact that their was duplicate code in two of my Layouts.

The idea behind this very small and simple plugin cam about because I am also in the process of adding some extra functionality to the Application that is running my blog, and that is how can I manage what JavaScript framework gets included and how. Which I will blog about another time, but for now lets have a look at coldTweet as there is next to nothing for the code to work.

As you can see by the above code I use the JavaScript Manager to add the coldTweet JS into it, with two parameters that tell it the application and where to display the JS. Which currently is Header and Footer at the moment, and this should be explanatory so that the plugin knows where the JS is being stored and which application it will be used for.

There is one more function in coldTweet that gets the javascript back out again.

That is pretty much it, simple but yet powerful enough to manage what libraries get loaded an when. The idea as I touched on a bit above, is that I am looking at supporting multiple JavaScript frameworks which is still under work, but the idea is that if I want to switch extJS out for jQuery then I would just modify one line of code and the manager and the associated plugins to control the views and functionality will do the rest and I have to then not worry about it any more.

You could say this will be along the lines of a Factory Pattern, and essentially it is. For now I am still working on some small areas of the manager, but will be happy to forward a copy to anyone on request. Once the code is cleaned up I will then be forwarding it onto Luis to have included in the plugin repository over there, as well as provide a copy on RiaForge as well.

Tweet