Echo2 versus GWT

A little while ago, I wrote about the GWT (Google Web Toolkit) here, which I'm particularly interested in as it provides a pure Java environment that can be translated into pure AJAX-style code.

This means that a Java developer can work with the GWT and create effective, lightweight, interactive websites without the need to get into how AJAX is implemented.

This column produced a great deal of correspondence from readers, a number of which highlighted other frameworks with similar aims. The Echo2 framework is of particular interest to me, as I've worked with its previous generation system.

In the remainder of this column, I'll briefly introduce the Echo2 framework and then provide a short comparison between GWT and Echo2, highlighting the strengths and drawbacks of the two approaches.

The Echo2 Framework

The Echo2 framework provides a web-based platform offering rich-client levels of capability and maintainability. It's a re-engineering of the previous generation of the Echo framework to take advantage of AJAX in its new rendering engine.

Echo developers create applications using a component and event-based API that resembles a rich-client user interface toolkit (think Java Swing). A rendering engine then generates the AJAX-style code required to render the user interface to the client browser.

To bring the experience closer to the standard of a thicker client, Echo2 uses an extensive library of client-side JavaScript that extends the capabilities of the browser. The architecture aims to remove the need for the end developer to think about the management of HTML, HTTP, and JavaScript, CSS etc. Indeed, the developer is completely insulated from that side of the system.

For further details of the Echo family (including Echo1) see here; Echo2 is here; and for EchoPoint (a collection of web components which integrates with the Echo Web Framework), see here.

Both Echo and EchoPoint are open source. Echo is released as open source by a company called NextApp; while EchoPoint is a collaborative effort coordinated via SourceForge.

The programming model adopted by Echo is intentionally Swing-like (with tables and table models and buttons and action listeners etc.) so that Swing developers should be able to move to Echo with the minimum of problems.

As an example, see the following very simple HelloWorld style Echo application. This application is comprised of two classes. The first is the HelloWorldServlet class. This class acts as an entry point for an Echo2 application. In essence, it's a standard factory that creates a new instance of the main Echo2 application - in the example; this is implemented by the HelloWorldApp class.

package com.reg.echo.hello;

import nextapp.echo2.app.ApplicationInstance;
import nextapp.echo2.webcontainer.WebContainerServlet;

public class HelloWorldServlet extends WebContainerServlet { 
        public ApplicationInstance newApplicationInstance() { 
                return new HelloWorldApp(); 
        } 
}

The main HelloWorldApp class is presented below:

package com.reg.echo.hello;

import nextapp.echo2.app.ApplicationInstance;
import nextapp.echo2.app.Button;
import nextapp.echo2.app.ContentPane;
import nextapp.echo2.app.Extent;
import nextapp.echo2.app.Label;
import nextapp.echo2.app.SplitPane;
import nextapp.echo2.app.Window;
import nextapp.echo2.app.event.ActionEvent;
import nextapp.echo2.app.event.ActionListener;

public class HelloWorldApp extends ApplicationInstance { 
        private Label label = null;
        public Window init() { 
                Window window = new Window(); 
                SplitPane pane = new     
                       SplitPane(SplitPane.ORIENTATION_HORIZONTAL, 
                                                       new Extent(215));
            pane.setStyleName("DefaultResizable");
                ContentPane contentPane = new ContentPane(); 
                contentPane.add(pane);
                window.setContent(contentPane); 
                label = new Label("Hello World"); 
                Button button = new Button("Next");
                button.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                                if (label.getText().equals("Hello World")) {
                            label.setText("Hello Echo World");
                                } else {
                                    label.setText("Hello World");
                                }
            }
        });
                pane.add(label);
                pane.add(button);
                
                
            return window; 
        } 
}