Recent Ajax Framework Releases/Developments

Some noteworthy Ajax Framework releases have come out in the last few weeks, along with some other news of interest:

  • Ext JS 2.1 and Ext GWT 1.0 Beta - Better performance, new Slider, StatusBar components. REST support (support for other HTTP methods beyond POST and GET). The Ext GWT 1.0 Beta consummates the love affair between GWT (Google Web Toolkit) and Ext that was started by gwt-ext and MyGWT, but provides the comfort of knowing that it is supported by the Ext JS folks. Note: Ext GWT is pure GWT, not an Ext JS wrapper.
  • Dojo 1.1 - First off, API compatibility between 1.0 and 1.1. Unified timing loop (ala Scriptaculous) for animation effects, with increased performance. Syntactic improvements to dojo.query. Unification of XHR functionality into dojo.xhr() function.
  • Backbase Enterprise Ajax 4.2 - Backbase has been in the commercial framework game longer than almost anyone. Among the new features: hierarchical data bindings and improved performance. If you've wanted data binding for tree widgets, have a look.
  • Google Search, Feed and Translation API - I opined a while back that Google discontinued their SOAP search API because they didn't want people reordering or otherwise manipulating their search results. Looking at the terms of use of the new REST service, you can see that this continues to be a concern:  You agree that you will not, and you will not permit your users or other third parties to: (a) modify or replace the text, images, or other content of the Google Search Results, including by (i) changing the order in which the Google Search Results appear...
  • Google App Engine - it only runs Python apps right now, and it's a preview release available to a select few, but you can already see that this is Google's challenge to Amazon's EC2 compute cloud. In at most a year, unless you are security sensitive -- health care, financial services -- or running on Windows, you won't be building and maintaining data centers. The capital requirements for launching sophisticated and scalable online services is about to change.
  • Echo3 (beta) - it's getting close. Superior performance to Echo2. Easier development of new components. Automatic serialization of objects between client and server. All HTML rendering now done on client. Overall the JavaScript client code is now of a design quality on par with the server code.

Lots of exciting developments for Ajax developers and Web 2.0 entrepreneurs. I, for one, can't wait to see how the Google App Engine compares to EC2 for deploying and scaling Facebook applications.


Technorati Tags: , , , , , , ,

Server-side Ajax Framework: IT Mill Toolkit 5, now with GWT

I've long been a proponent of server-side Ajax frameworks -- frameworks that store state on the server and use an Ajax engine in the browser to drive the display. The advantages: state and control logic stay on the server, so security compromises that exploit client-side state and logic are more difficult to pull off; developers can work in one language and, for the most part, ignore the fact they are writing a web application. The disadvantages: the server retains a large amount of state, so scaling your application can be problematic.

There's one other large disadvantage to these open source server-side frameworks: for every 100 Java developers who use the framework, there is only 1 of them that can do serious JavaScript development. That means that the lifeblood of these frameworks -- the development of new and cool JavaScript widgets -- is sluggish at best. That has certainly been the case with the best known 3 frameworks: Echo2, ZK and ThinWire (though ZK does wrap a number of Ajax widget libraries, such as Dojo).

Continue reading "Server-side Ajax Framework: IT Mill Toolkit 5, now with GWT" »

Echo3 Update: SVN, Wiki, Forms, Builds

Echo3 is showing a few more signs of life. Since my update last month on some early details of Echo3, the pace has picked up. No alpha release, but already there are two forums, one especially for folks looking to contribute to Echo3 development. Also, a few other things worth mentioning about Echo3:

  • The SVN repository can be found at svn://svn.nextapp.com/echo3/trunk (Echo3Extras are at svn://svn.nextapp.com/echo3extras/trunk).
  • If you just want the binaries (or binaries with source), the Echo3Go project is handy.
  • Initial performance numbers of Echo2 vs Echo3 show a more than 2x improvement in performance.

Further, a more detailed description of the new features, design principles and ideas behind Echo3 can be found on the wiki. Two items that are especially interesting for those looking to write their own components:

  • Automatic Serialization: Data objects sent between client and server can be automatically serialized between Java, XML, and JavaScript. The serialization architecture is extensible--serialization code for new object types may be added by the developer.
  • Simplified Client/Server Synchronization Peers: Serializing components and commands between client and server is performed automatically using the built-in serialization architecture. The component developer only need specify which properties should be sent (for components, all local style properties are automatically sent).

Serializing and deserializing data between client and server can be one of the more timeconsuming and error prone parts of developing Ajax apps. Packaging this into the framework with improve productivity at the very least. Technorati Tags: , ,

Details Emerge on Echo3

Some hopeful news on Echo3:

  • First, it is close to a release.
  • Second, there are more developers working on it.
  • Next, they have a new web container architecture:

In Echo2, we used the client as a remote “canvas”, upon which to “render” the state of an application that was running on a server. We sometimes did this by sending down blocks of XHTML code, instructing the client to add the new code to its DOM. We sometimes did this by sending XML directives that would invoke JavaScript code to render an HTML representation of a component on the client. In both cases, the client did not have any real information about what components were being rendered to it. It was simply used as a display.

