Best of the JavaScript Libraries and Frameworks

Article Last Updated: 6^th Apr 2009
Posted by Ruhani Rabin in Resources | Comments | |

Here is the roundup of popular javascript libraries and frameworks. Feel free to comment, suggest and share your thoughts.

Prototype

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere. Get it Here. 

ExtJS

The driving force behind Ext JS is Jack Slocum, who is a respected JavaScript developer. The Ext JS project sprouted from a desire to extend functionality offered by the Yahoo! User Interface (YUI) Library.

A key aspect of the YUI Library is the cross-browser support, which you’ll also find in Ext JS. This allows you to build Web applications without worrying about the target browser.

Ext JS boasts excellent performance. The framework is fully object-oriented and extensible. Along with its excellent presentation, Ext JS’ features are ready to use once you download and install it.

Features
Ext JS includes various controls such as a message box, combo box, data grid and toolbars. In addition, layout managers allow you to specify how elements are presented on a page. More features are available for working with forms and windows. Adobe has introduced a new platform, AIR, for deploying HTML/JavaScript applications to the desktop. One of their feature applications is Fresh, an RSS feed reader built with Ext.

Mike Chambers, Senior Product Manager at Adobe says: “Basically, if you want to build Apollo applications using HTML / JavaScript, then this is the library you should start with. Not only does it provide lower level JavaScript functionality, it also provides a complete UI component toolkit, and effect library.”.

Downloads and Samples

jQuery

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

“You start with 10 lines of jQuery that would have been 20 lines of tedious DOM JavaScript. By the time you are done it’s down to two or three lines and it couldn’t get any shorter unless it read your mind.” – Dave Methvin

Download and Plug-ins.

MooTools and Moo.Fx

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

MooTools code respects strict standards and doesn’t throw any warnings. It’s well commented and has meaningful variable names: a joy to browse and a snap to understand.

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.

It’s very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won’t let a user break the effect with multiple, crazy clicks. Optimized to make you write the lesser code possible, the new moo.fx is so modular you can create any kind of effect with it.

Download MooTools Framework, See the Demos. Get Moo.FX

Yahoo! User Interface Library

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

Features

Two different types of components are available: Utilities and controls. The YUI utilities simplify in-browser devolvement that relies on cross-browser DOM scripting, as do all web applications with DHTML and AJAX characteristics. The YUI Library Controls provide highly interactive visual design elements for your web pages. These elements are created and managed entirely on the client side and never require a page refresh.

utilities available:

• Animation: Create “cinematic effects” on your pages by animating the position, size, opacity or other characteristics of page elements. These effects can be used to reinforce the user’s understanding of changes happening on the page.
• Browser History Manager: Developers of rich internet applications want bookmarks to target not just pages but page states and they want the browser’s back button to operate meaningfully within their application’s screens. Browser History Manager provides bookmarking and back button control in rich internet applications.
• Connection Manager: This utility library helps manage XMLHttpRequest (commonly referred to as AJAX) transactions in a cross-browser fashion, including integrated support for form posts, error handling and callbacks. Connection Manager also supports file uploading.
• DataSource Utility: DataSource provides an interface for retrieving data from arrays, XHR services, and custom functions with integrated caching and Connection Manager support.
• Dom Collection:The DOM Utility is an umbrella object comprising a variety of convenience methods for common DOM-scripting tasks, including element positioning and CSS style management.
• Drag & Drop: Create draggable objects that can be picked up and dropped elsewhere on the page. You write code for the “interesting moments” that are triggered at each stage of the interaction (such as when a dragged object crosses over a target); the utility handles all the housekeeping and keeps things working smoothly in all supported browsers.

Controls available:

• AutoComplete: The AutoComplete Control allows you to streamline user interactions involving text-entry; the control provides suggestion lists and type-ahead functionality based on a variety of data-source formats and supports server-side data-sources via XMLHttpRequest.
• Button Control: The Button Control provides checkbox, radio button, submit and menu-button UI elements that are more impactful visually and more powerful programmatically than the browser’s built-in form widgets.
• Calendar: The Calendar Control is a graphical, dynamic control used for date selection.
• Container: The Container family of controls supports a variety of DHTML windowing patterns including Tooltip, Panel, Dialog and SimpleDialog. The Module and Overlay controls provide a platform for implementing additional, customized DHTML windowing patterns.
• DataTable Control: DataTable leverages the semantic markup of the HTML table and enhances it with sorting, column-resizing, inline editing of data fields, and more.
• Logger: The YUI Logger provides a quick and easy way to write log messages to an on-screen console, the FireBug extension for Firefox, or the Safari JavaScript console. Debug builds of YUI Library components are integrated with Logger to output messages for debugging implementations.
• Menu: Application-style fly-out menus require just a few lines of code with the Menu Control. Menus can be generated entirely in JavaScript or can be layered on top of semantic unordered lists.

Download and more information: here

Mochikit

MochiKit is a highly documented and well tested, suite of JavaScript libraries that will help you get shit done, fast. We took all the good ideas we could find from our Python, Objective-C, etc. experience and adapted it to the crazy world of JavaScript.

Reliable

