What is a JavaScript Library

JavaScript Libraries were born as demands for JavaScript rose to create more interactive and dynamic websites. Some developers wanted more movement and animation in their applications to enhance the user experience, and others wanted a library focused around quicker and easier XMLHttpRequests (coined AJAX) to make their applications faster and more responsive.

A JavaScript Library is a library of pre-written JavaScript code, such as functions and classes, which allow for more efficient development of JavaScript-based applications.

Some of the first libraries to emerge to meet these needs were Prototype, developed by Sam Stephenson, and Scriptaculous by Thomas Fuchs. In later years, JavaScript libraries such as jQuery, MooTools, and MochiKit and JavaScript widget libraries such as Ext JS and Dojo Toolkit have emerged, each meeting a specific developer need and specializing in meeting that need in a unique way.

Following this trend, major companies have developed their own libraries to meet their specific needs. Some of the more popular ones are the Google Web Toolkit (GWT), Yahoo User Interface Library (YUI), and ASP.NET AJAX.

What are JavaScript Libraries for

JavaScript Libraries allow for easier development between JavaScript and other languages, such as CSS, PHP, Python and Java. This allows not only for a developer to read and write code in a style that they are more familiar with, but it also helps in developing seamless applications across different languages and environments.

JavaScript Libraries in Front-End Web Development

While there may be arguments for different libraries and different advantages and disadvantages of each, I’m am going to focus on these libraries from MY perspective which is in Front-end development across many platforms, applications and programs, and my views are bias to my experience in those settings. If you have an opinion or contribution of your own feel free to add them in the comments in a constructive and informative manner please!

jQuery

My absolute favorite library is jQuery. JQuery is a very lightweight and modular JavaScript Framework that weighs in at only 15k for the compressed core. Some of the great features of jquery for front-end web developers are its ease of use and learning. The library targets the Document Object Model (DOM) in the same way that CSS does, using selectors such as ID’s and classes as well as the standard nodes (element, text, and attribute). I also like that the framework is modular, which means you can get down and dirty with the core with little bandwidth eaten up, but extend it as far as needed with plug-ins.

YUI

YUI is another really lightweight library that separates its modules so that you can simply use the utilities needed without bloated code. While there are probably better candidates for this second slot as far as extensibility and compression (many would probably argue that MooTools belongs here), what I particularly like about Yahoo’s library is their documentation for it. When you get deep into code and complex structures, you test the limits of your framework. When your code breaks the framework (and it WILL at some point), it’s good to be able to reference well documented and explained code that way you can identify the problem and work towards a solution. That’s my reason for replacing MooTools with YUI in my faves.

Prototype & Scriptaculous

I used to love these frameworks, but as jQuery has grown and become more efficient, I’ve moved away from the bloated code that was once a part of my utility belt. I would like to hear anyone’s feedback that still primarily uses these libraries and see if there are any advantages that these veterans have over the new ones.

Here’s the JQ

$(document).ready(function(){
	$("li.child:visible").hide();
	$("li.parent").click(function(){
		if ($(this).children().hasClass("selected")) {
			$(this).children().removeClass('selected');
			$(this).next().toggle("slow");
			return false;
		}
		else {
			$(this).children().addClass('selected');
			$(this).next().load($(this).children().attr("href")).toggle("medium");
			return false;
		}
 
	});
});

Here’s the PHP

if ($handle = opendir('./'))
{
	while (false !== ($file = readdir ($handle)))
	{
		if ( preg_match("/^\_/", $file) )
		{
			$filename = preg_replace('/\_/', ' ', $file);
			echo "
	<li class="\&quot;parent\&quot;"><a href="\">" . $filename ."</a></li>
\n
	<li class="\&quot;child\&quot;"></li>
";
		}
	}
	closedir($handle);
}