[...]

With Echo3, the client gets smart. The first step was to create a version of Echo that ran entirely on the client, that is, a JavaScript version of Echo. This has been done to such an extent that, if desired, Echo 3.0 applications can be developed in client-side JavaScript without the need for a server at all (this topic will be discussed at length later).

The mission of Echo 3.x is still to enable advanced web-based application development in server-side Java code, just as it was with 2.x. Just like in 2.x, the developer is not required to write any client-side JavaScript. From the end-developer's perspective, this still works in 3.x in the same way it did with 2.x. You still write server-side, object-oriented and event-driven Java code, and the application state magically appears on the client. Behind the scenes though, the process by which application state is synchronized between the client and server is quite a bit different.

In Echo3, we serialize the state of an application between client and server. As we now have the application framework running on the client as well, this is quite easy to do.


As another poster observed, it should be possible to write Echo3 apps in other languages besides Java on the server side, plus it looks like writing components will be much simplified.

I'm still waiting to hear, though, how the community will be able to contribute to Echo3, rather than the current wandering wiki/forum zip file.

Time to update and extend the tutorial.


Technorati Tags: , ,

Aejaks 0.5 Integrates Echo2Extras

Aejaks, a Tcl/Tk style framework built on top of Echo2, has a new version out: 0.5, now considered Beta. What's in the new release?

  • Echo2 Extras widgets - MenuBar, Drag/Drop, TabPane, TransitionPane, etc.
  • Echo2 Chart widget
  • Echo2 FileTransfer widget & Download command
  • TaskQueue command - update widgets asynchronously
  • Nuvola icon set -3,700+ high quality icons ready to use
  • Updated widget_tour demo to show off all new widgets
  • Download packages now split between exe and src; separate war file can also be downloaded which runs the widget_tour demo.

Check out the project news page and the 0.5 CHANGELOG.


Technorati Tags: , , , ,

IDE Watch: Echo2 Module for NetBeans

We can see the beginnings of IDE support for Echo2 in NetBeans. This isn't close to the commercial plugin for Eclipse provided by NextApp, which, among other things, provides a widget tree and property editor that eases UI assembly. But the nbecho2support module does a couple of useful things for you. First, it will create an Echo2 webapp project for you with Echo2, Echo2Extras and the EchoPointNG libraries already included. Also, the web.xml file is already configured (though you will have to edit the default index.jsp to redirect to the /app url).

The one Echo2 specific filetype that can be created is the Echo2 style sheet, default to blank. So, definitely a useful module for those who want to work with NetBeans, with plenty of room for improvement.



Technorati Tags: , ,

Google Maps Component for Echo2

Just stumbled across this not quite ready Google Maps component for Echo2 over at Sourceforge. Hacim Bengalis over at his blog has taken this work and presents the code changes necessary to getting it to work with Echo2. Basically, he registers his own service (i.e. the stuff that gets run at start time for an Echo2 session, as I recall) that injects the Google Maps Javascript include into the page.

    /* add google maps api */
    baseDoc.addJavaScriptInclude("js/googleload.js");

If you read French, then this fellow claims to have done it without having to register his own services, i.e. with a stock Echo2.

The solution use the component HttpPaneEx from EchoPointNG (I guess this is standard library for most Echo2 users). This component creates an HTML Iframe in which you can display any HTML pages : even one using GoogleMaps. Next, you need to interact with it. The trick is to use method enqueueCommand and JavaScriptInclude and JavaScriptEval object from Echo2 to trigger javascript from Echo2.


I recall that when I tried this with Echo2 2.0.x, I had issues with the Echo2 client engine capturing events and making the Google maps component do weird things. His tutorial looks extensive; anybody feel up to translating some French?

Technorati Tags: , ,

Informagen Echo2 Component Library

Will Gilbert has contributed a handful of validating form field components. Take RegExTextField, for instance. It will take a regex and, surprise, validate the input against it. Maybe not earth shattering, but handy nonetheless.


Technorati Tags: , ,

Another Echo2 Sample App

Kenneth Riggio has put together an Echo2 sample app -- a single player Blackjack game.

He was kind enough to put up his source code and even gave a hat tip to my getting started tutorial.

Technorati Tags: , , ,

Some tidbits about Echo3

Tod Liebeck dropped some tantalizing hints on the future direction of Echo2. First, it won't be Echo2, but Echo3! Sounds like the development of custom components will be a touch easier too.

The next version isn't 2.2, it's worth of a full version number change. We're almost ready to do the initial announcement on this one. The Echo 2.x method of rendering component state to the client is all gone, component state is automatically serialized to the client for you (and changed properties on the client are automatically serialized back).

Another result of the Echo2/Cooee fork? You decide. Technorati Tags: , ,

Echo2/Cooee Split Bears Some Fruit

Looks like the pressure from the Cooee open source split has already resulted in some action. After many, many months of user grousing, Tod Liebeck of NextApp has just announced the launch of a bug tracker for Echo2. It's Mantis (not my favorite bug tracker -- personally I prefer JIRA), which is better than nothing.

A bug tracker is long overdo. Let's hope that other open source best practices start to appear, so that community involvement is boosted and these bugs get fixed.



