Archive for the ‘Javascript’ Category

Size does matter

A good user experience requires responsiveness. Speed. Web pages that don’t make you wait more than a couple of seconds while they load, or even worse, load in bits and pieces and reorganize themselves in front of the user; “that’s the way these things work” isn’t good enough an excuse. Your users don’t want to know how your site works (even if your site is about how the internet works – they want to read about the problems, not experience them), they just want to get things done and move on. As Eve says in Gaiman’s Fables and reflections, “Some people have real problems with the stuff that goes on inside them … sometimes it can just kill the romance”.

Two of the culprits these days seem to be huge JavaScript and CSS files. They’re by no means the only causes, but they can cause trouble at times. Delays when loading a CSS file result in the dreaded flash of unstyled content on some browsers. Problems loading a JavaScript file… well, let’s just say it ain’t pretty. The delivery of these files can be slowed down by a number of factors. File size is one of them; a 168kb file will download considerably more slowly than a 6kb one.

This is made worse by the use of multiple JavaScript and/or CSS files. Separating functionality or styles in a sensible way is heaven-sent when it comes to maintenance, but the way the web works means that it’s a lot easier to download one largish file than several small ones. Multiple files mean that the browser must make multiple requests to the server, and each request carries a small overhead since the server has to include a certain amount of information with each response it makes. To top it off, most browsers are configured to open a limited number of connections to a server at any one time – IE8 allows up to 6 concurrent downloads on broadband, while Firefox allows 8; these connections must be shared between the JavaScript, style, images, and other embedded files. This can cause the downloads to be queued up on pages with a lot of stuff on them.

What we need, then, is a small number of reasonably sized files: how do we get to that?

Continue reading

Aspect Oriented Programming in JavaScript

The sources can be downloaded here.

A couple of days ago, some colleagues and I were discussing the ins and outs of JavaScript, and one of the things that came up as we talked was how handy having functions as first class objects really is. Although I’d (ab)used this feature several times in the past, I’d never really thought much about it. It was just one of those things that’s, well, taken for granted in the language. Thinking it over a bit, a niggling thought came to me – that it would be really easy to implement aspect oriented programming in JavaScript.

Ok, But why bother?

Apart from the fact that, if I hadn’t bothered, this post would have been really short, there are a few cases for AOP in JavaScript which look quite interesting to me. One of the most obvious is debugging. By applying aspects to a function, it is possible to see what’s going in and out, without messing about in the function itself. Even if it’s a simple “alert(argument1 != 0);” statement (yes I know it’s not the brightest way to debug something, yes I’m guilty of doing this too at times, and yes, I’m fairly sure everyone who does javascript has done it at some point in their career, so don’t give me that look), you can use an aspect to display the popup instead of messing around with your nice clean function. Since you can lump the insertion of various aspects together, you could also, conceivably, put all the insertions in a separate script file, include it when you’re debugging, and then remove it when you’re done – no more hunting down every last “alert(‘Extremely vulgar message I put in after hours of frustration.’)”.

The standard arguments for using AOP apply – you can maintain separation of concern, add new behaviours, and all that.

The final reason for bothering was, in my case, a very slow and boring evening. Hey, it’s my blog and I don’t need to justify my choice of subjects, k?

Caveats

The sources provided with this post, are not only bad for production use, but they are also fundamentally flawed as we shall discuss in a little while. If you intend to use them as they are, remember that I’m not taking any responsibility for them, am not likely to maintain them, etc etc. If you find a use for them and don’t mind the issues, you’re free to use them, play with them, or otherwise modify them as you see fit.

The idea

As we said above, functions are first class objects in JavaScript. This means that you can play with them more or less as you would with any other object; you can assign them, attach properties (or even other functions) to them, and so on. In fact, they’re pretty much run-of-the-mill objects. with the little extra twist that you can call them, with the usual function_name([arguments]) syntax to execute them.

Since they are so conveniently available, it’s possible to pass them as arguments to another function, which is what we’re doing in the Aspect(target, aspect, implementation) function. In the first argument, target, we state which function we want to apply an aspect to. In the second argument, aspect, we specify the aspect we want to apply to that function – in other words, the behaviour that will be added to the target function. The third argument, implementation, is used to define the sequencing of the call. This is, again, a function, which calls target and aspect in a given order.

The Aspect function can be called through one of three helper functions: AspectBefore, AspectOnSuccess, and AspectOnException. These three define a specific sequencing implementation. AspectBefore, for example, calls the aspect before calling the target.

When we’re applying an aspect, what we’re actually doing is, creating a new proxy function (the behaviour or source of which will be identical to the implementation argument), and attaching two properties to it. Since all javascript objects are associative arrays (think Dictionaries in the .net parlance), adding these properties is as simple as using the square bracket notation and assigning the values – in this case, the aspect, and a copy of the original function. Then, we replace the original function with the proxy.

Note the emphasis on the word copy. When we pass arguments in javascript, in many cases (i.e. anywhere we’re not passing primitive types) they will be passed by reference. If we assigned the reference to the proxy instead of a copy, we’d end up with a self-referencing object which would cause an infinite loop, and all ensuing hilarity.

Arguments, arguments …

Although we are now able to attach additional behaviours to the function, we still can’t do anything useful with them, because we have no way of controlling them. Without the ability to pass arguments to them, aspects would be severely limited.

Luckily, JavaScript creates an array of arguments which is accessible within a function; this array will contain any arguments passed to the function in the current call. This allows us to pass all the arguments to the aspect quite easily, opening up a lot of possibilities: we can log the arguments, take actions based on the arguments, and so on.

Unluckily, this vital item is probably the flakiest part of the entire script. I’m using the apply method, which allows us to invoke a function with an array of arguments. This function appears to be deprecated, which means that it may or may not be around in future. The real problem though, is with the scope. You see, the first parameter of the apply function defines the scope of the call – it tells the function what the “this” keyword will refer to. As it is, the scope is fudged, and may not refer to what you expected in many circumstances. This is the main reason for the great big warning above.

So…

While this was just a simple excercise to pass the time (and is by no means complete), everyone is free to tinker the results. If anyone actually manages to make something useful out of it, do let me know! 😉

The sources can be downloaded here.