top 10 javascript libraries

If you’re taking on a web project, it’s a pretty sure bet that you’re gonna be needing at least one JavaScript library or plugin to get the site functioning the way you want it to – with good reason. JavaScript libraries and plugins can make the world of difference in terms of responsiveness, overall look and feel, and cool unique features that make your website stand out from the rest.

We’ve put together a list of what we think are the top 10 libraries or plugins that you should be checking out to use in your next project. They range from responsive libraries like Foundation, to full base systems like Twitter’s Bootstrap (I know I know, Foundation IS pretty must a full system, but not as “robust” as Bootstrap). We’ll also include some things you’ll need like sliders and tools to make your website really work for you.

Foundation

We love Foundation. We just love it. It’s quickly becoming the standard “go to” when it comes to responsive design, especially with new comers to web design or development.

While Bootstrap may out-do Foundation in features, Foundation makes up for it in the ability to customize your packages and the shear ease of use. It’s hands down one of the easiest libraries to use and doesn’t have a sharp learning curve for newcomers. The stripped down version gives you just what you need to make a website responsive and the freedom to build up your site the way you want.

The second reason we’ve listed Foundation here is because it’s wonderful is taking an existing website and converting it into a responsive one without having to alter much of the design. We’ve been tasked several times with sites that were none responsive, that the site owner didn’t want to change any aspects of the look and feel, just wanted it responsive and “mobile friendly”. It a matter of an hour we can take that site, integrate the Foundation framework, wrap the elements in the responsive containers and boom, responsive website.. it’s that easy!

You can get more info on, and download Foundation at their website – http://foundation.zurb.com/

Bootstrap

If Foundation is for making websites responsive and mobile friendly, Bootstrap is like it’s wiser, older brother. Bootstrap is your all around framework, including HTML, CSS and JavaScript and is packed with tons of features. Some of the components built into Bootstrap are: Buttons, Navigation Bars, Labels, Popups, Breadcrumbs, Thumbnails, Progress Bars… The list keeps going.

Not only is Bootstrap packed with features out of the box, it’s one of the most “plugged in” libraries there are aside from jQuery! There are hundreds of plugins that are built on top of Bootstrap to do visually stunning and complex things on your website. Some plugins we’ve worked with are LightBox for Bootstrap and Gallery for Bootstrap, but the list is expansive on what’s out there. We’ll work on getting a list together and link to it from here so you can have some options to work with if you’re going the Bootstrap route.

Before jumping in, I’ll have to point out that it’s meant for the newcomer. While it is easy to use, if you are just starting out in your design and development path or just run a small website that you’re wanting to get updated, I’d recommend passing on Bootstrap for now and sticking with Foundation. Once you’ve got the skill level to really start playing around it’s an easy switch to migrate from foundation to bootstrap, with very little to no visual affect on your site if done properly.

You can get more information or download Bootstrap on their website – http://getbootstrap.com/

jQuery

I’d almost go as far as to say that the internet wouldn’t run the way you know it if jQuery wasn’t in the picture. Based on data from BuiltWith (great tool by the way, you should check it out) as of 2015 over 70% of all websites are built on top of the jQuery library. That’s huge. Even sites using Bootstrap or Foundation, still at the core run jQuery.

The reason for this is that jQuery provides a wonderful tool that simply makes creating easier. It’s a set of libraries that takes mundane and routine functions that would previously need to be coded out, to be one line codes or small, simple to understand sets of codes.

There are two examples I like to use a lot when explaining why jQuery is so important to utilize and understand.

One would be how someone would fetch an element from the page (DOM) via JavaScript. Without jQuery it would look something like this:

document.getElementById('element-id-here');

With jQuery on the other hand, it gets a lot easier, quicker and simpler:

$('#element-id-here');

Or if you wanted to fetch all elements of a class on the page:

$('.class-name');

When creating codes that requires several references to elements in the DOM in several ways I’m sure you can see how time saving this can be.

The next example will probably illustrate the ‘ease of use’ factor a lot more. Let’s say that you wanted to pull some information from another page or script on your website, but you wanted to do so without reloading the page? This is done via an Ajax and before jQuery came along wasn’t so easy to accomplish. Used to be, you’d have to setup an XMLHttpRequest (XHR) method, and then run that method with the information your either pulling or pushing, and then create functions to manage the results of those request. Here it what some code would have looked like then:

function getDataReturnText(url, callback){
    var XMLHttpRequestObject = false;
    if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
      XMLHttpRequestObject = new
      ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject) {
   XMLHttpRequestObject.open("GET", url);
   XMLHttpRequestObject.onreadystatechange = function()
   {
       if (XMLHttpRequestObject.readyState == 4 &&
           XMLHttpRequestObject.status == 200) {
              callback(XMLHttpRequestObject.responseText);
              delete XMLHttpRequestObject;
              XMLHttpRequestObject = null;
       }
   }
   XMLHttpRequestObject.send(null);
  }
}

Wow, that’s pretty complicated looking stuff. Now, here’s the same thing done with jQuery:

$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $( this ).addClass( "done" );
});

Big Difference! As you can see, jQuery can make what used to be a complicated process and turn it into someone simple enough that a beginner web developer can do with little to moderate effort.

