January 22, 2021
Hot Topics:

Top 10 JavaScript Libraries, Frameworks and Tools for Web Developers

  • By Jason Gilmore
  • Send Email »
  • More Articles »

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.

Page 1 of 2

This article was originally published on July 18, 2011

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date