Technorati Tags: , ,

Cooee - Branch of Echo2 Project

I've thought for a while now that Echo2 wasn't really working as an Open Source project; I even have a couple of posts laying out some of the reasons that Echo2 was in danger of losing out to other, inferior frameworks all for a lack of organization and activity. Ultimately I didn't post them because I didn't want to undercut what I considered to be an otherwise excellent framework. But it's not surprising that someone else has felt the same way and taken action to rectify the situation.

Cooee, a fork of the Echo2 project, aims to make community participation much easier. From the FAQ:

What we're doing is trying to provide a much more open environment to stimulate the growth and acceptance of Echo2 / Cooee. We've spent a lot of time making sure that everything that happens as part of the Cooee project can directly benefit the work of Nextapp and other projects like EchoPointNG. For instance, all changes to the code base are tracked through JIRA, and marked appropriately in the commit comments. This means applying the changes / fixes we make back to Echo / EchoPointNG are exceptionally easy.  To put it simply - we want to work with Echo and maintain as much API compatibility as possible.  Not work against it.

The project has all the usual Open Source fixings: JIRA (bug reports), Confluence (wiki), Bamboo (continuous integration), forum, and Fisheye. It consolidates the several different jar files of Echo2, Extras and EchopointNG into a single jar file. A few other Echo2 related projects are also maintained on the site. It's early days yet, so the project doesn't seem to have a lot of momentum, but from the public roadmap to JIRA, they seem to be doing a few things right. Ultimately their success will depend on their ability to recruit other developers. The same is true, by the way, for the main Echo2 project.

Open source forks are not always a good thing. Sometimes an already small community gets split so far that the projects die of neglect. Of course Echo2 has  been so moribund for the last few months that I think this particular fork is a good thing. The folks from NextApp seem to have gotten a kick in the pants as a result of this development. I've never seen them this engaged in the forum.

Let the competition begin.

Echo2Sudoku Fixed, Finished and Prettied Up

echo2sudoku2.PNG

I had a few bugs in the Sudoku library that was causing the app to produce puzzles with non-unique solutions. I've also moved to using disabled TextField's and simply changing the CSS styles on squares to avoid having the browser re-render the application. Now, at long last, I'm ready to finish the tutorial.


Technorati : , , ,

Coming Up - The Next Echo2 Tutorial

echo2sudoku.PNG

I've been hard at work on the next installment of my Echo2 tutorial series, which has been stalled at installment #1 (sorry about that). I decided that a nice, simple Sudoku program might be just the ticket for installment #2. Saturday was spent spelunking around, looking for some reusable Java Sudoku code. That was a bust. Everyone had their generator and solver glued to a GUI, and the actual generator code was fuggly. So the rest of Saturday was spent implementing an efficient puzzle generator.

My all too brief Easter Sunday was spent slapping the Sudoku library from Saturday into an Echo2 app. I didn't get all the way there. Right now, the application generates and displays the puzzles and will toggle back and forth between the solution view. You can try it out here.

Note that this Sudoku puzzle generator produces "hard" puzzles with minimal constraints, i.e. blanking out any of the filled in squares will produce a puzzle with more than one solution. Just a warning.

BTW, the toggling back and forth between the solution and puzzle view takes a bit of time (lots of components being updated). Using something like EPNG's StackedPaneEx (see the April 4th announcement of new goodies in the Echo2 forums) would speed things up quite a bit:

This is a Pane that can contain an number of child components (including other Panes) but ONLY ONE can is visible at a time. The others may however be rendered on the client (lazy is default) and when you pop the stack of visible children, the previous top child is hidden and the one under is in the stack is shown.

This is useful for "descending" in the UI. Say you have a form, that the user selects a record and you show a related subform of data. With StackedPaneEx, you can push the subform onto the stack, have it display and then at the click of a "return" button, display the top level form without re-rendering it.

This performance issue is actually a good lesson in the limits of GUI frameworks (Ajax libraries that sit on the browser side and manipulate the DOM are also affected): if you have to represent hundreds or even thousands of objects or widgets in a GUI, the overhead of the component heirarchy and event observer/observable plumbing makes doing this directly using first-class GUI objects problematic. One approach would involve rendering the widgets graphically (SVG?), and translating mouse clicks on the graphic into model events through pixel location to object mapping. As an example, think of an application that allows patrons to buy stadium tickets. You don't want to render every one of the 20,000 available seats, so instead you allow the patrons to drag a box across a graphic of the stadium and display a corresponding zoom box with a few dozen seats.

OK, enough digression. I'll try and get this tutorial done and polished up by the end of the week, but these tutorials always end up taking a long time to produce; to teach you have to remove all confusion and to be clear and brief at the same time is hard work.

Technorati : , ,

Wt - Another Server-Side Ajax Framework, This Time in C++

We've had two server-side Ajax frameworks for a while now -- Echo2 and ZK -- that tranform web development into desktop GUI development. Now add a third: Wt, or "Witty" as it's known (here for tutorial), is a C++ framework. From the tutorial above, a classic manifesto of the server-side Ajax framework:

