In these days, I investigate some popular JavaScript frameworks in order to select a suitable one for company project. It will consider the easy-use coding convention (OOP), rich widget framework (SDK), and license issue. Anyone who wants to build up commercial software will also consider these topics. I mainly take a look at the following ones:

  • Prototype
  • jQuery
  • Ext JS
  • YUI 3
  • Dojo
  • GWT
  • Qooxdoo
  • JavaScriptMVC
  • SproutCore
  • OAT
  • Bindows
  • Backbase
  • SmartClient
  • MooTools
  • AmpleSDK
  • Cappuccino
  • DWR
  • Echo 3
  • Others
  • Comparison and Trade-off

There are two kinds of frameworks here, one called infrastructure framework, which supports low-level OOP, dependency loading, event manager, DOM encapsulation, CSS rendering and utilities, etc.; another called application framework, which is based on infrastructure framework (so also includes infrastructure) and supporting more widgets, working as SDK.

Infrastructure framework is the best one for website development (light weight, quick), and application framework is suitable for enterprise RIA development (heavy, but save time to build a system on widgets).

1. Prototype

Websitehttp://www.prototypejs.org/

Version: 1.7

License: MIT (free)

Description:

It belongs to the infrastructure framework.

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.

2. jQuery

Websitehttp://jquery.com/

Version: 1.5.1

LicenseMIT and GPL licenses.

Description:

Infrastructure framework.

jQuery is a popular JavaScript library for many good reasons. It provides an excellent set of tools in a well-designed, compact file and is easy to learn due to great documentation. However, because of the focus on staying small and simple, jQuery doesn’t provide a significant infrastructure for building large scale applications.

Recently jQueryUI (http://jqueryui.com) is coming out as the official jQuery user interface library. But it is still new SDK, lack of components comparing with YUI and ExtJS.

jQuery Mobile

jQuery Mobile uses an HTML attribute called: data-role to associate an element with a widget. It is similar with Dojo.

  • Pages & Dialogs
  • Toolbars (Header & Footer bars)
  • Button’s (Including a set of stock icons)
  • Form Controls (Slider’s,Toggles, enhanced radio, checkbox, etc)
  • List View Control
<!doctype html><html> 
<head>
<title>jQuery Mobile Example</title> 
<link rel="stylesheet"href="jquery.mobile-1.0a2/jquery.mobile-1.0a2.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2/jquery.mobile-1.0a2.js"></script>
</head><body></body></html>

HTML5 added a feature called custom data attributes.

  • Any tag attribute that begins with data- may be used as a custom data storage associated with the element.
  • So instead of doing <div id=”cat#cat.id#”></div> you can do <div data-id=”#cat.id#”>…</div> and it will still pass as valid HTML5.

NewImage.jpg

NewImage.jpg

Other companies also build up mobile framework based on jQuery, like jQTouch from Sencha.

3. Ext JS

Website: www.sencha.com

License: Commercial

Version: 4.0

Description:

It is wonderful application framework which support excellent widget sets for desktop style applications, except license issue. Sencha also delivers Touch SDK for iOS/WebOS devices. It put infrastructure framework into Ext-Core (MIT license) and share to the community.

Sencha has production line including Ext JS 3, Ext JS 4, Ext GWT, Ext Designer, Sencha Touch, Sencha Animator.

It contributes five open source projects (MIT license):

  • Ext Core - Ext Core is a cross-browser JavaScript library for building dynamic web pages. Ext Core provides basic cross-brower abstractions for DOM querying, element selection and more.
  • jQTouch – a progressive enhancement style, mobile library providing lightweight animation and UI plugin for JQuery;
  • Raphaël – a JavaScript library for cross-browser vector graphics on the Web
  • Connect – an application framework that combines Rack and Node.js to provide a lean, event-driven application server.
  • InfoVis – a JavaScript Toolkit for creating interactive data visualizations for the Web.

NewImage.jpg

NewImage.jpg

About Sencha Touch

Sencha Touch – Sencha Touch is a HTML5 mobile app framework that allows you to develop web apps that look and feel native on Apple iOS and Google Android touchscreen devices. It supports HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization in developing your web applications.

 

4. YUI 3

Websitehttp://developer.yahoo.com/yui/3/

Version: 3.0

License: BSD

Description:

YUI 3 is Yahoo!’s next-generation JavaScript and CSS library. It powers the new Yahoo! homepage, Yahoo! Mail, and many other Yahoo! sites. The YUI 3 Library has been redesigned and rewritten from the ground up incorporating what we’ve learned in five years of dedicated library development. The library includes the core components, a full suite of utilities, the Widget Infrastructure, a growing collection of widgets, CSS resources, and tools.

NewImage.jpg

NewImage.jpg

 

5. Dojo

Websitehttp://dojotoolkit.org/

Version: 1.5

License:  AFL or BSD (free)

Description:

It supports the following browser and platform, including iOS.

NewImage.jpg

NewImage.jpg

Dojo’s Dijit and DojoX provides a complete collection of user interface controls, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible user experience. Completely free and open-source with no strings attached or licenses to buy!

Dijit is suitable for just about everything, including:

  • Simple web sites and blogs that just want to unobtrusively add some simple widgets or interactivity, such as a Flickr Image viewer or a Twitter feed summary
  • Robust web applications such as email communication suites, mapping engines, and e-commerce solutions
  • Enterprise intranet apps to replace legacy thick client desktop software for internal and external sales reports, document management systems, and other productivity software to manage and visualize data entry and retrieval
  • Embedded and mobile applications

NewImage.jpg

dojox.charting package:

NewImage.jpg

dojox.mobile package:

NewImage.jpg

The programming character of Dojo:

1) add meta element on HTML element;

