Archives

It seems I missed at least three IDE’s in my post from earlier this week.

• Rialto (Rich Internet Application Toolkit) has released the Rialto Studio, a browser-based visual designer similar to ZK’s Zero Kode, though a lot more polished.

• I covered Interakt’s Dreamweaver-based IDE, but I missed their JavaScript plug-in for Eclipse. There are plenty of open-source JavaScript editing plug-ins for Eclipse already, so I’m not sure as to the value of a commercial option.
• JSC is definitely a weird one. It claims to allow you to build Ajax and J2ME applications from C# code. It is supposed to work with any C# capable IDE, including Visual Studio. From their project page:

The compiler extracts CIL from a .net assembly. It filters out the classes which are marked with the ScriptAttribute. It selects the target language and emits the source.

Confused yet? There is a flash movie that demonstrates the workings of their tool, but they are going have to make it a whole lot easier for developers to understand and use their tool if they hope to have anyone adopt it.

  Technorati : ajax, ide

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	GWT	Java	Commercial	Supports visual design of UI.
GWT Plugin	IntelliJ	GWT	Java	Commercial	It does all of the messy setup of the GWT Eclipse project and application creation for you. It allows you to create several GWT entities via menus: Module, Entry Point, Remote Service (client and server side classes), and Serializable classes. The automatic creation of a Remote Service with it’s three files (shades of EJB) is especially nice.
Backbase Java	Eclipse Plugin	Backbase Engine/JSF	Java/JSP	Commercial	Plugin based on WTP. Includes new UI component creation wizard.
Backbase .NET	Visual Studio Plugin	Backbase Engine	C#, VB	Commercial	Under development
Backbase Dreamweaver	Dreamweaver Plugin	Backbase Engine		Commercial
Visual Studio		Atlas	C#, VB	Commercial
NetBeans GWT	Project Template	GWT	Java	Open Source
ThinkCap JX	Custom IDE	ThinkCap JX Framework	Java/JSP	Commercial	A first scan makes me think that this is mostly an afterthought in a J2EE suite. In fact, the documentation states that it is based on struts. The framework is now supposedly open source.
RadRails	Eclipse Plugin	Ruby on Rails	Ruby	Open Source	Can be combined with Aptana.
Oracle JDeveloper	Custom IDE	JSF	Java	Commercial	The support here seems somewhat rudimentary.
jMaki	Netbeans Plugin	JSP/JSF	Java/JSP	Open Source	This NetBeans 5.5 plug-in gives youdrag-and-drop insertion of jMaki components directly into your JSP pages.
Ajax Toolkit Framework	Eclipse Plugin		Javascript	Open Source	Open Source Eclipse Plugin. Really more of a toolkit for building other AJAX IDE plugins. Starts by combining Dojo and Zimbra Toolkit. Very early in it’s development. From the project docs: ATF enables support of DOM browsing and JavaScript debugging by using Mozilla XULrunner to embed the Mozilla browser component (Gecko) in the Eclipse framework.

If I’ve left out any IDE’s, and I am sure I have, or have made any mistakes or omissions, and I’m sure I’ve done that too, please don’t hesitate to drop me a line at ajax@pathf.com.

Technorati : ajax, echo2, eclipse, gwt, ide, netbeans, visual studio, zk

The Tibco folks like to point out that their IDE is written in their own framework. I’m not really all that enamored of the self-compiling, eat your own dogfood approach to IDE’s when your end product is a webapp. Call me old fashioned, but I like to write my code in a desktop IDE. Maybe that’s just a sign that my arteries are hardening and I’ll soon be standing on my lawn in my slippers and bathrobe cursing at those webapp IDE using whippersnappers.

Well, for good or ill, Tibco GI is no longer the only IDE that eats its own dogfood. ZK has a visual designer called Zero Kode, an IDE written in ZK that allows you to visually design a ZK application. From part I of the tutorial that accompanies the IDE:

The visual editor is just a web application – packed in a ‘*.war’ file’ – that can be launched on an application server. It provides a visual interface with a toolkit that holds all the visual components that the ZK framework has implemented so far and is designed to use all kinds of custom components as well. This means that a developer can add to the toolkit components that he/she has designed, as far as they are compliant with the framework’s protocol.

