<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Javascript Frameworks - what are they?

Published on
17,456 Points
2,756 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
Comment
Author:Rob
  • 3
  • 2
5 Comments

Expert Comment

by:darrell_rials
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?
0
LVL 43

Author Comment

by:Rob
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);
};

Open in new window


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

Expert Comment

by:darrell_rials
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.
0
LVL 43

Author Comment

by:Rob
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?
0

Expert Comment

by:darrell_rials
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();

Open in new window

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.
0

Featured Post

Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Join & Write a Comment

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month