Javascript framework libraries have become almost omnipresent over the web in recent years, and it’s no real surprise. Used carefully, they can cut the time it takes to develop both basic and advanced Javascript applications, as well as giving the developer tools to do things that would have previously been thought too difficult.
Currently, the most popular libraries seem to be jQuery, prototype, script.aculo.us, MooTools, and Dojo. All of these enable you to develop javascript apps in far quicker times than using DOM methods, although each library also has its own particular way of doing this. We’ve been working with jQuery and MooTools in the last few months, and are also striving to include small jQuery applications into Silva’s Kupu editor*.
But how do they actually cut out development time? One quick example is the way that you can usually select an element in your page. E.g. to select an element with a particular ID in Javascript, and then affect its CSS properties, you’d have to do something like the following:
document.getElementById(‘myDiv’).style.height=”100px”;
… whereas in jQuery, this can be shortened to:
$(“#myDiv”).css(“height”,”100px”);
This may not seem so impressive at first, but the $() function above can also select any element in the page, including all elements using a certain class (which for most current browsers, would require far, far more scripting):
$(“.myClassedElements”).css(“height”,”100px”);
Anyway, if you have a UCL web account on the Apache server, you can easily try these out for yourself. For instance, we’d recommend the ‘Getting started with jQuery‘ tutorial to get an idea of some of the other immense capabilities of jQuery.
One criticism of javascript framework libraries has been the length of time it takes for them to load into a page. It’s fine if you’re working on a large application like an AJAX email system that’ll massively rely on the library to do a multitude of tasks, but if you just want to load a library to help script a form validation facility, the extra library scripts can make page loading time seem excessive. What’s also worse is if you keep on having to load the same library scripts on different sites over and over again (e.g. browsing on the BBC home page which uses jQuery, then to a personal home page which uses the same jQuery scripts, and then to Digg.com, which also uses it. Overall, the browser has had to load the same library scripts three times – a completely unnecessary duplication and waste of bandwidth).
A solution for this has been suggested by Google, and we’d recommend users to try implementing it. When loading a framework into your page, rather than store the scripts on your own site, refer them to Google. If a user goes to a site that uses this Google stored script, their browser will hopefully cache the script. If the user then goes to another site that refers to the Google stored script, they won’t have to download it again, because the script will already be cached in the browser. This will obviously cut out unnecessary duplication, and generally make things faster for browsers.
To load the Google stored libraries, include the following code in your page header:
<script type=”text/javascript”
src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“jquery”, “1.2.3″);
</script>
The ‘google.load()’ function contains two arguments. The first is for the framework, the second for the version. For full details, see Google’s AJAX Libraries API documentation.
While we’re still experimenting with these frameworks, they are ultimately cutting a lot of javascript development time out, as well as taking away some of the (occasionally) frustrating limits of working with the DOM API.
*… And if anyone has good idea for a particular javascript effect or widget they’d like to see available in Kupu, please do contact us with suggestions!