The developer drags-and-drops visual components on the active model, sets their properties (which are reflections of the corresponding Java class) and sets their events as well. Definitions of all the visual components found in the toolkit, are kept in an XML configuration file that can be edited by the developer in order to add, remove or re-order components. The developer can also load an existing ‘*.zul’ file and modify it.

When run locally in an instance of Tomcat it’s actually quite zippy. Still, you have to know your way around the ZK component heirarchy. Constructing tabbed panes and trees, for example, can be a bit of a pain. Some wizard functionality would be useful here. Also the property editor should probably be a part of a tabbed pane — instead of a popup — as you’ll find in Eclipse or Visual Studio. (To be really useful, make sure to set the session timeout to a large value. There’s nothing worse than having a design go puff because of a timeout.)

So, is it a toy or something useful? ZK zul files are pretty easy to write, which would argue for a verdict of toy, but I find the convenience of property and event handler editors quite useful. Altogether a promising start.

Technorati : ajax, ide, visual designer, zk

Now that we’re operating from a single page interface and not depending on the postback to handle user response expectations with the spinning browser icon and the hourglass, we’re rolling our own "pending" graphics. Along come AjaxLoad, a little application that will let you generate some animated "pending" gifs.

Technorati : ajax, animated gif, pending

Related Services: Ajax Rich Internet Applications, Custom Software Development

Aptana is a new IDE (embeded in Eclipse for now). If you already use Eclipse 3.2, you can just install the plugin from the update site: http://update.aptana.com/update/. Lots of good stuff: HTML, CSS, and Javascript code assist, etc. I’ve use it a bit and it seems likely to become a part of my development environment — lots of productivity enhancements. Now I can write twice the number of social bookmarking sites as before.

The documentation is also very strong. Just check out all of the tutorials for using Aptana with various AJAX client frameworks:

• Creating a new AJAX library project
• Enabling Code Assist to work with AFLAX
• Getting started with Aptana and AFLAX
• Getting started with Aptana and Dojo
• Getting started with Aptana and MochiKit
• Getting started with Aptana and Prototype
• Getting started with Aptana and Rico
• Getting started with Aptana and script.aculo.us
• Getting started with Aptana and Yahoo UI

None too shabby.

I’m working on some stuff to bring the GWT and other AJAX frameworks question — “how can I write widgets for framework X in GWT?” — full circle. In the meantime, I thought I’d point out two useful resources. First, GWT Site is a blog that tracks developments in the Google Web Toolkit world. If you don’t have time to scan through the discusion forum every day, it’s a good place to get your updates (other than here, of course ).

One of the things that caught my eye, of course, was Googlipse, the so-new-its-still-wet Eclipse plugin for working with GWT. Regular readers of this blog will know that I’ve been working on my own Eclipse plugin for GWT, slated for release some time in 2010. After getting over my disappointment at being scooped, I decided to try it out.

The download is a simple jar that you add to your Eclipse 3.2 plugins directory. From the quickstart doc:

Googlipse is implemented as a WTP Facet. When creating a new Dynamic Web Project, select Googlipse in the Project Facets page. If you already have a Dynamic Web Project, you can add Googlipse facet by selecting Project->Properties->Project Facets(Please make sure you don’t have gwt-user.jar in your classpath). In case you didn’t like Googlipse, you can remove the facet.

[snip]

You can open the RemoteService interface and add/change methods in it. You need to provide the implementation of those methods in RemoteServiceImpl class, but thanks to Googlipse, you don’t have to do anything in RemoteServiceAsync. Googlipse will automatically update the corresponding Async file whenever a RemoteService interface is changed.

The plugin simplifies creation of modules, creation of remote methods and handles launching and debugging in hosted mode. Since the your developing a a dynamic webapp, you can ship your GWT app in the end as a war. Best of all, it’s Open Source.

This is an old post that shows off a AJAX debugging tool written using Greasemonkey. It’s still an interesting idea, but what is perhaps most useful is the long trail of comments that make reference to all sorts of other useful tools such as LiveHTTPHeaders.

Ever since Laszlo Systems announced that they would be targeting DHTML as well as Flash, I’ve been peeking into their source repository from time to time, hoping to catch a glimpse of the elusive “Legals” (horrible name), the runtime that supports DHTML. Well, this past Thursday, on the Open Laszlo Project blog, they announced a milestone release of this mythical beast. From the entry:

