RIA frameworks compared

Web based application having desktop like GUI is popularly known as RIA (Rich Internet Application). In old days only few solutions were available namely Java applet, Flash, Dynamic html, etc. Nowadays there are loads of frameworks which provide desktop like experience. These frameworks are based on AJAX (Asynchronous JavaScript + XML) technology.

The choices of RIA frameworks are huge and it's difficult to choose the most suitable for your need. The best part of open source technology is for every problem there are numerous solutions, but the worst part is choosing the right technology for your need.

I found these available frameworks to build RIA - Adobe Flex, extJS, Jboss Richfaces, IceFaces, Oracle ADF, JavaFX, Silverlight, GWT, IT Mill Toolkit, ZK, OpenLaszlo, BackBase, Echo, Morfik, Haxe, YUI, pyjamas, DWR, Prototype, Curl, SproutCore, Cappuccino, jQuery, etc.

A selection criterion needs to be defined to select a suitable framework. I choose these criteria -

Popularity of the framework - The framework should be popular in developer community. Popularity brings good publications, community support, improvements, etc.

Support - A framework should have a good support in terms of books, training facilities, mailing lists, etc.

Out-of-the-box GUI components - A framework should provide ready to use components to save time in building basic blocks.

Underlying technology - Underlying technology is also important to check the learning curve, effort required, developer expertise, etc.

After applying the above criteria, I am left with extJS, Flex, GWT and Silverlight. These frameworks provide rich look and feel and have loads of ready to use components.

extJS
It's a cross browser Java Script library for building RIA.

Advantages

Huge set of rich widgets.

Good API documentation available.

Disadvantages

It's not free.

JavaScript knowledge required.

No good support for Web Service.

To do simple things, lot of JavaScript coding required.

CSS customization is not easy.

Firebug debugging is of no use as the generated html is bad.

Adobe Flex
Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems.

Advantages

Best look and feel.

Rich design and multimedia as its flash.

Easy to deploy.

Flex Builder IDE to develop UI using drag and drop.

Open source.

Web service integration is very easy.

Desktop application can be also developed.

Disadvantages

Flex Builder is not free.

Knowledge of MXML and ActionScript required.

Requires Plugin installation on the client side.

Browser history support not possible.

Rendering flash is still slow.

RPC calls are cumber some and need third party software like BlazeDS.

GWT (Google Web Toolkit)
Writing web apps today is a tedious and error-prone process. Developers can spend 90% of their time working around browser quirks. In addition, building, reusing, and maintaining large JavaScript code bases and AJAX components can be difficult and fragile. Google Web Toolkit (GWT), especially when combined with the Google Plugin for Eclipse, eases this burden by allowing developers to quickly build and maintain complex yet highly performant JavaScript front-end applications in the Java programming language.

Advantages

Developer need to know only Java. No JavaScript.

Huge choices of ready to use components.

Eclipse IDE support to develop.

Code can be debugged in Eclipse.

Eclipse hosted mode available for hot deployment.

Look and feel is good and can be easily customized using CSS.

Maven supported so builds are easy.

Junit test cases to test the code.

Easy Web Service configuration based on annotations.

Similar to Java Swing.

Loads of active mailing lists to seek solution.

Doesn't require Plugin installation on the client side.

GWT is free so no cost.

Browser history support works.

Disadvantages

Only for Java developers.

Compiling Java to JavaScript is very slow.

No drag and drop IDE available.

Desktop application cannot be developed.

Microsoft Silver light
Microsoft Silver light is a free runtime that powers rich application experiences and delivers high quality, interactive video across multiple platforms and browsers, using the .NET framework.

Advantages

.Net knowledge helps.

Visual Studio IDE support.

Desktop applications can be developed.

Disadvantages

Requires plugin installation on the client side.

Fairly new framework so wider support is not available.

Its not open source.

Benefits of GWT

After evaluating and reading various Rich Internet Application solutions, I have finally selected GWT and GWT-Ext.

