Will you need a JavaScript framework on your next project?

• Posted by Brian
• Posted on August 18th, 2008
• View Comments

One of the pitfalls of using a JavaScript framework, especially among beginners, is the ability to quickly lose sight of what is specific to the framework, and what is specific to the core JavaScript language. However, as bandwidth constraints continue to dissolve, and browser compatibility issues erode, it makes sense to consider a framework on each project. Whether or not you actually use a framework after these considerations are made, is totally up to you.

Event Binding

A simple, cross-browser event model is easy to achieve with a few lines of code, and without a framework. However, if you find that you need to bind events to elements based upon class name or attributes, then you will need events and advanced DOM selectors. Extensions to some libraries even provide persistent event listeners that reattach events after an element has been removed and then inserted back into the DOM.

Another consideration is whether or not you will need an event queue, which is beneficial to have if you only want events to be bound when certain conditions occur, and only after a specified interval of time has passed. This type of functionality is often built on top of a framework’s core functionality with plugins. So, if you are unable to find it within the core, check for an extension that provides this complicated functionality.

Further reading:

• Quirksmode Event Properties
• Dean Edwards: addEvent()
• John Resig Flexible JavaScript Events
• Equalizing JavaScript Event References across IE and EOMB (Every Other Modern Browser)

DOM Selectors

Depending upon the level of complexity you need in order to find elements within the DOM, you might not need a framework. It is often assumed that if you need anything beyond getElementById, or getElementsByTagName, then it is best just to source a framework. However, even a custom getElementsByClassName, and a few custom CSS selectors will not run you more than a few dozen lines of code.

If you find that you want to incorporate many of the CSS3 selectors, as well as XPath selectors for the retrieval of XML nodes as well, then it is probably best to use a framework. Doing much more than just getting information can be difficult as well, and if inserting nodes back into the DOM with preciseness is a necessity, then a framework is a good idea.

Further reading:

• Roll out your own JavaScript Interfaces
• Introduction to using XPath in JavaScript
• Beginning JavaScript with DOM Scripting and Ajax (Book Code Snippets)
• Selectors in JavaScript

Ajax

This is the one aspect of JavaScript that leads programmers directly to a framework, regardless of the complexity of the asynchronous requests. However, what appears to be extremely complicated functionality, again, can be accomplished cross-browser without too much effort. Instead, it becomes more difficult when you want to traverse the nodes of a text response as JSON, or queue up several requests much like you would events (as described earlier).

I think it should be said though, that this is also the one aspect of JavaScript that should be explored first without the use of a framework. Too many developers have invested little time into understanding the foundational aspects of the Web like the Hyper Text Transfer Protocol (HTTP), and exploring Ajax in depth will help to familiarize them with these concepts.

Further reading:

• What I Didn’t Know About XHR
• W3Schools.com Ajax Tutorial
• Mozilla Developer Center AJAX
• XHR Concepts: A Comprehensive Guide

Effects

I believe that effects are the one aspect of any application, when required at any level of frequency, merit the use of a JavaScript framework. When it comes to drag-and-drop, sliders, and animation, the number of cross-browser inconsistencies can seem insurmountable. Relying on a trusted framework that has taken all of these into account can save a tremendous amount of time and frustration. However, just because the effects are available, does not mean they should be utilized.

Effects also tend to be the one area where frameworks differ significantly. If you need a number of special effects, then it is best to take the time to review each framework in depth. Wipes or fades are a dime-a-dozen, but when you need to animate along points in a curve, or queue up several animations, then your choice of framework is crucial.

Further reading:

• Highslide JS
• How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS
• Javascript Tutorial - Simple Fade Animation
• WebReference.com: How to Drag and Drop in JavaScript

Further Reading

For more on JavaScript frameworks and modern day JavaScript techniques, the following two posts can be helpful:

• How to choose a JavaScript framework
• Mastering JavaScript — concept and resource guide

Tags: framework, JavaScript, javascript library