Late last week, the OpenLaszlo project reached a huge milestone: release of the first source snapshot of our multiple-runtimes architecture, code named “Legals”. The purpose of this snapshot is to deliver infrastructure, tools, and architecture sufficient to allow broad community participation in the project.

We began Legals back in January because we felt it was finally time to invest in OpenLaszlo’s potential as a multi-runtime application framework. Adobe had released an initial beta of Flash 9 (then called Flash 8.5), and it was clear to us that it would be essentially an entirely new VM: new bytecode set, many improvements to the ActionScript language, and substantially revised APIs. In order to support Flash 9 we would need to build a new compiler backend and new runtime libraries.

If you’re viewing an lzx file from the OpenLaszlo server, you’ll need to tack a parameter onto it to get it to display the DHTML, i.e. test.lzx?lzr=dhtml.

So far, I’ve only been able to get it to display two text components. Adding in a button or anything else gives you a big nothing. Definitely, as it says, a work in progress on the DHTML side.

Via Ajaxian we get an object lesson in the dangers of exposing business logic in the browser:

Beau Hartshorne of Snipshot (formerly Pixoh) says “massive chunks” of Cellsea code are identical to Snipshot. “This is not an accidental inspiration. Check out the cropping code, the resizing code, and so on. We’ve also noticed that portions of their website are also stolen directly from ours … We are contributors to MochiKit open source project. However, the code in question is proprietary and was taken directly from out site.”

Can I say “I told you so?” I’ve blogged about the danger of Ajax and Leaky Business Logic before. What is the danger here and the lesson the be learned?

• Don’t put your crown jewels in the browser. See if you can’t lock a fair bit of your business logic on the server side by using a server-side component framework like Echo2 or ZK.
• If you’re going to deploy meaningful applications in Javascript, do what people have been doing with script source code for decades: obfuscate. You can do something simple like renaming all of your variable to one or two character names, or you can use a code generation framework like GWT or Morfik that produce unreadable code from the beginning. Be forewarned that code generators can be vulnerable to decompilers — in short, if someone knows how GWT generates it’s code, you could possibly reverse the process and produce the original source code.
• Build in anti-theft mechanisms. This could be something as simple as a method that checks to see that the url the application is running on is the correct one, otherwise display a nasty message. You could make this as tricky and complicated as you like, all the way to encrypting big chunks of code with the website url and only decrypting them at runtime.
• Hold out for “byte compiled” Javascript.

A combination of all of these may be what we end up with. I’m not sure I’d want to run any script in my browser, though, that I can’t understand. Still, you would hate to be the victim of code-theft as has apparently happened to Snipshot.

How similar are these two programs? Well, Cellsea offers a bunch more functions, but they do look very similar, both in terms of the UI and the underlying code. The original Snipshot is here and the knock off here. You be the judge.

If you are really hungry for a good AJAX image editing app, the best of the bunch of them may be Phixr, which gives you preview, the ability to marquee select for certain operations, etc. Slick, even if the UI is a bit jumpy.

Anyone who has been following the development of AJAX frameworks has heard of ZK, the server-side component GUI framework that allows you to write applications like you would a desktop app. It has become one of the most popular projects on sourceforge and has been nominated for a 2006 Sourceforge.net Community Choice Award.

Recently I talked with one of ZK’s creators, Tom Yeh of Potix, about the Framework’s popularity and future.

ZK Background

DK: How did you come up with the idea for ZK, i.e. an AJAX framework that allows you to write webapps like you would a desktop app?

TY: As I mentioned in http://zk1.sourceforge.net/faq.html#Why, it is the result of frustration.

I was a fan of thin-client computing since leading a wonderful team to develop Network Computer and Window Terminal in 1995. I truly believe in the so-called utility computing. Accessing applications should be as simple as using tap water.

It is crazy that someone should carry tons of water when traveling, since tap water is available everywhere. However, we still travel with notebooks, even though Internet connectivity is everywhere. Similarly, the Web edition of MS Outlook has been available for years, but we are still using the desktop version. Why? Frustrated user experiences and excessive development costs. In other words, it is too costly to develop a Web UI from scratch or add-on to ‘legacy’ apps, and people won’t use the Web UI even if it is provided.

After trying different ways to apply Ajax in the projects on which we consulted, we found that applying Ajax at the client side, as most frameworks did, only solved the half of the problem — though it did result in a lovely interface. That is why ZK was born.

