My problem with JavaScript libraries

Wed, 08 Apr 09 01:18:04 -0700

I have a problem with JavaScript libraries. My problem is this: I feel that, in a way, they begin to replace actual JavaScript for new web developers. Let's say I teach a person to use jQuery. I teach him to use the various functions, and how to use plugins. Then, I see him working on a project one day and see this code:


<script type="text/javascript">
$(function() {
	$("#hide").hide();
	$("#show").show();
}
</script>

That's right, he's importing 20kb of pure JavaScript awesomeness for... two lines of code that could have just as easily been done using raw JavaScript:


<script type="text/javascript">
	document.getElementById('hide').style.display = 'none';
	document.getElementById('show').style.display = 'block';
</script>

There's a plugin for jQuery that allows for slideshows known as jQuery Cycle. It weighs in at a hefty 28kb when compressed. However, when I see it in the wild, often I see that they only use it for the base fade in/out feature.

There's a version of jQuery Cycle aptly named jQuery Cycle Lite that provides only this function, leaving out the many cool but underused features of the full version. This one weighs in at 3kb compressed.

Recently, my friend, colleague, and fellow writer at our blog Lateral Code, Karthik Viswanathan, wrote a very simple jQuery-based slideshow. It only does a fade in/out effect, but it only takes 300kb uncompressed. Take a look:


<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function animate() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'last' )
		cur = $('.ppt li:first');
	else
		cur = cur.next();
	cur.fadeIn( 1000 );
}

$(function() {
	setInterval( "animate()", 5000 );
} );
</script>

That is it. That's literally everything he needs other than jQuery to get that working. Do web developers need to reconsider their approach to JavaScript? Or is it fine to just continue plodding along teaching our pupils that JavaScript libraries are the best, letting them import 20kb just to hide an element?

Flow of Logic

My problem with JavaScript libraries