Javascript Frameworks - what are they?

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.

Comments (5)

darrell_rials

Commented: 2014-04-07

Rob, the dual use - or apparent dual use - of the 'window' object in the example is a bit confusing to me, as is your related comment about "... provides a way that doesn't muddy the global namespace with one off functions that are then not used again." Could you explain how you'd create the $ class attached to some other, DOM-related or non-DOM-related, object?

Rob

Owner (Aidellio)

CERTIFIED EXPERT

Most Valuable Expert 2015

Author

Hi Darrell,

Thanks for your comment. It's a good question so I'll do my best to answer it.

I think what you're asking is how to use namespaces as I've attached the $ variable to the global namespace (window).

I have written another article that touches on namespaces and anonymous functions:
http:A_13138-Javascript-is-just-an-Object.html

"... provides a way that doesn't muddy the global namespace with one off functions that are then not used again."

- this is just referring to running an anonymous function to attach the $ variable. As for what it attaches to, you would only attach it to a custom namespace rather then a DOM Object as the idea is that a framework operates on the DOM.

so to attach to your own namespace:

var ns = {};  // create an empty object to encapsulate the namespace

// I've modified the argument name so not to confuse things
(function(w) {
  function $(){};
  $.prototype.find = function(id) {
    return document.getElementById(id);
  };
  w.$ = new $(); // attaches the $ variable to the namespace
})(ns);  // pass the namespace (javascript passes by reference by default)

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

working demo: http://jsbin.com/punup/1/edit

Excellent, Rob. Thanks for the clarifications. Makes perfect sense now.

While I agree with you that client-side frameworks running in a web browser almost certainly should operate on the DOM (and thus can attach to a top-level DOM object), frameworks running in other contexts probably have to do something like your example.

Yes, I guess they've got that flexibility to operate on any XML node based document. I haven't done much of that but would you mind for my own learning what you mean by "other contexts". Sounds like you've used a framework outside the browser?

Commented: 2014-04-08

Well Rob, there really aren't that many true JS 'frameworks' used outside of a web browser context, yet. I was thinking of something like a web application framework running on, say, the the NodeJS platform -- something like Express (http://expressjs.com/), for example. There, according to the documentation, you use the Express framework thusly:

var express = require('express');
var app = express();

Then, all calls to Express APIs are via the "app.VERB()" syntax.

I could easily see additional JS frameworks like this coming to a server-side or an OSGi-container-like platform; things like middleware frameworks, media streaming frameworks, et al.