Frameworks, sometimes known as prototyping systems, are perhaps best described as “shortcuts” installed as an upper-level library over a base language. They allow you to achieve popular, complex operations in brief snippets of code that would otherwise take a great deal of work to specify in the original language.

There are many different frameworks, for many different languages. Some examples of web development frameworks include:

CMS’s could also be considered a form of framework.

There are several important points to note:

• Frameworks are typically installed as a library, which can increase page size, although there are techniques to get around this issue.
• Frameworks do not completely excuse you from learning the base language, as you are still using the original language in the framework… you’re just using less of it, meaning you don’t have to learn to the same depth.
• Frameworks are not a “magic pill”: they are not a solution for every possible goal on a web page. Frameworks can be overused: loading a 60k library in order to accomplish a single effect that could be written in 480 bytes in the base-level language is not unusual nor efficient, but it is a giant waste of resources.
• Frameworks do not allow you to accomplish anything that is not possible in the original language: they just allow you to reach your goal quicker and easier, in most cases. A good example would be fading out an image over time.

In jQuery:

$('#object').fadeOut('slow', function() { });

In traditional JavaScript:

varTimeToFade=1000.0;
functionfade(eid) {
	varelement=document.getElementById(eid);
	if (element == null)
	return;
	if (element.FadeState == null) { 
		if (element.style.opacity==null || element.style.opacity=='' || element.style.opacity=='1') { 
			element.FadeState=2;
		} else {
			element.FadeState=-2;}}
			if (element.FadeState == 1 || element.FadeState == -1) {
				element.FadeState = element.FadeState == 1?-1:1;
				element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
				} else {
				element.FadeState = element.FadeState == 2?-1:1;
				element.FadeTimeLeft = TimeToFade;
				setTimeout("animateFade("+newDate().getTime()+",'"+eid+"')",33);
			}} 
		function animateFade(lastTick,eid) {
			var curTick = newDate().getTime(),
			elapsedTicks = curTick - lastTick,
			element = document.getElementById(eid);
			if (element.FadeTimeLeft <= elapsedTicks) {
				element.style.opacity = element.FadeState == 1?'1':'0';
				element.style.filter = 'alpha(opacity = '+ (element.FadeState == 1?'100':'0')+')';
				element.FadeState = element.FadeState == 1?2:-2;
				return; }
				element.FadeTimeLeft -= elapsedTicks;
				var newOpVal = element.FadeTimeLeft / TimeToFade;
				if (element.FadeState == 1)
					newOpVal = 1 - newOpVal;
					element.style.opacity = newOpVal;
					element.style.filter = 'alpha(opacity = '+(newOpVal*100)+')';
					setTimeout("animateFade("+curTick+",'"+eid+"')",33);
}

If the original “root” language continues to grow, it will likely adopt or translate many of the original innovations of a framework, causing the framework itself to eventually become redundant. A confluence of technologies – the slow death of IE8, the CSS Animation API, JavaScript Query Selector and ECMAScript 6 (the standard on which current JavaScript is based) – is doing that JQuery over time. A modern approach to the same effect is a CSS transition:

#eid { transition: 1s; }
#eid:hover { opacity: 0; }

Photograph by Alan Bloom, used under a Creative Commons license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.