MochiKit has HUNDREDS of tests. We build real applications with this thing. So even though development can move fast, we make sure to get tests written. This also makes platform compatibility issues much easier to detect and resolve than the “guess and check” style of quality assurance seen in some of the other libraries out there. It’s not broken.

Documented

You’re unlikely to find any JavaScript code with better documentation than MochiKit. We make a point to maintain 100% documentation coverage for all of MochiKit at all times. You don’t have to fumble around reading our source code or leafing through examples to find out how something works.

Evolutionary

MochiKit can adapt to anything you throw at it. It makes no assumptions about how your code needs to act, and it has hooks (by way of the the adapter registries) that makes sure that you can define your own comparisons, programmer representations, iterators, or DOM node coercion for any object in any way you wish. We’ll gladly serve you all the Kool-Aid you want, but we’re not going to make you drink any.

Download and here are the Demos.

QooxDoo

qooxdoo is a comprehensive and innovative Ajax application framework. Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications. No HTML, CSS nor DOM knowledge is needed.

It includes a platform-independent development tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer.

Features

• Client detection: qooxdoo knows what browser is being used and makes this information available to you.
• Browser abstraction: qooxdoo includes a browser abstraction layer which tries to abstract all browser specifics to one common “standard”. This simplifies the real coding of countless objects by allowing you to focus on what you want and not “how to want it”. The browser abstraction layer comes with some basic functions often needed when creating real GUIs. For example, runtime styles or positions (in multiple relations: page, client and screen) of each element in your document.
• Advanced property implementation: qooxdoo supports “real” properties for objects. This means any class can define properties which the created instances should have. The addProperty handler also adds getter and setter functions. The only thing one needs to add – should you need it – is a modifier function.
• Event Management: qooxdoo comes with its own event interface. This includes event registration and deregistration functions.

  Furthermore there is the possibility to call the target function in any object context. (The default is the object which defines the event listener.) The event system normalizes differences between the browsers, includes support for mousewheel, doubleclick and other fancy stuff. qooxdoo also comes with an advanced capture feature which allows you to capture all events when a user drags something around for example.

Downloads and more information here. Have a look at the Demos too.

Dojo Toolkit

Dojo allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript sanely. You can use the components that Dojo provides to make your web sites more usable, responsive, and functional. With Dojo you can build degradable user interfaces more easily, prototype interactive widgets quickly, and animate transitions. You can use the lower-level APIs and compatibility layers from Dojo to write portable JavaScript and simplify complex scripts. Dojo’s event system, I/O APIs, and generic language enhancement form the basis of a powerful programming environment. You can use the Dojo build tools to write command-line unit-tests for your JavaScript code. The Dojo build process helps you optimize your JavaScript for deployment by grouping sets of files together and reuse those groups through “profiles”.

Features

• Multiple Points Of Entry: A fundamental concept in the design of Dojo is “multiple points of entry”. This term means that Dojo should work very hard to make sure that users should be able to start using Dojo at the level they are most comfortable with.
• Interpreter Independence: Dojo tries very hard to ensure that it’s possible to support at least the very core of the system on as many JavaScript enabled platforms as possible. This will allow Dojo to serve as a “standard library” for JavaScript programmers as they move between client-side, server-side, and desktop programming environments.
• Unifies several codebases: builds on several contributed code bases (nWidgets, Burstlib, and f(m)).

Download and more information here. See it in Action.

Rico – Javascript for Rich Internet Applications

• Components – Rico 2.0 extends the component set from the previous versions. The LiveGrid has been expanded to include filtering, column resizing, and many more features. The core of Rico 2.0 has been designed to enable custom components to be more easily built.
• Animation Effects – Rico 2.0 provides responsive animation for smooth effects and transitions that that can communicate change in richer ways than traditional web applications have explored before. Unlike most effects, Rico 2.0 animation can be interrupted, paused, resumed, or have other effects applied to it to enable responsive interaction that the user does not have to wait on.
• Behaviors – Take some raw HTML and sprinkle in some behaviors and what do you get? Well in Rico you can easily build an Accordion component like those found in Macromedia Flex and Laszlo.
• Styling – Rico provides several cinematic effects as well as some simple visual style effects in a very simple interface.
• Drag And Drop – Desktop applications have long used drag and drop in their interfaces to simplify user interaction. Rico provides one of the simplest interfaces for enabling your web application to support drag and drop. Just register any HTML element or JavaScript object as a draggable and any other HTML element or JavaScript object as a drop zone and Rico handles the rest.
• AJAX Support – Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request.

Get Rico

Some Comprehensive Demos

• PHP5 Frameworks including PHP-AJAX Link Roll
• Elegant Useful and Free PHP Graph/Chart Libraries
• Google Chrome – Possibilities, Developers Point of View & The Bare Truth
• Top 10 Most useful Web Developers tools for Firefox
• 10 Useful free CSS tools and services
• Best Windows Freeware – Programming
• PHP 5 Object Oriented Structure

About Ruhani Rabin

Ruhani Rabin is the original owner and author of this blog. He also reviews web 2.0 startups at Tech2all.com. Largely interested in web 2.0 apps & Social Media. Currently the Vice President of MOL Access Portal (MOL is owner of Friendster.com). Also he is Web 2.0 & Social Media Researcher and a Total fun Geek!.. There you have it ;)

Twitter Profile: http://twitter.com/ruhanirabin