To get more information on jQuery or to download it, visit their site: http://jquery.com/

jQuery UI

Next on our list is a favorite among people that want to extend jQuery rather than overlay it with frameworks like Bootstrap. The “UI” in jQuery UI stands for User Interface. So, simply put the jQuery UI library is an extension of jQuery that handles visual and layout elements. Elements like buttons, accordins, tabs, progress bars, etc. Must like Bootstrap does. One key difference here is that it’s built to work directly with jQuery, so the learning curve is a lot less steep. You also have the ability to customize a lot of the visual aspects of the UI straight from the jQuery UI site before you download the package. You can change look and feel elements and they will generate you a “one off” download that contains your custom look and feel integrated into their library… pretty sweet feature!

You can see what all they offer and download jQuery UI at their website: http://jqueryui.com/

jQuery Mobile

This is the last of the jQuery libraries, I promise! I felt it necessary to include their mobile libraries into this list because of two reasons. One, it’s a good, solid mobile platform. Now, having said that, it’s not the route we would go. We would prefer to work with Bootstrap or Foundation. We also know that the starting point in a lot of developers learning path is jQuery, so having this library available is a big deal for them. If you’ve been studying jQuery for a year and get tasked with creating a website that has buttons and widgets and special functions and needs to be mobile friendly, you’ll probably be more at home using the jQuery mobile library along with the UI and base libraries.

That doesn’t mean you shouldn’t peruse a more inclusive library though! Use what you know and learn what you don’t know. So, while using the jQuery Mobile library, you can always be reading through Bootstrap documentation and trying things out on testing sites or pages. Plus, it’s super fun!

You can check out all the features and download the library at their website: http://jquerymobile.com/

JS Charts

Charting and graphing can be an awesome added value to your website, but a lot of the time it gets passed up. You’ll either see Excel sheets trying to be embedded or PDF pages linked to and this is simply because without a library or plugin to work with, a small number of developers would be able to create charts and graphs from the ground up to utilize on their site. That number goes to 100% of website owners that are not developers and are running personal or small business websites.

Luckily, there’s a library for that! JS Charts takes the hard, visual coding aspect out of setting up online charts and graphs. Once the files are downloaded and setup, it’s as simple as choose your options through it’s documentation, and then adding the data you’re trying to represent. Boom, you’ve got some charts.

There are a wide range of charts / graphs that JS Charts includes like bar graphs, line graphs, plots, pie charts and more. They also have options to have the visuals in 3D and also animated.

Check it out and download the free version (paid if you really like it) at their website: http://www.jscharts.com/

TaffyDB

TaffyDB is a JavaScript based Database Management Tool. Now, in actuality, it’s more like an advanced Array management tool, but we won’t split hairs because it’s a good library and one that can really assist in web base app development.

The main features here is that it allows you to easily manage data from local data stores much like you would an Array, but even more simply. The more and more mobile computing comes to the forefront and the more and more service providers continue to suck at offering decent priced mobile data, you’ll want to utilize local data stores whenever possible, even in desktop based web applications. You never know when someone might be on a MiFi or using a LapTap (What I’ve termed laptops like the Surface) like I am right now, which has a mobile data connection (even though I’m not using it.. I COULD be).

You can read up on TaffyDB and download at their website: http://www.taffydb.com/

Datejs

If you’ve tried to do anything with a date you’ve pulled from a database, or trying to pull the current date, then you know how much of a pain it can be formatting it. Time from a programming standpoint is calculated in milliseconds, but that doesn’t really do much good for the end user. Datejs fixes that by giving you a super easy way to format dates universally, pretty much any way you want them to look.

As an added bonus, it handles date calculations as well. So, you won’t have to write 10 lines of code to figure out how many days it’s been since 4 weeks from last Tuesday. Datajs can do it for you!

Check them out and download the library at their website: http://www.datejs.com/

TweenJS

No, we’re not talking about pre-teens (when did calling them Tweens become a “thing” anyway?). We’re talking about a Tweening JavaScript Library.

If you’ve ever done any animation or worked in Flash you know what Tweening is, but if not, it’s basically just animation spanned over a timelime. It’s making objects go from one point and state, to another point and state at a certain time rate, on a certain curve, in a certain way. In flash it can get pretty detailed, but luckily it’s pretty easy with TweenJS. You just need to enter in some basic information like the x and y values of the start and stop points, the start and stop sizes and you’ll be Tweening away!

Check them out and download the library at their website: http://createjs.com/TweenJS

AngularJS

We’ve added this library simply because we believe that it’s going to be the eventual future of the internet. I know, that’s a big statement.

AngularJS is a platform built by Google to be a final bridge in the desktop to web app – gap. It’s a set of JavaScript libraries that creates an app environment that works in a way that the user would have no idea they were using your application in a web browser.

We recommend that you visit their site, watch all the key notes and play around with their demos, but don’t expect to integrate it into any projects or start any projects with it unless you’ve got the time and and resources to make it happen. Meaning that there is a steep learning curve with AngularJS. Not that it’s a bad thing, it’s just that it’s such a departure from the way things “used” to be, that it’s basically re-wrote the way the web is programmed, so there is a lot of study that needs to be involved before jumping in head first.

Check them out and download the library at their website: https://angularjs.org/

Leave a Reply