NewImage.jpg

6. Qooxdoo

Website: http://qooxdoo.org

Version: 1.3

License:  qooxdoo is dual-licensed under the GNU Lesser General Public License (LGPL) and the Eclipse Public License (EPL). So you can use it anywhere for open-source or commercial product without paying.

Descriptions:

NewImage.jpg

qooxdoo is a comprehensive and innovative framework for creating rich internet applications (RIAs). Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications. No HTML, CSS nor DOM knowledge is needed.

NewImage.jpg

There are some restrictions that might prevent qooxdoo from working on the iPod Touch or iPhone:

“These are the JavaScript constrains mentioned:

  • 10 MB JavaScript object allocation
  • 5 second JavaScript execution
  • Scripts may be paused (especially when Safari is not the active application)”

If you have an Apple developer account you can access this information (and much more) at Apple’s official iPhone Dev Center.

7. Google Web Toolkit

Websitehttp://code.google.com/webtoolkit/

License: Apache

Version: 2.2.0

Description:

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including Google Wave and the new version of AdWords. It’s open source, completely free, and used by thousands of developers around the world.

GWT includes:

The GWT SDK contains the Java API libraries, compiler, and development server. It lets you write client-side applications in Java and deploy them as JavaScript.

Speed Tracer is a Chrome Extension that allows you to pinpoint performance problems in your web applications.

The Plugin for Eclipse provides IDE support for Google Web Toolkit and App Engine web projects.


GWT Designer lets you create user interfaces in minutes with tools for intelligent layout assist, drag-and-drop, and automatic code generation.

Mobile Support

http://code.google.com/p/gwt-mobile-webkit/

There are two categories of GWT API libraries this project’s going to deliver: HTML5 oriented and WebKit oriented. The former is about leveraging the latest developments in the HTML5 space (which is closely followed by the WebKit implementation), and the latter category is UI related stuff.

NewImage.jpg

Charting Support

GWT-Google-APIs: (Pure Java)

http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted

NewImage.jpg

More thing about Google Visualization API: (JavaScript)

NewImage.jpg

