Comparison of AJAX Frameworks: Prototype, GWT, DWR and Thinware

Introduction

These days we can see that the concept of Web 2.0 is becoming popular. Web 2.0 refers to the concept of new web applications that are interactive in nature and are intended to help people to collaborate and offer services for them, not just static HTML. This stuff became possible, in part, by means of the AJAX technology. For us, java developers, to build applications that are aligned with this very concept of Web 2.0 involves the selection of one tool (or framework) that helps us to accomplish our needs. This article help us in writing a simple web application with the most popular AJAX frameworks designed for Java, in this way we can highlight the main benefits and drawbacks between each of them.

Sample application

The first framework that we want to afford is Prototype and this is not an arbitrary decision. Recently, it has been ranked as the most widely used framework for AJAX development based on Java [1], see Figure 1.

Figure 1.

As the literature [2] mentioned, there exist three ways of designing the Ajax interaction between server

and client:

• Content-centric.This approach involves returning from the server side the HTML codethat would be inserted directly into the client page.
• Data-Centric.We can receive the information from the server in a standard format,such as XML or JSON, this way we gain independence of the data with

  respect to the presentation layer.

• Script-Centric.Using this approach you write client code (Javascript code) in the serverside enabling you to update the appropriate client’s structures by

  means of the script code.

At a glance, you probably ask

yourself what does the $’s operator means. It is a very handly alias

for the javascript function: document.getElementById, that you

might used before. The Ajax.Updater object, as you can see, receives,

in an anonymous array, the following elements:

• Identificatorfor the HTML which generates the data.
• Optional parameters.In this case, we indicate the method of the request (if it is not specified post is the default value) and a javascript function that is invoked

  if everything went ok.

is requested, should be something

like the following:

	 package javabeat.net.example.prototype; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class for Servlet: TablePrototypeServlet * */ public class TablePrototypeServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet { private static String[] columns= { "Fruit", "Price", "Stock", "Descrption" }; private static String[][] data = { {"Lemon", "23.4", "25", "Lemon fruit"}, {"Apple", "34.4", "5", "Apple fruit"}, {"Banana", "10.4", "10", "Banana fruit"}, {"Melon", "17.8", "7", "Melon fruit"}, {"Pear", "20.6", "8", "Pear fruit"}, {"India Berry", "18.5", "15", "India Berry"} }; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); PrintWriter writer = response.getWriter(); writer.write("<TABLE>"); writer.write("<THEAD>"); writer.write("<TR>"); for (int i=0;i<columns.length;i++) { writer.write("<TH>"); writer.write(columns[i]); writer.write("</TH>"); } writer.write("</TR>"); writer.write("</THEAD>"); writer.write("<TBODY>"); for (int i=0;i<data.length;i++) { writer.write("<TR>"); for (int j=0;j<data[i].length;j++) { writer.write("<TD>"); writer.write(data[i][j]); writer.write("</TD>"); } writer.write("</TR>"); } writer.write("</TBODY>"); writer.write("</TABLE>"); } } 

As you can see, Prototype provides

a very flexible and strong support for the usage of Ajax technologies

using a Content-centric approach. If we want to use another approach,

that provides a cleaner separation of the user interface and the business

logic implemented on the server, the burden of the code will be translated

to the client side, this should happen because we got to:

1. Parse the data ina standard format (JSON or XML) based on the particular semantics definedfor the application being developed.
2. And then, manipulatethe interface elements of the DOM to generate the appropriate output.

Comments

comments