http://www.developer.com/lang/jscript/top-10-javascript-libraries-frameworks-and-tools-in-open-source.html

Back to article

Top 10 JavaScript Libraries, Frameworks and Tools for Web Developers


July 18, 2011

Despite their names, the Java and JavaScript programming languages share little if anything in common. They have however both experienced rather similar renaissances thanks to the strong open source ecosystems which have grown to surround the languages in recent years. In fact JavaScript's community seems to be in hyperdrive these days, putting a great deal of time and effort into projects which have not only vastly increased the language's capabilities but have also considerably decreased the amount of pain which had previously gone into implementing complicated features.

If you've caught wind of the tremendous excitement surrounding JavaScript and are considering learning more about the language, I'd like to suggest starting your exploration by perusing the 10 projects introduced in this article. While there is of course no substitute for learning core language syntax, gaining an early understanding of what tools, libraries and frameworks are available to JavaScript developers will surely speed you along the path to true proficiency.

1. JavaScript Done Right with jQuery

If any particular project were to claim responsibility for ushering in the JavaScript renaissance, it would be jQuery. A cross-browser JavaScript library that greatly reduces the complexity and code required to perform a wide range of common client-side tasks, such as DOM manipulation and event handling, jQuery's adoption has grown in such a manner that it is now used by 46% of the world's 10,000 most trafficked websites.

jQuery is packed with hundreds of syntactical shortcuts and conveniences which will undoubtedly save you a great deal of time and typing. One of the most basic such shortcuts is the id selector, used to retrieve an element by its ID attribute. Standard JavaScript syntax requires you to use the getElementById() function for such purposes:

title = document.getElementById('title');

jQuery dramatically decreases the amount of code required to perform this task:

title = $('#title');

Although jQuery is surely the most popular of the general purpose JavaScript libraries, it isn't everybody's cup of tea. If you fall into this minority be sure to check out Prototype, MooTools, Dojo, and script.aculo.us.

2. Mobile JavaScript Done Right with jQuery Mobile

Although technically part of the aforementioned jQuery project, I thought it worth bringing special attention to jQuery Mobile as it offers a pretty compelling solution for developers seeking to take part in the mammoth mobile application migration. Although still only available as an alpha release, jQuery Mobile already offers considerable support for a wide array of mobile devices, among them all iOS devices, all Android devices, Blackberry 6, and Windows Phone 7.

Additionally, jQuery Mobile shares all of the same compelling characteristics as its parent project, including the jQuery core codebase, sophisticated event handling capabilities (specific to mobile-based events such as tapping and swiping), and a wide variety of page components such as dialogs, toolbars, and form elements.

One of the most effective ways to familiarize yourself with jQuery Mobile's capabilities is to check out the official demo on a variety of devices.

3. JavaScript-based MVC with Backbone.js

As JavaScript applications continue to grow in sophistication, developers have sought to use the same tools and techniques which have long been available for server-side development. Backbone.js has emerged as one such tool thanks to its ability to apply the model-view-controller (MVC) pattern to JavaScript.

Backbone.js is an appealing solution thanks to the intuitive and natural way in which it applies MVC to the JavaScript language. Models and views are created by extending the Backbone.Model and Backbone.View classes, with everything tied together into an application view. The result is a very readable, maintainable, and testable JavaScript application which closely resembles in structure what you've come to expect when using a server-side framework such as the Zend Framework.

To learn more about Backbone.js, check out the official Backbone.js introduction and additionally my Developer.com tutorial Backbone.js: Apply MVC to Your JavaScript-driven Applications.

4. Server-side JavaScript with Node.js

JavaScript was conceived with the intention of offering developers the ability to execute dynamic code on the client side within a Web browser. Transmitted alongside other page assets such as HTML, CSS, and images, any accompanying JavaScript code is executed within a browser-embedded JavaScript engine. Yet there is nothing particularly special about the language in the sense that it must execute within a browser! A JavaScript execution engine could conceivably reside anywhere, including on a server. With this in mind Ryan Dahl created Node.js (often referred to as simply Node), a JavaScript framework which executes atop the Google V8 JavaScript engine.

Node.js is indeed a JavaScript implementation, however JavaScript's historical association with Web development leads many to believe that Node.js is inextricably intertwined with Web development. Not so! Node.js 's capabilities reach well beyond the Web and into general network-based applications such as those commonly implemented using Twisted. In fact, you can even create a Web server using Node.js , as is demonstrated on the Node.js homepage.

To learn more about Node.js , check out the official Node.js community wiki and additionally my Developer.com tutorial Introducing Node.js: JavaScript for Massively Concurrent Apps.