function drawSort() {  var data = new google.visualization.DataTable();  data.addColumn('string', 'Name');  data.addColumn('number', 'Salary');  data.addColumn('boolean', 'Full Time');  data.addRows(5);  data.setCell(0, 0, 'John');  data.setCell(0, 1, 10000);  data.setCell(0, 2, true);  data.setCell(1, 0, 'Mary');  data.setCell(1, 1, 25000);  data.setCell(1, 2, true);  data.setCell(2, 0, 'Steve');  data.setCell(2, 1, 8000);  data.setCell(2, 2, false);  data.setCell(3, 0, 'Ellen');  data.setCell(3, 1, 20000);  data.setCell(3, 2, true);  data.setCell(4, 0, 'Mike');  data.setCell(4, 1, 12000);  data.setCell(4, 2, false);

  var formatter = new google.visualization.NumberFormat({prefix: '$'});  formatter.format(data, 1); // Apply formatter to second column

  var view = new google.visualization.DataView(data);  view.setColumns([0, 1]);

  var table = new google.visualization.Table(document.getElementById('table_sort_div'));  table.draw(view);

  var chart = new google.visualization.BarChart(document.getElementById('chart_sort_div'));  chart.draw(view);

  google.visualization.events.addListener(table, 'sort',      function(event) {        data.sort([{column: event.column, desc: !event.ascending}]);        chart.draw(view);      });}

Standalone charting API from other projects:

http://code.google.com/p/clientsidegchart/

NewImage.jpg

http://code.google.com/p/gflot/

NewImage.jpg

Programming Concept:

 

JavaScriptMVC

Websitehttp://javascriptmvc.com

License:

Version: 3.0.5

Description:

JavaScriptMVC is designed to enhance jQuery development for medium to large projects. You should care about code quality, performance, and maintainability.If you don’t care about these things, or think jQuery is enough for any project, you don’t know what you’re doing, and you will embarrass the project by using it. Leave now.

Here’s a few things you should be doing:

  • Testing (especially automatic and functional testing)
  • Documenting
  • Breaking up code into logically organized files
  • Compressing and concatenating your JavaScript files
  • Using and organizing client side templates
  • Making plugins that clean themselves up, are internally organized, and extendable.
  • Error reporting

All of these things are hard or impossible to do right with jQuery alone.

You can add your own automated testing library – QUnit isn’t automated, it’s difficult to write Selenium tests.

You can add your own documentation engine – JSDoc, make sure you keep track of every file!

You can add your own way of loading and compressing scripts – RequireJS.

You can use other client side template libraries – jquery-tmpl, but you won’t be able to compress them into your build or put them in external files as easily.

You can be careful to structure your jQuery plugins so they can be easily removed from an element, remove all event handlers, and provide some mechanism for extending or overwriting your plugin.

NewImage.jpg

SproutCore

Website: http://www.sproutcore.com

License:

Descriptions:

SproutCore is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins.SproutCore works by doing the only thing that can truly eliminate the latency problem: it moves your business logic to the client. SproutCore applications are full-fledged programs, written in JavaScript. That JavaScript executes in your user’s browser, freeing up your servers (and server engineers) to focus on what’s most important in a cloud application: delivering users’ data as quickly and reliably as possible.But SproutCore isn’t your mama’s JavaScript library. It isn’t meant to augment existing web pages. It isn’t meant to add animation to documents. SproutCore is a tool for building applications. It has more in common with Cocoa or .NET than jQuery or MooTools. Because of that, SproutCore will change the way you think about building web apps.

NewImage.jpg

 

 

Cappuccino

Websitehttp://cappuccino.org/

License: LGPL, free for commercial softwares.

Version:  0.9

Description:

Cappuccino is an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.

Cappuccino is an open source application framework for developing applications that look and feel like the desktop software users are familiar with.

Cappuccino is built on top of standard web technologies like JavaScript, and it implements most of the familiar APIs from GNUstep and Apple’s Cocoa frameworks. When you program in Cappuccino, you don’t need to concern yourself with the complexities of traditional web technologies like HTML, CSS, or even the DOM. The unpleasantries of building complex cross browser applications are abstracted away for you.

Cappuccino was implemented using a new programming language called Objective-J, which is modelled after Objective-C and built entirely on top of JavaScript. Programs written in Objective-J are interpreted in the client, so no compilation or plugins are required. Objective-J is released alongside Cappuccino in this project and under the LGPL.

Cappuccino is not designed for building web sites, or making existing sites more “dynamic”. We think these goals are too far removed from those of application development to be served well by a single framework. Projects like Prototype and jQuery are excellent at those tasks, but they are forced by their nature to make compromises which render them ineffective at application development.

