<

Javascript Frameworks - what are they?

Published on
17,649 Points
2,949 Views
7 Endorsements
Last Modified:
Awarded
Rob
I'm an enthusiastic Web Solutions Provider that designs and creates a website YOU want for you and your customers
Background
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

I've seen a lot of confusion around what JavaScript frameworks are.  Every web developer has heard of (and probably used) JavaScript but I've seen some baulk at the mention of jQuery, MooTools, bootstrap and other JavaScript frameworks.  Some of the answers I've had are that the frameworks hasn't been authorised by their IT department or do I need to install it or no we only want to use JavaScript.

The confusion has led me to write an article that hopefully clears up exactly what is meant by the term of JavaScript framework.

Overview
A framework is just JavaScript encompassed within a JavaScript class or more commonly referred to as a namespace.  The idea of a framework has come about for two main reasons:

Browser compatibility
Simplicity

If you're familiar with jQuery or MooTools, you'll know about the $ object.  That's the namespace I'm referring to and has all the framework's functions embedded within it.  

To start with, I need to cover a bit about object oriented programming (OOP) as this is the basis of all JavaScript frameworks.
I'm going to create a simple example of OOP in JavaScript.  In other words my very own simple "framework".

(I'm referencing the MDN when compiling these examples: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)

To create a class it is as simple as:

// Create a class
function myClass() {}
// Add a function to the class
myClass.prototype.AddName(name) {
    // assign a class scope variable
    this.name = name;
}
// Instantiate the class
var class1 = new myClass();
// Call a class function, passing a variable
class1.AddName('tagit');

Open in new window


But that's not very interesting.  What is interesting is how JavaScript frameworks build on this principle by creating easy to use functions within the $ namespace. These functions are built on top of the standard JavaScript functions made available by the browser.  So instead of using document.getElmentById('myid'); every time, you just use $('#myid'); (in jQuery).  

Each framework will have their own take on the use of the $ namespace.  MooTools for one uses double $$ for searching using a selector and a single $ for searching for an ID.

Not only can you achieve some actions with one line of code, you'll know it will work on every browser supported by the framework you're using.

The frameworks also attach their functions to DOM elements you specify so that all those cool functions can be used with the DOM element as the reference.  This becomes more evident the more you use it.

Anatomy of a Framework - Example: Creating your own "framework":
The following code is a more complicated example of what's going on when a framework is created.  In the script below:
An anonymous function is created and then executed with the "window" object as it's argument.  Why?  It just provides a way that doesn't muddy the global namespace with one off functions that are then not used again
The function creates the "$" class, instantiates it and attaches it to a global $ object via the window object.
When the page loads via the "window.onload" the $ object is available for use, along with its one function "find" that searches the page for an element with a specific identifier.
(function(window) {
  function $(){};
  $.prototype.find = function(id) {
    return document.getElementById(id);
  };
  window.$ = new $();
})(window);

window.onload = function() {
  // find the tag with id='firstname' and return the inner html of the element
  alert($.find('firstname').innerHTML);
};

Open in new window


Reference HTML here:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id='firstname'>my first name</div>
</body>
</html>

Open in new window


This was just a simple example but it gets even better when the find function can take an argument that could be a tag, class, id or other type of selector.  Regular expressions are commonly used to determine the type of selector that determines how the function call is processed.

As you can see at this point that nothing but JavaScript has been used.  When you use a framework, you include it like you would any other script file:

<script src="http://www.mydomain.com/path/to/javascript_framework.js"></script>

Open in new window


When to use a framework?
Using a framework may not be for you.  For jQuery alone, it will add around 90Kb to each and every page you use it on (though browser caching should help with this, download it once and reuse it).
It will be about weighing up how much JavaScript you'll end up using in your site.  If it's the little bit here and there, I believe you're still going to find it easier to use a framework.  

When you see in jQuery 1.10.2, there are 10+ lines of code for just searching for an element by its ID and another 10+ for searching by class it can seem like overkill.  However it has been optimised to be as efficient as possible (more so when minified), while at the same time giving you a very easy way of referencing the DOM elements in your page i.e. $('[my selector]');.  

If you like using any of the jQuery UI visual effects then you'll have no choice but to include jQuery and these functions.  

Finally
It's important to remember that the most commonly used frameworks are being constantly worked and reworked for efficiency and cross browser compatibility.  Not something my previous code ever got...

Given the minimal overhead there really isn't any reason to use pure JavaScript any more.  However, that does lead me to one more point; you should have a good understanding of pure JavaScript and the DOM before using a framework such as jQuery.  The same principles apply when modifying or referencing the DOM and having a good understanding of what is actually going on under the hood will help you when the time comes to work out why something isn't working the way you'd like it to.

Using a framework will save you time in the long run.  The authors of the framework take care of the hard stuff by making sure the framework is compatible with all the major browsers.  If it's simplicity you're after then a framework is for you.
7
Author:Rob
Ask questions about what you read
If you have a question about something within an article, you can receive help directly from the article author. Experts Exchange article authors are available to answer questions and further the discussion.
Get 7 days free