5. Node.js -based Web Development with Express.js

As I mentioned in the above Node.js introduction, Node.js isn't limited to Web-specific applications, however there's certainly nothing stopping you from using it in this manner. In fact, Express.js was created with exactly this purpose in mind. Built atop Node.js much in the same way Rails is built atop Ruby, Express.js offers many of the same features you'd find in popular Web frameworks, including custom routing, environment-specific configuration, content negotiation, and view helpers.

Additionally, Express.js users can take advantage of the increasingly popular Node.js package manager to quickly expand Express.js' native capabilities through the installation of third-party extensions capable of talking to databases such as MySQL and MongoDB, encouraging unit testing, and sending email.

6. Easy JavaScript Testing with Jasmine

Testing is inarguably a crucial part of the software development process, insomuch that a great deal of effort has been put into incorporating testing directly alongside the coding phase by way of test-driven development (TDD). Jasmine offers JavaScript developers a great way to incorporate TDD, doing so in a fashion which does not place special emphasis on any particular browser, JavaScript library, or operating system. This means Jasmine can be used to test any JavaScript code, including that used within Node.js projects.

To learn more about Jasmine see this introduction, published on the Jasmine GitHub wiki. Additionally be sure to check out the series of example-based tutorials on the wiki.

7. Writing Less Code with Underscore.js

As mentioned earlier in this article, jQuery can be a great timesaver when writing JavaScript code thanks to the large number of shortcuts and syntactical conveniences built into the library. Underscore.js was created with a similar goal in mind, intended to serve as a "utility belt" for doing functional programming in JavaScript. Providing approximately 60 functions capable of slicing and dicing data in countless ways, you'll find native implementations for mapping, reducing, flattening, and sorting JavaScript data.

8. Avoiding JavaScript with CoffeeScript

Despite the increased availability of great JavaScript-based libraries and frameworks, a fair number of developers remain steadfast in their attempts to avoid the language at all costs. One enterprising programmer named Jeremy Ashkenas has even gone so far as to create an entirely new programming language which can be subsequently compiled into JavaScript, allowing developers to avoid writing JavaScript altogether.

While on its surface the idea of learning another language for the express purpose of avoiding JavaScript may sound strange, CoffeeScript has nonetheless gained quite a following, amassing almost 2,300 GitHub project followers and having recently been added to Rails 3.1 (with much ensuing controversy). One reason for such interest is CoffeeScript's concise code; for instance check out the following simple example:

hello = "1 + 1 = #{1 + 1}"
alert(hello)

Once compiled, this CoffeeScript example will be converted into the following JavaScript:

(function() {
  var hello;
  hello = "1 + 1 = " + (1 + 1);
  alert(hello);
}).call(this);

To learn more about CoffeeScript, be sure to check out the official website and additionally my Developer.com tutorial on the topic, CoffeeScript: Create Optimized JavaScript Code Without Touching JavaScript.

9. Yahoo UI Library

The Yahoo UI Library (YUI) is an incredibly powerful JavaScript- and CSS-based solution for building Web applications which in my opinion come closer to resembling their desktop-based brethren than those created by any of the competing JavaScript toolkits. Not convinced? Check out the amazing set of YUI-based examples available via the YUI website. One of my favorite widgets is Dial, which provides users with the ability to finely tune a setting using a familiar knob-like interface.

YUI goes beyond what we've come to expect from a typical JavaScript library, providing a variety of readily available CSS grids which take much of the guesswork and frustration out of creating grid-based layouts. See this example, which demonstrates YUI's grid layout capabilities by recreating the interface similar to that made available to My Yahoo users.

An open source project, the YUI project is managed via GitHub, and has attracted a large community of contributors who have extended YUI in numerous ways. See the YUI 3 Gallery for a comprehensive list of what's available.

10. Easier Debugging with Firebug

Although not exclusively used for JavaScript-specific purposes, the Firebug Firefox extension has long been such an indispensable tool to JavaScript developers that I thought this article would be horribly incomplete without mentioning it. Offering a powerful JavaScript debugger and profiler, DOM explorer, and network monitor, it's possible to closely examine the behavior of your JavaScript code throughout the entire execution lifecycle, even when that behavior involves Ajax-based interaction with the Web server.

To learn more about Firebug, be sure to peruse the official website and additionally check out my Developer.com tutorial Firebug: Add Browser-based Debugging to Your Ajax Development.

Conclusion

While all 10 of the projects covered in this article are certainly prominent, they by no means represent the entirety of what's available to JavaScript developers. Are you using a JavaScript library, utility or other development tool not listed here? Tell us about it in the comments!

About the Author

Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.

Sitemap | Contact Us