A detailed comparison of 5 JavaScript frameworks

Framework Comparison

Table 1 provides a detailed comparison of the five frameworks discussed in this article

	Prototype	jQuery	YUI	ExtJS	MooTools
Latest Version	1.6.1	1.4.1	3.00	3.1	1.2.4
License	MIT	MIT & GPL	Bsd	Commercial & GPL v3	MIT
			Browser compatibility
IE Support	6.0+	6.0+	6.0+	6.0+	6.0+
Firefox Support	1.5+	2.0+	3.0+	1.5+	2.0+
Safari Support	2.0.4+	3.0+	4.0+	3.0+	2.0+
Opera Support	9.25+	9.0+	10.0+	9.0+	9.0+
Chrome Support	1.0+	1.0+	Not verified	Not verified	Not verified
			Core Features
Ajax Support	Yes	Yes	Yes	Yes	Yes
DOM manipulation	Yes	Yes	Yes	Yes	Yes
DOM traversal	Yes	Yes	Yes	Yes	Yes
Event Handling	Yes	Yes	Yes	Yes	Yes
Json	Yes	Yes	Yes	Yes	Yes
Selectors	Yes	Yes	Yes	Yes	Yes
			Ux/ui Enhancements
accordion	No	JQuery UI	No	Yes	MooTools more
Animation	Scriptaculous	Yes	Yes	Yes	Yes
Auto completion	Scriptaculous	No	Yes	Yes	No
Browser History	Scriptaculous	No	Yes	Yes	No
Calendar	No	JQuery UI	Yes	Yes	No
Charting	No	No	Yes	Yes	No
Drag and Drop	Scriptaculous	JQuery UI	Yes	Yes	MooTools more
Grids	No	No	Yes	Yes	MooTools more
Progress Bar	No	JQuery UI	Yes	Yes	No
Resizing	No	JQuery UI	Yes	Yes	No
Rich Text Editor	No	No	Yes	Yes	No
Slider	Scriptaculous	JQuery UI	Yes	Yes	MooTools more
Tabs	No	JQuery UI	Yes	Yes	No
Themes	No	JQuery UI	Yes	Yes	MooTools more
Tree views	No	No	Yes	Yes	No

Other noteworthy frameworks

In order to be concise, this article only discusses five more popular frameworks, which does not mean that this is the most popular, best, and most functional.

Other frameworks are worth mentioning and worth seeing.

• Cappuccino
• Dojo
• Glow
• Gwt
• MochiKit
• Qooxdoo
• Rialto
• Rico
• SproutCore
• Spry
• Uize

Review

In this article, you've learned about the JavaScript framework concept and how it benefits from the development of Web sites and Web applications. A general description of the common functions of these frameworks is given and an example is given to illustrate its application. You also learned about one or more user experiences and user interfaces for five frameworks. Finally, you get an intuitive table highlighting the features that each frame has or does not have. With this information, you can study these frameworks further before making informed choices for you or your team.

Resources

• (DeveloperWorks, November) explains
  Build ajax-based Web applications.
