Making a great site requires a lot of skills, but you don't always have to develop everything completely from scratch. To use any of the JavaScript libraries presented in this article, you will need to have at least some existing JavaScript skills, but you also don't necessarily need to be an expert.
What you do need to be expert with is working out how to blend the libraries into a site to get the most benefit from them. This isn't really something that can be taught. It's a skill you can only learn by doing. Once you have mastered the concepts, however, there is no limit to your creativity and what you can achieve with it.
Collected here is our list of the most useful JavaScript libraries available to programmers for site enhancement. You may not see your favorite listed here, but that doesn't mean it's not recommended. In fact any JavaScript library that helps you achieve something worthwhile can't be dismissed. But with literally millions of libraries to choose from, we have to draw the line somewhere.
1. jQuery
It's best to start out with the obvious. You're almost certainly already using this library in some way, even if you don't already know it. Essentially, jQuery lets you do dynamic things to static web pages more easily than other methods, and doesn't require server-side programming to achieve the results. This also means that updates can happen more quickly than with server-side alternatives. Many other libraries include jQuery as a dependency, so you'll probably need to incorporate it into your pages even if you don't directly access its features.
2. Prototype
This, in a way, could be considered a competitor to jQuery. It's not necessarily inferior, but it is much less widely adopted. Using prototype and jQuery together can lead to conflicts, unless you take special steps to deal with this problem. This is why you need to know the dependencies within the other JavaScript libraries you use.
3. Modernizr
This library helps to overcome problems with page rendering on older browsers that don't fully support HTML5. While such browsers are becoming more rarely encountered, they are still part of the landscape and having Modernizr can help you deal with the problem in an efficient way.
4. Bootstrap
In just six short years, Bootstrap has achieved enormous proliferation throughout the world of web development. It is solely concerned with UI layout and component integration, but it does this very well. You will need to modify the default settings for just about everything, however, because they're based on Twitter's color scheme, which isn't the most user-friendly of user interfaces.
5. PDF.js
You may know that the PDF format is subject to certain vulnerabilities. To get around this problem, PDF.js was created to render PDF content into the HTML5 Canvas. Obviously this also means it only works in a browser that supports HTML5 and Canvas.
6. JS Charts
An excellent library that provides a simple yet powerful graph generator, so you can create all kinds of professional looking charts for your site without investing too much time and effort. The free version is equally powerful compared to the paid version, but includes a watermark. Purchasing a license removes this watermark.
7. Chart.js
This is a really good, completely free, unwatermarked alternative to JS Charts. It is easy to use, well-documented, and can be customized in endless ways. Using it requires a little more JavaScript skill than JS Charts.
8. D3.js
This is a bigger brother to the previous two examples, which are intended for lightweight use. If you're crunching data in the big leagues, however, D3 offers you the advanced features that can take your online presentation to the next level. Any kind of data can be visualized and expressed in a staggering number of ways. Just check the examples on the D3 website to see what you've been missing out on.
9. bHive
A great graphics framework that is as revolutionary to the HTML5 Canvas as Raphaël was to HTML4. bHive allows you to quickly create SVG graphics, animations, and even to incorporate interactivity which could be used in numerous different ways, such as simple games and education applications.
10. Owl Carousel
While over-use of carousels is not to be encouraged, for those times when you really do need to use one, Owl is one of the most highly recommended carousel plug-ins ever created for jQuery. It's compatible with both touch screens and pointing devices. It supports swipe and drag-n-drop. It is fully customizable and is responsive by default.
11. Date.js
Sometimes you need to be able to express date information in different ways to give a site context. The features of Date.js allow you to do just this very thing, using a very straight-forward syntax that couldn't be easier to learn.
13. Moment.js
Another date formatting and processing library. It's a little more complex than Date.js but allows you to do certain specific calculations easily (isAfter, isBefore, isSameOrAfter, isSameOrBefore, isBetween, isLeapYear, isDate, and so on). When you don't need all the overhead that comes with these extra features, use Date.js instead.
13. dateDropper
When you need to display a calendar / datepicker control on your site, dateDropper is the most elegant and simple solution we've ever seen (and we've seen a lot). It's also more compatible with mobile interfaces than many of the other solutions out there.
13. Numeral.js
Does for numbers what Date.js does for dates.
14. wForms
A simple but useful library maintained by on the Google Code archive, wForms makes easy work of common tasks related to user input forms. These include input validation, tool tips, and other useful features.
15. sortTable
Sortable tables have been around for almost as long as tables have (data tables, anyway). But with this hand JavaScript library, you can make any table sortable easily just by adding a class to the table when you create it, which is as simple as: <table class=”sortable”>
header image courtesy of Rogie
Comments 0 Responses