When should I use a javascript framework library?

Question

I'm writing a small web that just makes some animation and shows some information as a homepage and a list of links. All that is going to be generated dynamically in the client side. So everything is going to be javascript and XML.

Recently I've been reading some questions in SO about javascript, and most of the situations involved the use and/or recommendation of a framework (jquery and friends). When a small web development should start considering the use of such a framework?

I've been until now doing my stuff just with plain javascript, as far as I'm not implementing a big site is it worth the learning a framework?

Thanks

Answer 1

On SO you will find a lot of people (including me) who advocate the use of jQuery (in particular). To me, it's everything a framework should be: small, lightweight, extensible, compact yet powerful and brief syntax and it solves some pretty major problems. I would honestly have a hard time trying to envision a project where I wouldn't use it (or another framework).

The reason to use it is to solve browser compatibility issues. Consider my answer to javascript to get paragraph of selected text in web page:

function getSelectedParagraphText() {
  var userSelection;
  if (window.getSelection) {
      selection = window.getSelection();
  } else if (document.selection) {
      selection = document.selection.createRange();
  }
  var parent = selection.anchorNode;
  while (parent != null && parent.localName != "P") {
    parent = parent.parentNode;
  }
  if (parent == null) {
    return "";
  } else {
    return parent.innerText || parent.textContent;
  }
}

If you're familiar with Javascript a lot of this should be familiar to you: things like the check for innerText or textContent (Firefox 1.5) and so on. Pure Javascript is littered with things like this. Now consider the jQuery solution:

function getSelectedParagraphText() {
  var userSelection;
  if (window.getSelection) {
      selection = window.getSelection();
  } else if (document.selection) {
      selection = document.selection.createRange();
  }
  var parent = selection.anchorNode;
  var paras = $(parent).parents("p")
  return paras.length == 0 ? "" : paras.text();
}

Where jQuery really shines though is with AJAX. There JavaScript code snippets around to find the correct object to instantiate (XMLHttpRequest or equivalent) to do an AJAX request. jQuery takes care of all that for you.

All of this for under 20k for the core jQuery Javascript file. To me, it's a must-have.