Top 5 javascript frameworks�

» Top 5 javascript frameworks� - Jaslabs: High performance php

By Justin Silverton

5) 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

4) 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.

Features

• Easily deploy ajax applications: Besides simple requests, this module also deals in a smart way with JavaScript code returned from a server and provides helper classes for polling.
• DOM extending: adds many convenience methods to elements returned by the $() function: for instance, you can write $('comments').addClassName('active').show() to get the element with the ID 'comments', add a class name to it and show it (if it was previously hidden).
• Utilizes JSON (JavaScript Object Notation): JSON is a light-weight and fast alternative to XML in Ajax requests

Download and more information here

3) Rico

Designed for building rich Internet applications.

Features

• Animation Effects: 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
• 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.

Download and more information here

2) Qooxdoo

qooxdoo is one of the most comprehensive and innovative Open Source multipurpose AJAX frameworks, dual-licensed under LGPL/EPL. It includes support for professional JavaScript development, a state-of-the-art GUI toolkit and high-level client-server communication.

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.

Download and more information here

1) Dojo

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

14 Comments so far

1. Dougal Matthews April 24th, 2007 10:58 am

   Have you not tried ExJS? http://extjs.com/

   Oh and I'd personally put Yahoo UI higher, 1st or 2nd.

   Also, unless you are ignoring non open source stuff… what about Microsoft's AJAX (Atlas)?

2. Nate Cavanaugh April 24th, 2007 11:20 am

   No jQuery? Cmon, it's one of the best JS libraries around.

3. Mike April 24th, 2007 12:23 pm

   Great list.

   submitted in queue @ tweako

   ( http://www.tweako.com )

4. Tony T. April 24th, 2007 12:52 pm

   I'm just curious if you considered mootools as one of these frameworks, or if it just fell below the top 5? I really like mootools mainly because of it's really light weight (and the ability to build a js package of only the components you want straight from their website). I've been using YUI the past few months on a project made specifically for broadband clients. I wouldn't recommend it for any normal production website because of it's size.

5. Tony T. April 24th, 2007 12:53 pm

   I guess everyone has their favorites

6. jaredmellentine April 24th, 2007 1:02 pm

   I have to agree with Nate. jQuery is pretty amazing and extremely well documented.

7. nate koechley April 24th, 2007 3:19 pm

   It would be interesting to hear a bit about your ranking criteria and notes on the pros and cons of each library.

   thanks,
   nate

8. Shane April 25th, 2007 1:45 am

   Why isn't jQuery in the list? Rico is like so yesterday!

9. cliff April 25th, 2007 3:39 am

   I've got some professional experience with dojo, and if it's the best thing going then I'm afraid the other libraries must be worse to be rated below it… and that's pretty bad from my personal experience.

10. Tom Sieron April 25th, 2007 4:47 am

    I was suprised not see jQuery here as well. It has comparable features to the libraries you've mentioned, plus it's lightweight and comes with abundance of plugins (and works with Ext now). Right now I'm preparing a presentation on JS libraries (for php developers at a local barcamp-thing) and your post is one of my resources for the comparison, it would be great if you could shed some light on your criteria, coz I've been pondering upon that all morning and I'm having trouble identifying the important issues for a webdev (im a designer by trade). Cheers.

11. Justin Silverton April 25th, 2007 6:55 pm

    "I've got some professional experience with dojo, and if it's the best thing going then I'm afraid the other libraries must be worse to be rated below it… and that's pretty bad from my personal experience."

    What issues did you hava with dojo? Im curious because I've used it a couple of times and found it to be a fairly complete framework.

12. Dennis Kayser May 6th, 2007 2:44 am

    What! jQuery is not in the top 5! There's got to be a mistake. Seriously I'd like to hear why jQuery is not in here? It'd be interesting to know.

13. Justin Silverton May 6th, 2007 10:29 am

    "What! jQuery is not in the top 5! There's got to be a mistake. Seriously I'd like to hear why jQuery is not in here? It'd be interesting to know."

    it's mostly because I don't have much experience with it (it also seems like the main page for it is down: http://jquery.com/). Can you post some reasons why you think it is better than the frameworks listed?

14. shoebappa May 6th, 2007 9:36 pm

    jQuery is good because of its modular plug-in architecture making it small while providing flexibility by adding plug-ins. The main benefit of jQuery is that it sits along side of your site so you can easily make a site that can function without JavaScript but if the user has JS enabled the jQuery code would go into action and add the additional functionality. That and its CSS selector and XPath style queries for interacting with the DOM is invaluable. Should definitely be at the top of the list IMO…

    Looks like they're moving servers but you have to give jQuery a look, I didn't see how incredible it was until I started to hose around with it.