Because the API of Wt makes abstraction of the underlying technologies (Forms, JavaScript or AJAX), Wt chooses how to communicate with the web browser depending on technology support in the browser. The responsibility for making the application work in the jungle of web browsers is therefore also transferred from the application developers to the library developers.

The framework has most of the usual widgets and behaviors, including a tree widget and drag and drop.

witty.PNG

Now my last serious C++ project was in institutional mutual fund trading system back in 1998, so I'm as rusty as Davey Jones' belt buckle when it comes to that language. To top it all off, I have Java and C# running through my brain, so I'm likely to introduce illigitimate syntax from these close cousins; but I know there are still plenty of talented and experienced programmers out there working with C++. More importantly, three frameworks officially makes for a trend, which means server-side component GUI frameworks are officially a "good idea."

    Technorati : , , , , , ,

So You Want to Convert Your Desktop App to Ajax

Change in all things is sweet. -- Aristotle

You work for company A whose bread and butter is a desktop GUI application that it provides to it's customers for a monthly fee and via something like the Citrix Presentation Server. Life is good, but it's time for work to start on the next version and a manager drops the word "Ajax" in a meeting.

You get nervous. Ajax means web and from what you've heard from your buddies in marketing who help to run the web site, web development is different and hard. You've got a browser, three or four different languages, threads, cats and dogs living together. You start to update your resume. But where does a desktop developer go when all the world is going web?

You call up a friend at company B. Company B also has a desktop GUI application that it provides to it's customers for a monthly fee via something like the Citrix Presentation Server. You meet for lunch ("Uh, when you say "next door", do you mean Chili's or Flingers?") and start to cry in your beer.

"Dude," says your friend, "we're moving to Ajax too, and it's way cool and easy."

You fall out of your chair.

Now take a deep breath and realize that...

Your Desktop GUI Skills are More Valuable than Ever

I've written reams of posts on why component GUI development is better than the typical web development approach (Cognitive Load and the Superiority of Server-Side Ajax GUI Frameworks is probably the most cerebral), but the guys over at the ZK framework put it better than I can:

In 1994, we developed an infrastructure, inspired by zApp and OWL, for developing an accounting system for Windows. In 2000, we developed another infrastructure, inspired by Struct and WebWorks, for developing another accounting system for J2EE. After coaching and watching the development of both systems, we found that not only the Web edition required much higher programming skills and prerequisites, but also its total cost is four times more than the client/server one. Worse of all, the user experiences reminded us the age of green terminals, though the look, after decorating with proper images and CSS, is modern and fresh.

Four times as expensive seems a touch high to me, but I've seen worse. Certainly twice as expensive wouldn't be a stretch. Now we've come a long way since I wrote my first CGI script back in 1993 (I think I used /bin/sh), but the difficulties of juggling browser and server contexts and languages in your head at the same time has gotten worse, not better. There's just a lot more technology of which to keep track.

Face it, developing code using the event driven component GUI model is just more efficient and, yes, pleasant. And that's great for you because that is the skill set you already have.

Refreshed from your lunch (the calamari was excellent) and armed with your friend's helpful suggestions, you run back to the office and scan your calendar for the next product planning meeting. There's one that afternoon. You bring a new yellow legal pad, a sharp pencil and an eager expression. When the manager opens up the floor to suggestions, you're hand shoots up and you yelp, "Echo Two!"

"Echo what?" says the manager.

"Echo2," you say, catching your breath. "It's a component GUI framework for writing Ajax applications. We would write the new application pretty much like we write the current application, except that the result would be an Ajax application and run on the web. And we wouldn't have to fire anybody and hire all new expensive programmers."

Your manager looks impressed. The other developers shoot you envious glances, especially the guy with the copy of Real-World Ajax tucked under his arm.

So, crisis averted, right? The new version is coming along and it's all milk and honey while you write the same type of code as before, right? Well, not quite. There are still some differences between your prized desktop app and the web app you will soon come to love. But never fear. You are about to be enlightened as to

Things You Should Keep In Mind When Moving from the Desktop to the Webtop

This list could be endless, but let me focus on those things that I've found to be particularly salient in desktop to webtop projects.

  • Is your old application concurrent (possibly having two or more actors -- users, threads, systems -- operating on the same data), i.e. is it client/server or is it stand alone?
  • Are you going to want any specialized or custom components for your application? Does your old application make use of lots of third-party components and widgets?
  • Bandwidth: even a LAN tends to be slower than your computer's data bus.
  • The component GUI model is so nice, but what if something blows up on the browser? Help!

I could go on, but these are the biggies. Let's take on these issues one by one.

Concurrency

The easiest thing to do with your application in terms of concurrency is to leave it alone. If it was a single user, one-thing-at-a-time type of application, let it be that kind of web application. If it was a client/server app that already handles concurrency, reuse your data model, your business and persistence logic as much as you can.

The hard part comes when you want to make the transition from a non-concurrent to concurrent app. If you've got a data model that looks pretty standard, i.e. related entities represented as one or more tables in an RDBMS, you can use tried and true design techniques (see ORM, Spring, Hibernate, optimistic locking, pessimistic locking, etc.) to transition your app. If, on the other hand, your app deals with a complex document, something that looks more like a tree, an acyclic directed graph or even a cyclic directed graph (think word processing doc, UML diagram, etc.), then you've got trouble.

