The must-know Javascript libraries

WARNING: This article is loaded. Cheers…

There is a lot out there. Don’t reinvent the wheel. Nor the bicycle. Nor, in some not-so-rare cases the spaceship. Chances are, if it is somewhat useful, it’s been done already. Problem is in the knowing. .NET is a good example. We pay for it. We pay for the core libraries, well-written, well-documented. OK, maybe not so well-documented. But plentiful, please agree. In Javascript world, however, everything is all over the place. What is out there? What do you pick? After all, without the right plugins you cannot even begin to write anything complex.

That is why a lot of companies out there charge you immensely for some beautiful Web UI frameworks, constructed nonetheless from mostly free open source Javascript libraries. Keenthemes, for instance. Essentially they are selling you the knowledge that most people, especially high-level executives don’t want to even have. In a way they are paying for their peace of mind. But not any more. Here once and for all I intend to bring an end to the illiteracy of today’s web developers and combine in one article all the best FREE Javascript libraries that exists out there. Don’t reinvent the wheel. Don’t jump the gun and put your money down for an expensive framework. Check this out first.

This article is under constant development. For ANYONE out there please leave a comment if there is a nice library that I am simply not aware of. I’d love to learn more! Amadou, Andre, please add to this article as you see fit.

Absolute basics

The following I will not go over in detail since I assume you are already familiar with them. (If you are not… Are you fucking serious? What are you doing in the Web Industry? Get off this planet! NOW!!! PULL THE CHUTE!!! Go back to McDonalds dude!!!)

  • jQuery – if you dont know what this is, read the italic text above. Everything is built on top of jQuery nowadays, including Bootstrap.
  • Twitter Bootstrap – same comment as above. Although I’ll be more lenient here.
    • CSS component: It has nice CSS. Very nice. Comes with responsive too using span1 .. span12 classes (version 2) or col-md-1 .. col-md-12 classes (version 3). It is clean. It allows nesting.
    • JS component: is an extension of jQuery. With bootstrap you can have cleaner code since the different fancy UI componenets are activated from classes.
    • Plugins: Bootstrap has many plugins, most of which are fancy UI components. Color picker, Date range picker, trees, wizards, and other creatures.
  • jQuery UI – as the name says, it is (again) an extension of jQuery that provides UI elements such as datepickers, accordions, tabs, sliders and other components that have become a standard in today’s Web Industry. In face of Bootstrap, however they are a bit redundant, although this is an interesting page, which shows that they have apparently joined forces. Not sure about that.

Templating

Knowing these libraries is very important if you want to be part of today’s cutting edge Web 3.0 world.

KnockoutJS

MVVM framework that provides data binding for HTML. Have all your data in a JSON object and just bind to it using HTML templates with the data-bind attribute. You can define your own custom functions in KnockoutJS that will transform the element you bind to in a way that you wish. This results in a very clean separation of data and logic (Javascript) and view (HTML). Watch this video if you want to know what KnockoutJS is. Here are some knockout-related articles on Coding Insight.

AngularJS

Similar to knockout, maybe even more powerful. It adds the ability to create your own HTML elements. It also adds some nice AJAX wrappers. In knockout you have to call $.ajax yourself. Here are some angular-related articles on Coding Insight.

Backbone.js

Same shit.

DO NOT MIX THEM

There are a lot of such frameworks. They do get old after a while. The only question remaining is which framework will win in 10 years time?

When picking which one to use pick just one and stick to it for the project. Do not mix them! It’s hard enough to fix all the conflicting javascript libraries during your day job. It’s nearly impossible to imagine what several different template engines will do to the same HTML. My guess is they will continuously overwrite each other.

Core libraries and functions

  • jquery-cookie.js – set and unset browser cookies with $.cookie(…)
  • moment.js – a complete module for date/time/datetime/timespan arithmetic, parsing and formatting.
  • datejs – extension of the existing Javascript Date class with additional functionality such as a more sophisticated toString(format) function. For comparisons between datejs and moment.js please read this.
  • jslinq: do you ever miss the .NET Linq functionality in Javascript? This is it! Wrap your array (or IEnumerable if you like) with JSLINQ(…) and run your favourite Where, OrderBy, Select, etc

Web UI

  • Datatables – a jQuery plugin for rendering table elements more pretty. Adds column sorting and pagination. Makes me feel dumb after spending years doing all this functionality manually.
    • Knockout compatibility: it works with knockout too! But you need an extension, written by Chad Mullins. Check out this article where I hack Chad Mullin’s knockout extension for datatables. And by hack I mean make it better, so please take my version. TY : )
  • Chosen – I needed this so bad at my previous job! It transforms the ugly select and multiple select HTML elements into nice auto-complete fields with deletable tags. It even supports optgroup!
  • Date range picker – this one is a bit over the top, but why not, right? Written by Dan Grossman, requires moment.js (see below). It also allows you to select time as well as the date via the timePicker option.

Rich text editors

  • ckeditor – they claim to be the best. They probably are. This is the most popular rich text editor. It is very sophisticated and comes with a lot of functionality and buttons, if you like. Don’t miss out on a jquery extension of ckeditor as well.
  • wysihtml5 – another WISIWYG editor, or so he claims to be…

Vector graphics and SVG

  • Raphaël – simplifies working with vector graphics on the web. Pie charts, bar graphs, line plots, maps! This will put you eons ahead!
  • jQuery Mapael – world map widget built on top of Raphael. Once again, do not reinvent the wheel!
  • jqvmap (jQuery Vector Maps) – yet another map of the world, Europe, Africa, Asia, Americas, etc.

Exotic UI widgets (FREE!)

  • UniformJS – slick UI. Checkboxes, radio buttons, select drop-dowsn. Nuf said.
  • bootstrap-toggle-buttons – ON/OFF switches in different colors.
  • fullcalendar – big calendar with scrolling, month/week/day views and ability to add event balloons.
  • jquery-knob – neat circular progress bar or indicator or draggable circular user control.
  • jQuery tags input – enter tags or keywords, if you like. Similar to Chosen but with freedom: you can type anything you want, hit ENTER and it turns it into a tag. Attention: it keeps the tags comma-separated in the original input field so comma is a forbidden character. In fact, pressing comma is equivalent to pressing ENTER.
  • gritter for jQuery – notification popup that pops up in the corner of your screen.

SUPER Exotic UI widgets (FREE…?)

  • Isotope – Why? Just ’cause… But there is a license. It’s not too bad. Read this. “If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required.” -metafizzy.co

  1. BuddyFewings says:

    I see your blog needs some unique & fresh content.
    Writing manually is time consuming, but there is solution for this hard task.
    Just search for: Miftolo’s tools rewriter

Leave a Reply

Your email address will not be published.