DK: Who is Potix?

TY: Potix is a consulting firm providing expertise in Web development and project management. We also develop applications on an ODM-basis. ZK is the consequence of this work. However, due to strong demand, we mainly focus on ZK now.

Potix is also a house of old dogs. Most of us have more than 15 year of experience, ranging from developing Windows/Linux/Web applications, to embedded OS and GUI frameworks. ZK is my second OSS project; the first one, called OpenPam (GUI for embedded devices), was not very popular.

DK: How are you planning on making money with ZK? Nextapp, the makers of Echo2, sells an Eclipse plugin for around $400. Is that a business model you are examining?

TY: Dual license (as MySQL did). You might also take a look at one of my posts: http://sourceforge.net/forum/message.php?msg_id=3605162

Other Frameworks

DK: Echo2 seems to be the only other server-side AJAX framework out there. How would you compare yourself with Echo2?

TY: Echo2 assumes UI designers are Swing programmers, while ZK assumes many of them are not programmers.

Markup languages, like HTML, XUL and XAML, scripting languages, like PHP and Ruby, and the object oriented approach are the three most important developments since GUI was introduced. Unfortunately, Echo2, WebOnSwing and similar frameworks only focus on the object-oriented approach.

In addition to BeanShell, we are looking at the possibility of using Ruby and PHP in zscript. It looks to be, so far, quite feasible.

DK: There’s lots of talk now about the Google Web Toolkit. Do you see it as a competitor to ZK or a complement?

TY: Both.

From a technological viewpoint, it is a complement. GWT is a client-side solution and quite good for developing Ajax components. On the other hand, it is never a good idea to replicate the business logic to the client, which eventually brings us back to the maintenance headache of fat clients. In addition, loading huge JavaScript files into the client and executing them there is not fun at all. At the end, you need a server-side solution to handle the business logic and presentation tier.

It would be great if we can leverage GWT’s power to simplify the effort of component development (as we did with DOJO and FCKeditor).

From a perception level, users might see it as a competitor. Google is now at a sweet spot with plenty of resources and a good reputation, as Microsoft was in the 1980s. Developers love to explore any kit Google puts out there and exaggerate what it can do as if Google was the first to invent it.

DK: Do you envision developers writing ZK components using GWT?

TY: Sure, GWT does a good job for non-JavaScript programmers who want to develop Ajax components. I expect that some results of this will show up in next few months.

However, what makes Ajax programming difficult is not JavaScript itself. Rather, it is the incompatible and buggy API (to communicate with DOM). The ability to do Java-to-JavaScript is important, but I am also hoping for some benefits from the standards efforts of OpenAjax.

The true value of ZK is its architecture. We look forward to adapting components to ZK as decent (client-side) Ajax components become available.

DK: What other AJAX tools, frameworks or technologies do you think are noteworthy or interesting?

TY: DOJO has an amazing set of components, though it is too heavy (one of the reason we didn’t build the ZK Client Engine upon it). Atlas has great integration with Visual Studio. Anyone who wants to provide an authoring tool should take it as an example. Google Spreadsheets is an excellent Ajax application. You should unplug the network connection and see how it reacts, though. It’s cool nonetheless.

Strengths and Weaknesses

DK: What would you say are the strengths and weaknesses of the ZK framework?

TY: Strengths: boundless. But seriously, great richness and excellent productivity, if we can put in a sentence.