You would like to be able to provide atomic transactions on these hierarchical structures, something which is still an active area of research. There's also the issue of document validation, i.e. is it still valid to add a footnote to a document if the paragraph it was attached to has been removed. Finally, there is the problem of presenting all of this complex hierarchical collaboration data to the user in a way they can make sense of. The truth is that collaboration with complex documents or information structures is something with which everyone struggles. No one has gotten it right as yet.

If you must introduce concurrent features under these circumstances, go with add-ons instead: shared bookmarks, a comment system, a shared whiteboard or clipboard. Or try coarse-grained locking of document sections.

Specialized Components

Just as with traditional component GUI frameworks, with Echo2 you can compose new, more complex components out of existing components. Three drop down lists can become a date picker, for example. But sometimes what you need is just not in the toolbox.

In the case of Swing or AWT you would dust off the low level pixel painting API and have at it. In the case of Echo2 you're going to have to dust off something you don't already have: a knowledge of Javascript, CSS and XHTML (and HTTP). You didn't think you would be able to get away from that stuff entirely, did you? The good news is that you will only need a few of these highly skilled Java/Javascript/CSS/XHTML widget designers and, once they've developed their excellent reusable widget, it'll be at least another day before another requirement forces them back to the keyboard.

Bandwidth

Your desktop GUI was pushing things to the screen; your Ajax webapp will be pushing things to a browser. Besides network connectivity being slower than intra computer connectivity, the two operations are fundamentally different. Take for example the case of a list of 5000 emails that are displayed in a scrolling table. At any one time, perhaps only a dozen emails will be displayed at once. In the case of the desktop GUI, only a small area of pixels need to be updated as you scroll through the list. In the case of an Ajax application, you will need to send the data for those 5000 messages to the browser, either all at once or incrementally as they scroll into view. This data is then inserted into the document object model (DOM) of the web page. This can be an expensive operation and if not carefully thought through can make certain operations awkward or impossible.

Take for example the Yahoo! Mail Ajax GUI. It incrementally loads emails as you scroll through the list. It's slow. And if you want to delete all of the emails in the list, you have to painstakingly scroll through all of the emails so that they load. Otherwise you can't select the whole list and delete them. That's behavior very different from that of a desktop app.

When Things Go Wrong

Things do occasionally go wrong in Echo2/Ajax land, and when they do they can be very hard to diagnose. The nice fiction of a Java-only development environment breaks down and you have to trace through your Java, the client-side Javascript engine and your components, the DOM of the application page, the CSS, etc. When this happens, bring one of those widget developers to the party. You'll use your IDE's debugger, tools like Firebug and Venkman, and the built in message debugging support in Echo2, all to track down and eliminate your bugs.

All I can say is welcome to the world of web development. This is what we go through all the time with or without Echo2.

Conclusion

We've looked at one way of developing Ajax applications with Echo2 that will let you reuse most of your desktop GUI development skills. Echo2 may not be your cup of tea. There are other server-side frameworks, such as ZK, and there are client-side frameworks like GWT and Tibco GI that have things to recommend them for the component GUI developer.

Also, I haven't even touched on the .NET side of the house. That will be the subject of a separate post.

Last, it would have been impractical to touch on all the differences between Ajax and desktop apps. For some ideas, have a look at Michael Mahemoff's excellent Ajax Patterns wiki or, better yet, buy his book.

Technorati : , ,

Aejaks - Tcl/Tk Style Framework Built on Echo2

For those Ajax cowboys out there who pine for the power and simplicity of Tcl/Tk, there is good news for you: Aejaks lets you write Ajax apps using Tcl. The widget model is inspired by that of Tk, but is not compatible with it.

#####################################################################################
# showCode - create a new window, show the code from the code array
proc showCode {name} {
    global code
    set w .split.s2.win
    if {[info exists ::$w.code_$name]} {
 return
    }
    WindowPane $w.code_$name -title "$name Code" -width 600 -height 600
    ContentPane $w.code_$name.c -background white -insets 10
    Pack $w.code_$name.c  -insets {10 10 10 10} -border {4 black solid}
    TextArea $w.code_$name.c.t -text $code($name) -foreground black -background white -width 800 -height 600  -border {3 black groove}
    Pack $w.code_$name.c.t 
    Pack $w.code_$name 
}

aejaks.png

It uses Jacl, a Java implementation of the Tcl language and is implemented on top of another framework we are familiar with: Echo2.

Echo2 is a Java based windowing toolkit for building Ajax-enable applications. Aejaks translates most of the Echo2 Java objects into Tcl objects, but provides many shortcut features, such as anonymous object construction for attribute-type objects.

There is a console included in the source that allows you to do some interactive scripting with Tcl, otherwise it looks like you have to compile the Tcl into an app before deploying.

This is another sign that 2007 will be a year of intermediate forms, i.e. frameworks the compose and build on other frameworks. Wait until 2008 until we see something truly new.