I developed a prototype using GWT 1.6.4, GWT-Ext 2.0.5, GWTRPC-spring 1.01 on Tomcat 6.0.18 with back end in Spring 2.5.6 and Hibernate 3.3.1.

I kept the architecture simple and separate layers by developing UI in GWT and business logic in Spring beans. As you know the whole GWT UI runs in user browser and Spring beans running in Tomcat. GWT Async architecture is used to interact with Spring beans. GWT converts the Java code into Javascript at deploy time.

I finalized GWT based on these parameters -

• Only Java knowledge is required.


• Team is accustomed to Eclipse so this was an advantage for us.


• Ability to use Java Debugger in Eclipse is extremely helpful.


• GWT Hosted mode in eclipse, so no compile and deploy required on every change.
  
• Big developer community.


• Lots of ready to use components.


• Prior Java knowledge helpful.


• Similar to swing and the team have worked on Swing in earlier project.


• Look and feel is good.


• Maven support is also available.


• Can write Junit test cases.


• Easy RPC configuration based on annotations.

GWT with maven and eclipse

Setting up a latest GWT project in eclipse along with Maven was not straight forward. Here is step-by-step guide on how I managed to setup my environment.

I assume you have Eclipse installed with m2eclipse plugin. Also Maven installed and its maven executable is in your environment PATH.

Run the below maven archetype to create a project shell. I named my project gwttest.

mvn archetype:create -DarchetypeGroupId=com.totsp.gwt -DarchetypeArtifactId=maven-googlewebtoolkit2-archetype -DarchetypeVersion=1.0.4 -DgroupId=com.gwttest -DartifactId=gwttest

The above command will create a directory "gwttest".

In the generated pom.xml, change the gwt version to the version you are using. The version should be available in the maven repository. I used latest GWT version 1.6.4. Also remove the pluginRepositories and unpack plugin from the pom.xml as that it is not required.

Create an Application.launch file in your project with the below content. Launch file is required to run the project from Eclipse.

<?xml version="1.0" encoding="UTF-8"?>
<launchConfiguration type="org.eclipse.jdt.launching.localJavaApplication">
<booleanAttribute key="org.eclipse.jdt.launching.DEFAULT_CLASSPATH" value="false"/>
<listAttribute key="org.eclipse.jdt.launching.CLASSPATH">
<listEntry value="<?xml version="1.0" encoding="UTF-8"?>
<runtimeClasspathEntry containerPath="org.eclipse.jdt.launching.JRE_CONTAINER" javaProject="gwttest" path="1" type="4"/>
"/>
<listEntry value="<?xml version="1.0" encoding="UTF-8"?>
<runtimeClasspathEntry internalArchive="gwttest/src/main/java" path="3" type="2"/>
"/>
<listEntry value="<?xml version="1.0" encoding="UTF-8"?>
<runtimeClasspathEntry id="org.eclipse.jdt.launching.classpathentry.defaultClasspath">
<memento project="gwttest"/>
</runtimeClasspathEntry>
"/>
</listAttribute>
<stringAttribute key="org.eclipse.jdt.launching.PROJECT_ATTR" value="gwttest"/>
<stringAttribute key="org.eclipse.jdt.launching.MAIN_TYPE" value="com.google.gwt.dev.HostedMode"/>
<stringAttribute key="org.eclipse.jdt.launching.PROGRAM_ARGUMENTS" value="-war target\gwttest-1.0-SNAPSHOT com.gwttest.Application"/>
<stringAttribute key="org.eclipse.jdt.launching.VM_ARGUMENTS" value="-Xmx256M"/>
<booleanAttribute key="org.eclipse.debug.core.appendEnvironmentVariables" value="true"/>
</launchConfiguration>

In Eclipse go to File > Import > General > Maven Projects. Select the directory "gwttest" and finish.

To generate a war file right click on the project > Run As > Maven package. The war file will be created under gwttest\target folder.

To test right click on the Application.launch file > Run As > Application. The sample GWT application will start in hosted mode.

To debug right click on the Application.launch file > Debug As > Application.