Many of ZK users appreciate that they can design a rich Web application without programming. Many have thanked us for the intuitive event model and feature rich components that have saved them countless hours. Many enjoy the power of prototyping so they can change the look and function right in front of their customers. For more information, you could take a look at the executive summary (http://zk1.sourceforge.net/wp/ZK-exesum.pdf).

Weaknesses:

1. Stops working if the connection is broken. It would be better if a subset of functions still worked (such as read only viewing).
2. Round-trip latency, though hardly observable. To minimize the effect of this, we plan to, in addition to Client Side Action, add visual effects that execute solely at the client and notify the server only when necessary.

One other weakness shared by all HTTP-based solutions is the lack of Server-side push. Though someone has implemented so-called “reverse Ajax”, it introduces too much overhead on the server. This — server-side push — is the next important step beyond Ajax.

DK: There aren’t any production applications out there using ZK. Do you see that as a problem and, if so, what are you doing to address it?

TY: According to the profile of our customers, adopting ZK is still in the development (and evaluation) phase. By and large, adopting
Ajax for most companies is still in an early stage. It is just a matter of time. I’m not really that concerned about it as long as the growth of ZK’s acceptance is strong.

DK: Right now, the framework doesn’t seem to allow for easy customization of the look and feel (window color, font, etc.). First, is that correct and, if so, do you have any plans to address it?

TY: Not correct. The look and feel are well separated by CSS and molds. What prevents users from customizing the look is the lack of documentation and samples. Also, the customization of the sophisticated components is sometimes not intuitive. It forces users to look at DSP files (the templates used to generate HTML tags). We realize this is an issue and we will provide documentation in the Developer Reference guide.

DK: I’ve noticed in the code that you spawn another thread to handle events. Can you explain the design to me? Also, how does this fit in with the Servlet standard and doesn’t this make it difficult to cluster a ZK application if the user session has non-serializable information and context?

TY: It is common that an application has to confirm with users about, say, whether to delete a file. It is unbelievably costly for Web developers to implement such functions. Why? Users get no response until the servlet has completed, while the servlet requires user’s confirmation to decide whether to proceed further.

There are many solutions to this problem, but the most elegant one is modal dialogs. ZK is one of the first Web framework that really enables the server-side modal dialog. The magic is to process events in another thread. Then, users can suspend and resume the processing anytime they like — including but not limited to modal dialogs.

It does make clustering difficult if there is a pending thread in a session. We are working on the serialization issue now. A basic idea is to send the application a notification, and it can decide how to handle pending threads. Of course, if there is no pending thread, there is no notification at all.

DK: What is your favorite ZK feature?

TY: Macro components, the threading models, and zscript.

DK: Are there some cases where you wouldn’t use ZK to develop an AJAX-based web application?

TY: Hard to imagine unless clients want the application to be functional even if the connection is off. Oh, action games, but it might not be a good idea to use Ajax there at all.

DK: It doesn’t appear that you are using JUnit in the ZK code. Is this true? And if so, why?

TY: Only common utilities are tested with JUnit (refer to pxcommonTest in SVN). I am still thinking about which is the best way to test ZK components. We will come out with something in the near future.

Future Plans

DK: What is the biggest feature enhancement request you are getting from the users of ZK?

TY: Safari support and design patterns. By design patterns I mean information on how to really write an application with ZK. An illustration with Pet Store is a common request.

DK: On your road map you mention plans to provide a mobile version of ZK. First, what is the time frame for this? Second, how are you planning to do this architecturally? Can users write one application and dynamically re-target their apps to a different front end?

TY: We originally planned to provide a J2ME-based client engine, but we are keen on developing a Flash-based solution now. Architecturally, we have to do three things to support a new client: client engine, server engine and components. Users have to do two things accordingly: use a different set of components and adjust their UI to fit into small screen. We will keep the component API very similar (and also provide common interfaces that make developer’s code polymorphic).

It is possible to let users use the same set of components, where components would be smart enough to detect the client and behave differently. However, we’re not considering this approach because it makes the development and maintenance of components too complicated. Of course, we can use the factory pattern to chose the correct implementation, but it makes the instantiation of a component too complex for most users.

DK: You’ve stated that ZK is at the interface layer. Do you plan to introduce components that punch through to the data layer, sort of like the .NET datagrid?

TY: Yes. We will add more data-layer utilities, such as zkplus’s DelegatingVariableResolver, too. After all, most ZK applications will have to access a database. However, we may not do a similar deep integration as Ruby on Rails did — I don’t like to make so many assumptions about how applications might be built.

DK: What do you see as the major challenges facing the AJAX community today?

TY: There are too many frameworks, such that many users prefer to wait. There isn’t even a well-recognized categorization for them (such as server vs. client). A comparison chart or something similar would be very useful.

A standard like OpenAjax will help (at the client side), but I’ve never seen an alliance really work.

DK: Care to share any other plans you have for ZK?

TY: We are interested in adding mega-components, such as spreadsheet, forum and wiki. Part of the success of PHP is because the availability of plenty of off-of-shelf stuff. We won’t develop all of these components ourselves. Rather, we prefer to help other developers deliver them either as OSS or commercial components. We will have a ZK.forge website to promote such collaborations.