On the other end of the existing frameworks are technologies like SproutCore. While SproutCore set out with similar goals to Cappuccino, it takes a distincly different approach. It still relies on HTML, CSS, JavaScript, Prototype, and an entirely new and unique set of APIs. It also requires special development software and a cumbersome compilation step. We think this is the wrong approach.

With Cappuccino, you don’t need to know HTML. You’ll never write a line of CSS. You don’t ever have interact with DOM. We only ask developers to learn one technology, Objective-J, and one set of APIs. Plus, these technologies are implementations of well known and well understood existing ones. Developers can leverage decades of collective experience to really accelerate the pace of building rich web applications.

If you want to build a rich web application, you need to learn something new. Many people think this will be JavaScript 2, or HTML 5, or some new standard. The problem is, as we’ve come to realize, standards bodies work too slowly. Cappuccino works right now, not in the theoretical future. Objective-J is essentially JavaScript 2, but available today in every major browser. Because we rely on only the most essential web technologies, improvements are not limited by the pace of browser vendors and standards bodies.

NewImage.jpg

8. OAT (OpenLink AJAX Toolkit)

Website: http://oat.openlinksw.com

License: GPL

Description:

OAT (OpenLink AJAX Toolkit) is a JavaScript-based toolkit for browser-independent Rich Internet Application development. It includes a rich collection of UI Widgets/Controls, Event Management System, and a truly platform independent Data Access Layer called AJAX Database Connectivity.

NewImage.jpg

NewImage.jpg

 

Bindows

Websitehttp://www.bindows.net

Version: 4.1

License: Commercial

Descriptions:

Bindows is a Graphical User Interface (GUI) software framework for development of rich AJAX and Web 2.0 enterprise web applications. Using Bindows, you can generate the exact look and exact feel (standard shortcut keys, mnemonics, etc) of a Windows GUI in your web applications.

Bindows use XML to represent UI layout and property value, just like Flex techniques.

NewImage.jpg

NewImage.jpg

 

SmartClient

Website: http://www.smartclient.com

Version: 8.0

License: LGPL and commercial ones. http://www.smartclient.com/product/index.jsp

Company: Isomorphic Software, 101 California Street, Suite 2450, San Francisco, CA 94111, USA

Description:

  • Combination of rich HTML5-based interface framework and client-server data binding system
  • Support HTML5 charting and pivot table (named Analytics module)
  • All user interfaces can be described in XML format, just like Flex MXML file;
  • Visual Builder for web-based user interface development environment just like Flex Builder, supporting drag-drop to build up visual interfaces;
  • Powerful server framework: 
    • server data binding, validation,
    • role-based security check on dataSource operation and UI display,
    • SQL connector (transform between dataSource and sql table),
    • Queue multiple data load into one smartly, batch commit between UI and server
    • SQL/HQL templating

NewImage.jpg

NewImage.jpg

NewImage.jpg

NewImage.jpg

MooTools

Website: http://mootools.net

License: Open Source MIT license

Version:  1.3.1

Description:

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. Lack of UI widget set.

Ample SDK

Website: www.amplesdk.com

License: free Open-Source project distributed using a dual-licensing approach under MIT and GPL licenses.

Version: 0.9.3

Description:

NewImage.jpg

DWR

Websitehttp://directwebremoting.org

Version: 3.0

License: Open Source, available under the Apache Software License v2.

Description: (Direct Web Remoting)

DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible.

DWR will generate the JavaScript to allow web browsers to securely call into Java code almost as if it was running locally. It can marshal virtually any data including collections, POJOs, XML and binary data like images and PDF files. All that is required is a security policy that defines what is allowed.

With Reverse Ajax, DWR allows Java code running on a server to use client side APIs to publish updates to arbitrary groups of browsers. This allows interaction 2 ways - browser calling server and server calling browser. DWR supports Comet, Polling and Piggyback (sending data in with normal requests) as ways to publish to browsers.

DWR provides integration with SpringStrutsGuiceHibernate and others.

Echo 3

Website: http://echo.nextapp.om

License: open-source software, licensed under the Mozilla Public License.

Version: 3.0 beta

Description:

Echo is a platform for building web-based applications that approach the capabilities of rich clients. The applications are developed using a component-oriented and event-driven API, eliminating the need to deal with the “page-based” nature of browsers. To the developer, Echo works just like a user interface toolkit.

The latest iteration, Echo3, features the ability to write applications in either server-side Java or client-side JavaScript. Server-side applications run in any Java Servlet Container and do not require developer knowledge of HTML, HTTP, or JavaScript. Client-side JavaScript-based applications do not require any server at all, but can of course communicate with one via XML or JSON over HTTP. Cross-platform AJAX technology is used for rendering, and no browser plugins are required.

NewImage.jpg

Others

Spry

Adobe owned Ajax framework. Simple.

Backbase

websitehttp://www.backbase.com License: Commercial

Midori

Midori is a light weight JavaScript framework, infrastructure level feature. No UI widget bundled.

Archetype

Archetype is a robust JavaScript framework that shares lots of things in common with Prototype. Archetype has a dependency management system which initializes needed components for particular web pages(what components and CSS file to load – for example). Archetype also emphasizes code readability and coding best practices by being hard-lined about HTML/CSS/JavaScript separation

June

The June Framework was inspired by the Core library and uses the Module design pattern. For those using MS Visual Studio 2008, you’ll love the documentation that comes with the June Framework because it utilizes Visual Studio’s intellisense format.

SimpleJS

SimpleJS is a simple and lightweight, but feature-packed JavaScript framework with Ajax helper functions and animation effects. It uses a “plugins” system much like jQuery and MooTools to extend the framework. It’s the perfect solution for developers who don’t need much outside of basic Ajax functions and effects.

UIZE

UIZE (pronounced “you eyes”) is another JavaScript framework the emphasizes the creation of full-on rich internet applications (RIA) as opposed to basic effects and widgets/components on a web page. It already comes packed with “ready-to-go” widgets such as a date picker, a table sorter, progress bar, and color picker.

Fleegix

Fleegix.js has an excellent “events system” that helps you listen, manipulate, and fire off DOM event (such as mouseover’s, onclick, etc.). It includes a function for serializing JavaScript objects into JSON format (fleegix.jason.serialize) and – because every other JavaScript framework has it – an awesome effects module to help you add rich, animated JavaScript animation onto your web page or web application.

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.

EdoJS

Website: www.edojs.com

License: Commercial one

Version: 1.0

 

NewImage.jpg

Prototype-UI

Website: http://www.prototype-ui.com

License: Free open source project

Version:

Description:

Only support Window and Carousel component now. A bit beta framework.

 

Trade-off

There are many articles in internet to compare several frameworks. I collect them and share to you.

jQuery to dojo

http://www.sitepen.com/blog/2010/11/15/from-jquery-to-large-applications/

jQuery vs. YUI

http://www.jsrosettastone.com/

jQuery vs. Dojo vs. YUI

http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs

Comparison of ExtJS, Flex, GWT, YUI vs. jQuery

Firstly I search these key words in Google Trends. I didn’t compare YUI with Dojo, because Dojo is a general world in Trends and may NOT mean javasript framework.

NewImage.jpg

NewImage.jpg

Then I search “JavaScript, YUI” and “JavaScript, Dojo”, etc. and get results separately:

  • 4,950,000  YUI
  • 1,930,000  dojo
  • 1,650,000  MooTools
  • 1,550,000  ExtJS
  • 1,050,000 AmpleSDK
  • 860,000 jQueryUI
  • 517,000 Cappuccino
  • 160,000 OAT
  • 109,000 SmartClient
  • 72,600  QooXDoo
  • 68,500  SproutCore
  • 65,300  JavaScriptMVC
  • 53,500  Backbase

In summary, jQuery is the best one in infrastructure framework in the world, strongly supported and contributed in community. In application framework class, YUI/Dojo is the most popular one.

In my project as enterprise RIA application, I will try to investigate YUI and Dojo detailedly. Basically speaking, Yahoo! never put its project into LGPL license, it always deliver free projects. For Dojo, currently is safe; but not easy to say in future. Think about the early year of Ext JS, everyone loved it and used it everywhere. Who can imagine it became to commercialize later? It is difficult to migrate your project from ExtJS to another one.