• Learn about Dojo.
• Read the Articledojo Concepts for Java Developers (DeveloperWorks, October 2008) to bridge the gap from Java code to Dojo s o that you can get up to speed quickly and use the toolkit when developing your applications.
• Read call SOAP Web services with Ajax,
  Part 1:build the WEB services Client
  (DeveloperWorks, October, learn to implement a Web browser-based
  The SOAP Web Services client using the Ajax design pattern.
• Overcome
  Security threats for Ajax applications
  (DeveloperWorks, June 2007) discusses the
  Threats associated with Ajax technologies and gives you some best
  Practices to avoid them.
• Mastering
  Ajax, part 1:introduction to Ajax
  (DeveloperWorks, December) explains how HTML,
  JavaScript, DHTML, and DOM work together to make extremely efficient Web
  Development an easy reality.
• Simplify Ajax development with JQuery
  (DeveloperWorks, April 2007) examines the JQuery
  Philosophy, explains its features and functions, and gives to you some common
  Ajax tasks.
• Using Ajax with DB2
  (DeveloperWorks, August 2007) shows how the IBM information
  On Demand 2006 Conference Personal Planner uses Ajax to work with
  db2®.
• To listen to interesting interviews and
  Discussions for software developers, check out DeveloperWorks podcasts.
• DeveloperWorks Technical Events and Webcasts:
  Stay current with DeveloperWorks technical events and webcasts.

Access to products and technology

• Download the Dojo Toolkit. Dojo Toolkit.
• Get the Prototype Javascript framework.
• Get JQuery.
• The JQuery User Interface provides
  Abstractions for low-level interaction and animation, advanced effects and
  High-level, themeable widgets, built on top of the JQuery JavaScript
  Library.
• Get script.aculo.us.
• Get MooTools.
• Download and
  Learn about the Yahoo! YUI Library.
• Get ExtJS.
• Innovate your
  Next open source development project with IBM trial software,
  Available for download or on DVD.
• Download IBM Product Evaluation versions,
  And get your hands on application development tools and middleware
  Products from DB2, Lotus®, rational®, tivoli®, and
  websphere®.

About the author

Joe Lennon is a 24-year-old software developer from Cork, Ireland. Joe is author to the forthcoming Apress book beginning CouchDB, and has contributed several technical and articles ls to IBM DeveloperWorks. In him spare time, Joe likes to play football (soccer), tinker with gadgets and work on his Xbox 360 gamer.

Reprint Address: http://www.denisdeng.com/?p=736

Original address: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

Summary : Modern Web sites and Web applications tend to rely on a large number of JavaScript from clients to provide rich interaction. In particular, you can return data by not refreshing the page's asynchronous request or get a response from a server-side script (or data System). In this article, you will learn how the JavaScript framework can be faster and easier to create interactive, responsive Web sites and Web applications.

Introduction : JavaScript is an object-oriented scripting language that has long been used as a choice for Web browser application client-side scripting interfaces. JavaScript allows Web developers to programmatically work with objects on a Web page, providing a platform for manipulating these objects out of thin air. When JavaScript was first introduced, it was often used to provide trivial features such as clocks, scrolling text in the browser status bar. Another common feature is "rollover link", which changes the color or background picture of the text when the user's mouse hovers over the object. However, in recent years Ajax has brought new interactivity to network programming, and JavaScript has become more useful. Before Ajax, any server-side processing or database access requires that the entire page be "refreshed" or that a new page be rendered by the browser. This is not only slow, disappointing to users, but also a waste of bandwidth and resources.

Ajax is asynchronous JavaScript and XML, although referencing XML is not valid, but Ajax can respond to data in several other formats except XML, such as JSON (JavaScript Object notation). Ajax works by submitting an HTTP request asynchronously to the Web server without refreshing or rendering the entire page, rendering only the content of the response. Instead, developers typically use the DOM (Document Object model) operation to modify part of a Web page, and the data returned by the HTTP response reflects those changes.

What is a JavaScript framework?

JavaScript itself is a very powerful language, and you don't need any additional framework to create a rich Internet application (RIA) supported by it. However, using JavaScript is not an easy task, mainly because of the complications that occur when trying to provide multiple browser support. As with HTML and CSS, different browsers have different ways of doing JavaScript, so it's a nightmare to make sure your JavaScript code is cross-browser compatible.

A JavaScript framework or library is actually a series of tools and functions that make it easier to produce Cross-browser-compatible JavaScript code. Each library has been rigorously tested in many of the most popular and recent versions of Web browsers. Therefore, you can be confident that using any of these frameworks, your JavaScript based RIA will be broadly consistent across browsers and platforms.

In addition to browser compatibility issues, the JavaScript framework makes it easier to write code to fetch, traverse, and manipulate DOM elements. Not only do they provide a quick function to get a reference to a DOM element, but they also allow a daisy-style DOM traversal function chain to look up the sibling elements of a parent, child, or any depth. Finally, the framework provides a series of functions that make it easier to manipulate these objects, allowing their content to change, add, delete, or manipulate the style of the class to affect the appearance of the element.

Another important feature of the JavaScript framework is the ability to better support event handling. Cross-browser event handling can be said to be a nightmare because of the different implementations of browsers. As a result, the JavaScript framework usually wraps up browser events and provides a series of useful cross-browser functions to handle them. Some frameworks also provide a standardized set of events (such as Esc key, enter key, cursor, and so on) that represent the keyboard key sequence.

All of these features are very useful, and the JavaScript framework has played an important role in its recent popular AJAX applications. Like other aspects of JavaScript, each Web browser tends to support Ajax in a different way, so AJAX support for all browsers will be a heavy task. Almost all JavaScript frameworks include some form of Ajax library, typically providing AJAX request and response objects, updating the DOM element after evaluating the response, and polling for a specific request.

Typical features of a JavaScript framework

Now let's take a look at some of the features that most JavaScript frameworks have. These features include:

• Selector
• DOM Traversal
• DOM Operations
• Utility functions
• Event handling
• Ajax

To better illustrate these features, I'll enumerate an example from one or more of the JavaScript frameworks below: Prototype, JQuery, Yui,extjs, and MooTools. Although the implementation of each framework differs from the syntax, its concepts are broadly the same. Each framework has a detailed API reference that you can refer to to determine how to use these specific library features.