TIBCO General Interface

By chance I came across the "TIBCO General Interface". Coupled with its "AJAX Message Service", at first look it seems to be a credible alternative to likes of "Flex" and "Ext". After digging a bit deeper I realized that overall it is not so. Nevertheless, I feel that it is a step in the right direction and is hence important.

The most prominent reason that I am excited about it as it is a proper IDE based approach towards developing JavaScript based RIAs. However, it seems that TIBCO is interested in making products for specialized clients as opposed to web applications for the general public. That is why it has blatantly decided to support only Firefox 1.5/2 and Internet Explorer 6/7. You cannot hope to get away with that if you are making a product for the public. You can get away with it if the product is for a particular company that can enforce a standard browser all across the organization. I guess they have simply chosen their battlefield, and it is not anywhere near Flex or Ext. On the other side is Adobe's Spry framework making its way via the Dreamweaver. It supports more browsers but has less functionalities, aiming at "public" applications I guess. I feel that RIA application development community needs something akin to this, albeit more comprehensive.

I still feel the Flex has the best potential. Sadly, Adobe Engineers seem to be designing from the lab instead of trying to go to the customer's desk and observing competition. Let's see what "Flex 4" brings. Ext, on the other hand, is moving aggressively in terms of feature enhancement and reliability. A good JavaScript plugin for Eclipse, Idea etc. that focuses on RIA development can move the battle decisively in the favor of Ext. Easier debugging would also help. It has already started using flash charts to neutralize one of the most significant advantages of Flex. Combined with Google's data visualization API, one may as well start questioning the existence of Flex. Flex is falling back and Adobe would do itself a favor by waking up to it and taking the fight back to the competition.

The Future of Flex

After having a look at the current RIA technologies in the market, I have to say that Adobe RIAs are falling back wrt the JavaScript based ones. Did I hear somebody talk about Microsoft's Silverlight? I feel there is nothing special about it absolutely; I guess web applications is not exactly Microsoft's forte, so I would not consider it very seriously for now. An interesting addition in the foray has been Google with its smart data visualization API.

I think that there are a few weaknesses of JavaScript based RIAs. Firstly, JavaScript itself is not a very ordered language. It is easy to copy and using it to build a competitive advantage is difficult, if not down-right impossible. What adds to this difficulty is the absence of any tool that tries to make this development comprehensive. Adobe is trying to move towards it with a combination of its Dreamweaver and Spry framework, but there is still a long way to go. A little discipline in coding can make the JavaScript code manageable, as demonstrated by products like YUI and ext.

Secondly, JavaScript's charting capabilities are pretty limited. For serious dashboards demanded by analytics, this is a handicap. Interestingly, JavaScript developers have attempted to cover this gap by using, guess what, flash. With a better integration between swf files and javascript, this has become increasingly possible. While ext has just started on the path, Google's data visualization API and charting widgets are something to watch for. Buying charts from Fusion Charts can give you some headstart as well.

On the other end of the spectrum lies the flash/flex based RIAs. A few years ago they held a distinct advantage over their JavaScript counterparts in terms of possibilities. The Flex based projects are especially easier to maintain and develop when compared to JavaScript. However, the apparent growth has more or less stagnated. For example, the Datagrid and even the Advanced Datagrid lack the basic pagination feature available in most JavaScript based tables. With very competitive graphing options available in form of Google APIs and Fusion Charts, the case for using Flex becomes weaker. The debugging and testing ability has not improved much over time either. If this continues, in the next two-three years JavaScript based RIA's can play hardball to firmly displace Flex, leaving Adobe to play the catch-up game. It seems Adobe has the right ideas, but its willingness and ability to put these ideas into action will decide the final outcome. With the flex SDK out in the open and javascript using flash to plugin its charting gap, Adobe can win this war by promising to increase the developer's productivity by doing what it does best: developing a desktop IDE for helping RIA developers to become more effective.

Using Flex Within an Ext Panel

Here is an interesting one: integrating ext with flex :p. We built a dashboard application using ext, but realized that for certain visualization needs flex is better equipped. So now, we wanted one panel in the ext tabbed layout to have a flex chart. A brief step-by-step guide to achieve it:

1. Generate the swf file for your flex project. This will, normally, generate the following in the bin-debug folder:

• An HTML rendering of the whole thing and the main swf file, which will have the same name as your project
• playerProductInstall.swf, a swf file to help install latest version of flash player if need be
• AC_OETags.js, a javascript file that takes care of the actual writing of the swf object to the html dom
• a history folder with three files to help the swf maintain history

2. Copy all the files generated above EXCEPT the HTML rendering into an appropriate location in your webapp. For example, to a folder /resources/flex/graphs/