Technorati : , , ,

Echo2 Needs a Better Way for Third Party's to Contribute

There are two big dogs in the world of Echo2:

  1. NextApp (with Echo2 creator Tod Liebeck) which releases Echo2, Echo2Studio (Eclipse Plugin) and Echo2Extras (more components).
  2. EchopointNG (run by Brad Baker), a collection of more Echo2 components.

Aside from the fact that EchopointNG needs a real project web site of it's own instead of the Echo 1 stuff that's on there now, there is no easy way for developers to contribute components to Echo2. Right now you have to go crawling around the forums, looking for contributions in zip files. Someone should put together a contribution repository. I know that organizing and maintaining such a repository is no small thing, but components are the lifeblood of any component GUI. If Echo2 doesn't keep up with GWT, ZK, Tibco and all the rest, it won't matter how elegant its design, etc. Developers will go where the widgets are and two projects won't do the trick.

Maybe I need to step up to the plate. But I'd hate to have to drop it for lack of time. I need to think about this some more.

In the meantime, a new Beta 5 release of Echo2, Echo2Extras and Echo2Studio is out. A few fixes, many around IE6, and opacity-based fades for the TransitionPane component. The RC's for Echo2 are close.

Technorati : , , ,

Application Development with Echo2 plus SOA

Mathew Brooks of RDF Group has published a summary of his experiences in developing mform -- an Ajax-enabled mortgage application -- using the Echo2 platform. Although fairly high level, the post is thought provoking and doesn't just focus just on Ajax. With regard to best practices in using Echo2, he writes:

Whilst using echo 2 we discovered that whilst it was the most advanced tool for the job (at least when we started, which was before GWTcame out) we did find that we had to undertake the following:

  • Adjust some of the java script in widget peers where it was not quite performing as we expected
  • Subclass the echo 2 servlet to ensure that:
    • We can trap non java script type clients and present a "non javascript" type version of the page
    • We can present a more polished start up page rather than the ||| presented as default by echo 2
  • Some post back functionality does not work well with IE either under load or restricted bandwidth. Due to the way that IE polls for the post back other events on the browser were being missed.
  • Develop our own widgets where necessary if there was no suitable one available from echo or echopointNG

mform.pngBeyond Echo2, the application makes use of ServiceMix (the Open Source ESB), Spring, Hibernate and EJB3. It also integrates with a CMS -- Hippo -- for conetent management. I haven't used ServiceMix myself, but I have used the Mule ESB myself (it has much better docs and tutorials, IMHO), and beyond the SOA help it provides, I've found it's support for FutureTask very helpful for some of the asynchronous processing you see more of in Ajax apps.

Mathew's analysis goes well beyond just Ajax, of course, with some thoughts on how to avoid the Anaemic Data Model antipattern, among other things.

Technorati : ,

Pre Thanksgiving Ajax Roundup

Just a few bits of news heading into the Thanksgiving Holiday (for non-American readers, this is the holiday where our inlaws try to kill us by overfeeding us and family members take up old feuds with one another while watching American football on TV):

  • The HSE (Hibernate, Spring, Echo2) framework continues to take strides in it's development with it's Beta 2 release. Lots of reorganization and cleanup of the code. Plenty of good stuff for the definition and management of screens, etc. He's looking for volunteers, so if you're interested, drop him a line.
  • The folks at the OpenJACOB online workflow editor have been developing a Javascript 2D diagraming library. In a brief look through the code, it doesn't seem to be based on any other frameworks -- which can be a good thing or a bad thing -- but it seems to be very flexible, more of a toolkit for building visio-like interfaces than a widget. It's still rough at the moment, but could be adapted into other projects.
  • jacob.jpg
  • Debasish has penned a thoughtful blog entry on developing with Echo2 -- in short, he doesn't like writing 'naked Swing' and doesn't want to do the same in Echo2. He has a bunch of good suggestions and provocative thoughts in his post. I think one of the easier ones to implement would be a port of the Groovy SwingBuilder to Echo2. I've always liked SwixML for Swing, but it hasn't taken off as much as Groovy for this stuff.

Happy Thanksgiving, everyone. I'm off to enjoy the curried goat and turkey.

Technorati : , , , , , ,

Adding a Timer Component to Echo2

One of the things I really like about ZK is that it has a timer component that you can add or remove from a page in order to enable "async" Ajax events in the application. It's a useful abstraction that hides much of the messiness of async update.

<window title="Timer demo" border="normal">
   <label id="now"/><timer id="timer" delay="1000" repeats="true"
      onTimer="now.setValue(new Date().toString())"/>
   <separator bar="true"/>
   <button label="Stops timer" onClick="timer.stop()"/>
   <button label="Starts timer" onClick="timer.start()"/>
</window>

Echo2 also has a facility for performing async updates, but it's much more of a roll your own type of facility. I've been wrestling with how to add a timer component to Echo2.

The basic idea is to override the ApplicationInstance as detailed here to allow adding in periodic update tasks. Next, every time a component is registered or unregistered with the ApplicationInstance -- i.e. added or removed from the component heirarchy -- it is added or removed from the periodic update tasks. Fortunately, there are two Echo2 Component lifecycle methods which look like they will work: init() and dispose(). These get called when components get added or removed from a registered heirarchy.