3. In the ext tab panel add another tab. Set the content to be an ext Panel:

var visualizationPanel = new Ext.Panel({

id:'graphPanel',

title:'Analysis Graphs',

bodyStyle:'margin:0;padding:0;',

height:400,

width:'100%',

contentEl:'graphDiv'

});

Note that we are using the "contentEl" property that will try to find an HTML div by this name in the DOM to render to this panel

4. In you main HTML where you have the ext tab panel, add this to your <head> (lifted and modified from the rendered HTML. Get your paths right)

5. To your <body> add this script and a <noscript> tag. The main changes to be noticed have been made bold.

6. Now, open AC_OETags.js and add a statement in the switch inside AC_GetArgs function :

case "content_el":

ret.params["content_el"] = args[i+1];

break;

7. In the same file, change the AC_Generateobj function.

Here is the full AC_OETags.js file

Cool, now you are ready to go. Your very own flex graph in an ext tab.

Challenging Adobe: Possibilities

Dreamweaver can be a handy website development tool as it can double up as your content management system as well. For PHP websites not looking for too much of RIA, Joomla and Drupal should suffice. For RIA, Joomla and Dreamweaver both can be seriously inadequate. Which brings us back to our friend Flex. As things are at this moment, Flex rules.

Pure JavaScript based RIA can be serious challengers to Flex. However, in absence of an IDE seriously focused on developing RIAs using JavaScript AND manage the content effectively, Flex holds an almost unassailable position. In fact, it seems that by slowly (but steadily) developing Spry and integrating the same with Dreamweaver, Adobe may already be working in that direction. That way Adobe would be ultimately able to hold two winners - whichever way people turn.

Nevertheless, that may not be Adobe's intentions. It certainly doesn't look like the way it is promoting Flex. I think it would make fabulous business sense to make an IDE at par with Flex that exclusively focuses on making an RIA using JavaScript et al. This would not only break Adobe's impending monopoly but may also benefit the developer community in general.

A Skeleton Tabbed Layout in ext

Using ext for UI is not a pleasant task after experiencing Flex. Nevertheless, we do what we need to do :).

I needed to build a tabbed layout and in a series of article I will explain my experience with the same. The first thing to do (after downloading ext) is place a basic skeleton in place - the jsp/html and the javascript.

Skeleton html for guidance

The basic tab manager javascript guidance

Ext or Flex?

For the past few months I have been evaluating another claimant to the realm of RIA:Ext. Ext looks good. In fact it can be quite formidable if combined with Google Charts and Google Visualization. So, given a choice, what should one pick? A brief comparison before I give my views:

Flex

• Cost per license: $699


• Technology: Flash and ActionScript


• USP:
  
  • More developer friendly and reliable than JavaScript any day
  
  
  • Hides your UI code
  
  
  • Produces very maintainable and testable code for complex dashboards
  
  
  • Very well tested and reasonably predictable
  
  
  • Strong user community and support, thanks to Flash and ActionScript legacy
  
  
  • From Flex 3, communication between JavaScript and Flex has become easier.BlazeDS is now available as open-source and facilitates integration with various backends


• Weaknesses:
  
  • Cost
  
  
  • Learning curve
  
  
  • Flex can prove to be a hammer to kill a fly for most web applications.

Ext

• Cost per license: $289


• Technology: javaScript


• USP:
  
  • If you don't have a reasonably complex dashboard that needs significant data visualization,it is a good alternative
  
  
  • Hides your UI code
  
  
  • Lesser cost
  
  
  • Less complicated than Flex


• Weaknesses:
  
  • Can be difficult to debug
  
  
  • JavaScript
  
  
  • Not that strong user community yet
  
  

I feel, Ext is impressive but not as good enough as Flex due to the inherent evil nature of JavaScript :). I could not find too much help on the web either to address the countless bugs I face when I use Ext. The fact that I expose some part of my business logic when I use a JS based RIA still holds true for Ext. In its attempt to prevent its precious JS code from being nicked away, Ext has taken great pains to obfuscate its files. Even with it debug javascripts, it can get very frustrating and difficult to debug any issues. This brings in my concern for a maintainable and testable code if my UI is reasonably complex.

Nevertheless, it builds significantly on top of other available RIA options and tries to integrate with JQuery, Protoype, YUI and even AIR. It is definitely an upcoming force that will mature in 2-3 years. It also holds the cost advantage against Flex. All-in-all one may think of using it if one's UI is not as complicated.

But if I have a UI to build that has to be complex, extremely reliable, maintainable and testable, my vote goes to Flex any day.