It would be nice if, beyond these two methods, we had something like Swing's HeirarchyEvent and HeirarchyEventListener that allowed us to pass other kinds of events to a heirarchy. Well, the juices are starting to flow again for me on Echo2. I guess it's time to get back to part 2 of the tutorial series.

Technorati : , ,

Widget Watch - BeanView - Forms and Validation for Echo2

Echo2 has been described as Swing for Ajax, and its component model does have a passing similarity with the Java desktop GUI. So it's not surprising to see a component come out for both Echo2 and Swing at the same time: BeanView 1.1, which was released yesterday. What is BeanView?

BeanView is a Java library - a system for seamlessly rendering a JavaBean to a form and back.

In technical terms, it relies on the information obtained from reflection of the JavaBean to generate forms and update the beans from these forms - so, if you create a JavaBean with a method get/setFirstName(String in), BeanView will automatically generate the form with a textfield to enter a "First Name". Supported features include:

  • Per visual widget error reporting
  • Support for validation (both a variety of built-in validation types and an easy customization system)
  • Support for a wide range of built-in data types
  • Support for complex data models, such a mapping a collection to multiple selection list box
  • Automatic configuration based on JavaBean meta-data (for example, if a JavaBean declares a get/setFoo(int input) method, will by default generate a text field with integer validation.

Invalid form data is indicated by a big red exclamation mark and a popup tooltip. Below you can see the Swing and Echo2 versions side-by-side.

beanview.jpg

The latest release of Echo2 also allows you to explicitly set the render id's used to identify components, i.e. the DOM id attribute. This means you can test your BeanView forms with an automated test tool like Selenium.

Technorati : , , ,

Which Echo2 Widget to Build?

In order to build an Echo2 component in the traditional way before converting it into GWT, I first need to pick a widget to build. I'd like to build one that hasn't been done yet. I have one in mind: and edit-in-place label. The basic idea is that you can click on a bit of static text and have it turn into an input field with submit and cancel buttons. You can see the idea and an example of how to do it with prototype.js described here. Nothing too earth shattering, but useful nonetheless.

To see if this has already been done in Echo2, we have to look at five sources of components:

  1. Echo2 - the base set of components. Lots of interesting items that you can see at work in this demo app.
  2. Echo2Extras - and extra set of components distributed by NextApp -- AccordionPane, BorderPane, ColorSelect, CalendarSelect, etc.
  3. Echo2Chart - charting widgets based on JFreeChart.
  4. EchopointNG - the definitive collection of third party Echo2 components, including a tree widget. The docs on this are a little iffy, so you have to piece it together from the NG demo app and the Javadoc. Trees, expanding boxes, RichTextArea. Good stuff, but no edit-in-place.
  5. Echo2 Contrib - the mysterious set of components that lives as a set of zip files in the Echo2 developers forum. Home of drag-and-drop, etc. Hard to say if it's in there, but I can't find it. BTW, someone should take ownership of this. I'd be happy to, if noone else has.

No edit-in-place to be found.

So the edit-in-place component looks like a good candidate. Unfortunately, the power of Echo2 gets in the way here. There is a way of building an edit-in-place component just by composing existing Echo2 components. It didn't take me more than 10 minutes to put the following demo together (click on the name, edit, save or cancel). There is one drawback, however: clicking on the label initiaties a roundtrip to the server. Ideally we only want a roundtrip if there is a listener registered on the click. So a more efficient version of the edit-in-place widget is still a good idea.

OK, next week we take a shot at a first version of this component.

Technorati : , , ,

Built-in Debugging Tool in Echo2

One of the nicer things in the Echo2 framework is something that doesn't get mentioned a lot: a built-in debugging tool. Just add a "?debug" to the end of your application URL, and you get a pop-up like the one below. With it you can inspect the messages passing back and forth between the client and server, inspect the DOM, view platform details and errors, and so on.

echo2debug.jpg

You can always use tools like firebug to supplement what Echo2 offers, but this one you can take what you wherever you go -- IE, Firefox, Opera, Safari, etc.

Technorati : , ,

Echo2 Creator to Speak at JAOO Conference

Echo2 creator Tod Liebeck will be speaking at the JAOO conference in Aarhus, Denmark on October 3rd, 2006. (See here for the time and abstract.)

The 45-minute presentation will offer a brief introduction to Echo2, and a discussion of the architecture and its capabilities.

For those of you not in the know (like me until this moment), JAOO is a non-commercial, non-academic annual conference in Europe for Java and Object Oriented developers. It looks pretty cool. I just wish I had known about it ahead of time.

Technorati : ,

Writing Echo2 Components

As a prelude to trying to write some Echo2 components using GWT, I thought it would be wise to review the material on how to write Echo2 components in the first place. Why would you want to write a component when Echo2 gives you a nice level of abstraction with plenty of prebuilt components? Well, sometimes you need a special component that isn't provided by the framework or a new behavior in an existing component.

A word of warning: component development is like traditional web application development, i.e. you have to work with many different languages and it is much more expensive than developing in the single language context of Echo2. If you are going to do it, design your component to be as reusable and configurable as is practical.

The best place to start learning about writing components is Brad Baker's excellent three part tutorial over at the Echo2 Wiki.

  • Part 1 covers the basics of creating a simple static <HR> widget. You'll learn how to create a Java project for a custom Echo2 component and how to write HTML using the org.w3c.dom package.
  • Part 2 delves into how to create a component that can react to input, using some of the EchoPointNG components (of which Brad is the author) as examples. Here we see what Javascript needs to be written and how it is communicated to the client engine on the browser.
  • Part 3 gets into what Brad calls "the productivity problem," i.e. the fact that it takes at least 50% of development time to debug the Javascript of a component. He demonstrates static prototyping -- using XHTML and Javascript local files -- as a solution to this problem.

If I have any criticism of Brad's excellent tutorial, it is that I'd like to see him deal with the Echo2 client engine in a little more detail. (Still, in the Echo2 development universe, that may not be his job, but rather that of Echo2 creator Tod Liebeck.) Also, the code samples should probably be color coded, depending on whether they are Java or Javascript. Given the similarity in syntax, it is sometime difficult to tell what your are looking at, especially as you scroll back and forth to understand the integration between different layers.

A different tutorial can be found in this Echo2 forum post, though it seems to be a little out of date in terms of the framework's API. I always like to get as many perspectives as I can when adopting a new technology, so on the reading list it goes.

I'll see you next Monday with my first cut at a vanilla widget. I'm still undecided as to what sort of component to write. Something simple yet useful and not present in the current collection of Echo2 core and contributed components. If you have a suggestion, please let me know.

Technorati : , , ,

IDE's with Ajax Support

Back a few months ago or so, I put together a list of Java IDE's that supported Ajax. Since that time, Ajax support has been added to a few more IDE's, some IDE's on my list have been upgraded, and I've decided to add other languages beyond Java.

Of all the frameworks, GWT has seen quite a bit of growth, with two new eclipse plug-ins entering the list alongside a NetBeans project template. I've also added two Dreamweaver plug-ins, a natural given its long support over the years of rich interaction applications via JavaScript.

Zero Kode, the new visual designer for the ZK framework, joins Tibco GI as a browser-based IDE. Given that it requires a servlet container to run, it may not be suitable for anything beyond prototyping. Still, it shows how easy UI markup languages make the task of writing visual designers.

Before anyone objects, I am aware that there are other frameworks for .NET, Java and other languages. While a particular framework may be in principle supported by an IDE, unless a plug-in or IDE exists specifically for that framework, I have not included it in my matrix.


IDE Type Framework Languages License Comments
EchoStudio 2 Eclipse Plugin Echo2 Java Commercial Framework is open source. Eclipse plugin that allows you to build component trees, preview the UI, debug the application, etc. Not WYSIWYG, i.e. no drag and drop page layout.
Tibco GI Browser Based Tibco GI Javascript Commercial Free for development and publicly available web sites. Eats its own dogfood, i.e the IDE is implemented in itself and runs in IE. Is WYSIWIG and pretty slick.
Google GWT Command Line GWT Java Free Free to use for personal and commercial purposes. As for IDE integration, there's mostly just an Eclipse project generator and a "hosted mode" runtime. Being able to debug Javascript as Java in an IDE has to count for something, though, which is why I've included it.
Morfik WebOS AppsBuilder Custom IDE Morfiks Pascal, Java, C#, VB Commercial Freestanding IDE. Support several source languages including Pascal, Java, C# and VB. Drag-and-drop, WYSIWYG design. The behavior of the GUI designer is a little awkward. For example, right click doesn't give you the ability to cut and paste, etc., necessitating a roundtrip to the window's menu. Doesn't look like they have a whole lot of widgets in the evaluation version. A bunch of ther stuff thrown in, like DB integration, PDF reporting, etc.
JoyiStar Juno Custom IDE JoyiStar Java/JSP Commercial I apologize that I really haven't had a chance to look at is what in any detail. If anyone cares to contribute a review, I'd be happy to post it.
MyEclipse Eclipse Plugin J2EE Commercial With MyEclipse 4.x, the popular eclipse extension added support for JavaScript editing and debugging. With version 5.0, new features are making their way into MyEclipse, such as runtime DOM inspection, HTTP header monitoring, and cache control.
Zero Kode Browser Based ZK zul/Java Open Source IDE written in ZK that allows you to visually design a ZK application.
MX Ajax Toolbox Dreamweaver Plugin PHP Commercial Supports PHP_MySQL and PHP_ADODB on the server side.
Aptana Eclipse Plugin & Custom IDE Multiple Javascript/HTML/CSS Open Source Works with AFLAX, Dojo, MochiKit, Prototype, Rico, sript.aculo.us, Yahoo UI
Yet Another GWT Plugin Eclipse Plugin GWT Java Open Source Forked from Googlipse
Googlipse Eclipse Plugin GWT Java Open Source Wraps the create, run and compile for you.
VistaFei Eclipse Plugin