Flex vs GWT: Comparison Part 1

This article opens a series of posts dedicated to Flex and GWT comparison.
Both are meant to help developers in construction of reach interface applications. Both achieve this goal in very different ways.
I will compare GWT and Flex because people who are familiar only with one of them have different thoughts on why they should/shouldn’t learn the other technology. They are asking questions like “I heard that Flex can be used in enterprise apps for UI with large amount of data. Can’t I do the same with GWT?” or “GWT allows me to have very responsive AJAX applications which are cross-browser compliant. Seems like Flex promises the same, is it worse to learn it?”.

I am writing this just for such developers to share my impression.
So let’s start from some history.

History

The next time-line shows how both teams where roughly releasing:

As you can see Flex team started ~ 2 years ahead of GWT team. Not surprisingly Flex is more mature technology at the current moment. The proper analysis maybe would be to compare then GWT 2.0 with Flex 2.x but no one is interesting in this

Out of the Box

Let’s see now what developers have out of the box when they start to work with both technologies.

SDK

Both have open source free SDK.

IDE

GWT: All you need  is Eclipse with J2EE plugins + download and install free GWT Eclipse plugin.
It perfectly works even with latest Galileo (3.5) Eclipse.
Flex: Though basic tools to work in command line (compiler, etc.) are provided it will not be very convenient to do some real project given just that. Adobe Flex Builder 3 plugin for Eclipse is not free and costs some fair money but it is worth of its price, no matter what the people say.

Programming Language

You develop GWT projects on Java.
For Flex you need to code in Action Script.
Action Script provides majority of the OOP features and for a normal developer the learning curve should be very short.
Off course Java is richer language but Action Script provides you with all means to create a nice OOP code. Also consider that for the classes that represent your UI components and thus will be compiled to Java Script code by GWT you can use only part, though quite large part, of the Java Runtime Library. For example you can’t use threads or java.io classes.

UI Markup Language

GWT: Before the 2.0 release GWT has no embedded markup language. All structuring and layouting of your UI should have been done in Java code similarly as it is done in Java Swing.
As of the GWT 2.0 there is a UiBinder feature which allows you to layout/style your UI in xml files. I described basics of this here.
Flex: there is MXML markup language which also allows you to layout and style your applications/components in xml-way. But MXML is much more mature, allowing you to do additional things which you will not be able to achieve with UiBinder. For example you can insert plane Actions Script code there, so MXML’s flavor resembles here JSPs
Theoretically you can write the whole Flex application in MXML while UiBinder only allows you to control layout and assign some event handlers + other minor stuff.
Also it’s worthy to note that MXML has much stronger support in IDE: better autocompletion, ability to debug MXML, etc.

Standard Components

GWT: comes with 18 widgets and  10 layout panels which are described here.
Flex: has 30 controls, 17 Layouts, 8 Navigators and 10 charts. Though some useful enterprise-scale components are not coming in the standard free package and you should pay additionally for them, e.g. Advanced Data Grid or OLAPDataCube.

So here Flex and GWT hardly can be compared. Also upcoming (in 2010) Flex 4 release promise to deliver even more components.

Be Careful with Renderers

After we added one fancy renderer to ADG to highlight our search results in case user performed a search I noticed that vertical scrolling slowed down way too much.

After some investigation we found the culprit: in case when no search was performed the renderer filled the cells with white solid fill using beginFill() and endFill(). We substituted this to just graphics.clear() and everything was fixed. So it appears that beginFill() – endFill() is quite expensive though primitive operation. Not funny

Flex Builder: Memory Profiler Problem with Object References View

Ok, now on Flex Builder memory profiler again.

It has Object References view which is supposed to show me which objects are holding my particular one from being garbage collected.

Let’s take a look what it shows me from time to time:

It tells me “expand to see references” but there is nothing to expand. Bitches

Mate: Drinking and RIA Development

It happened almost at the same time when I introduced myself to Mate-as-beverage and Mate-as-Flex-Framework

Both things are good stimulators. When you drink Mate it is a kind of a ritual, not just like you buy a bottle of Cola and just drink it. To prepare a good Mate you need to put a piece of your soul and some good thoughts into it, not to say about technology: the water must be of a particular temperature, you should know how much Mate to put in, how to pour water into it, etc. etc. When you done it well you are relaxing, your friends are relaxing and everything is just fine, everyone enjoys a good drink. If you done it improperly people will drink it, they will tell you it’s tasty but they will think “what the fucking crap is it?” ))

The same thing with Mate framework. Proper developer armed with Mate will make the design simpler and cleaner. When applied in wrong way it can make the application heavy and hard to understand. After few monthes of sometimes hard work I have something to summarize and say on this framework, maybe this will be helpful for some readers:

• the first thing to say: coding with a framework is more productive then coding without one. This is true in general and true for Mate. If you don’t agree with this – go and code for some bananas.
• Mate provides a variety of weapons that are nicely arranged as MXML tags. After you’ve become friends with few of them you can intuitively understand all others since framework is coherent and consistent. The latest thing I think is due to the fact that Mate is writen by a very small team and the core is actually written by a single man: Nahuel Foronda.
• As it would be real damage for your body if you drink liters of Mate each day and if you don’t drink anything else the same damage will occur to your application if you use Mate here and there without a mind. I went through it and I know what I say. Do not use Mate if you can do simple things inside your single class. Do not overcomplicate the design. I mean if you can dispatch and catch some minor helper event inside the same object you should bypass Mate event maps.
• Now about drawbacks. I encountered only one real drawback but in my case very important one: if you need to generate some models/views dynamically whitin the life-period of one swf and if you need to remove such views from the display list and substitute them by fresh ones you can go into trouble. The troubles will happen if you use injectors. Though the Dependency Injection is real power allowing you brain to not control each and other step in your algorithms sequences it creates a lot of bindings which  you can not delete in case you are removing your view from a display list.  So no matter how thoroughly you clean up your models/views that you don’t want to use anymore, no matter how many variable = null assignments you will do almost everything handled by those bindings will remain in memory and not GCed.
  Though still Mate can be used in this case: just without dependency injections. You still have EventHandlers, MethodInvoker and DataCopier workhorses that can save you a lot of time.
• My next thought may sound a bit heretic but I decided to keep the rule: minimize number of injectors in your event maps. Almost everything you reference in Mate xml constructs you reference by class names, not by some ids of concrete instances. So this rule pretty implies that you need to minimize the number of classes you are referencing in your event maps.

In general: Mate should and can be used for real applications development. I am sure that each developer using this framework will serve his own unique flavor of the Mate with its own taste. And this is very right thing: we are all different so why shouldn’t we do different code :p

When I decided to use Mate in my application I didn’t know ANYTHING about it, just have read some websites with different people impressions. But I decided I will employ it anyway. Now I have a framework in my pocket but the pocket is large and there is still a lot of place

UPD: More than half of a year passed from the time of this post publishing and today we upgraded Mate from 08.5 to 08.9 version and it seems like some memory problems will be resolved. Have not yet seen it by my own eyes, so will test after daily build and then confirm. If so then it would be a strong + to Mate.

Flex Profiler Sucks

I always try to find in everything positive things but if I have a tool that is designed to help me and it doesn’t do it at all then there is nothing fuckin’ positive at all there.

So, last few weeks I was regularly using Flex profiler to profile my app memory usage. I have seen a lot of small drawbacks in profiler. For example, if I have Loitering Objects view and then clicks there on some class it opens me additional view where I can see back references to the object instance, i.e. I can see there which objects keep my particular one from being GCed. And sometimes it just doesn’t show me those back references at all though keeps the object in the Loitering Objects view. But this is bearable, such kind of things are just small bugs.

But few days ago after I optimized one use case I wanted to move further and profile other use case that is more complicated. In the run/profile modes the app goes smoothly and fast, IE which I use as a default browser eats 100-120 Mb of memory while I have 2Gb, so no problems. Untill I run the app in profile mode. Then it stucks, I see in the Task Manager that IE eats up 530 Mb and shortly after this I get pretty runtime Visual Basic exception. What the fuck?

Here is a screenshot:

I will try now in FF browser (which I don’t support for this app), maybe any luck will be there.

And a lot of hugs to the guys who implemented this profiler. I would not work with you guys or hire you, try better.

UPD:
Firefox was able to render the view in the profile mode but it took for it 813 Mb of memory. Though not much helpful since memory graph in the Flex profiler ceased to update and when I clicked to create a memory snapshot it just hanged up.

Conclusion: seems like Flex profiler is good for unckle John application which shows vegetables grown in his garden. But for real production apps it just sucks. Pitty.

Focus Management for UI Components

A very simple post, just in case if someone will have the same problem.

I’ve got a screen, actually a form with a sequence of UI components, some are standard flex components like TextArea and some are custom. One custom component was ignored while user used “Tab” key to navigate from one field of the form to another.

I wanted to fix it very fast and started with hacks like adding an event listener to the previous component’s focusOut event and calling setFocus() method of that custom component. But that was not working like it should so I went to the Adobe Help and found out a very simple and proper fix: what ever your component is, if it inherits from UIComponent you can just add an implements IFocusManagerComponent instruction and current FocusManager which deals with the focus management on the form will handle your custom component in a standard nice way:

This all works very simple when you understand that focus management in Flex seems to be design using the Composite pattern. Thanks Max for noticing this.

You can read here about the IFocus Manager component.

Cheers

Image Objects Recognition

I’ve tried to implemetn a program that can recognized separate objects on the image with a single white background. For example a text is a pretty candidate for such thing.

First version is not yet ideal but it already can be useful for making some funny animation stuff.

To give you the impression what it can do here is a screenshot that shows which “objects” it can already recognize:

Recognized objects

It merges some symbols together but I will fix it soon

Problem with Flex deeplinking in case you have multiple SWFs on one page

This is my first time I encountered a situation where guys from Adobe implemented a feature in a little bit fucked up way.

I already wrote about deeplinking in Flex after I read basic tutorials on its implementation. Then my guys have implemented this solution in the application we are now developing and everything seems worked well in local environments.

But then we deployed the stuff in the remote environments where our SWFs are included into quite complex HTML pages of one CRM system. As you already guessed deeplinking didn’t work there.

We started to search why and found a pretty nice Fx JIRA issue which tells us (jesus christ !!) that the deepliking craps in case you have more then one SWFs in your HTML page and your SWF is not the first one.

We are now in the process of finding some solution. I hope we will dind out something in the net, if not we’ll have to fuck with the History.js ourselves.

If you are reading this and you are not a guy who doesn’t care please go to that  issue and vote for it. Adobe chooses issues to fix first depending on the number of votes from community.

Will add someting new when we resolve the problem.

UPD:

Max have solved the problem in following way:
there is a getPlayer() function in the History.js file which is responsible to return needed SWF object. We have modified this function so it returns not the first SWF on the page but the SWF with the specified object ID. It is not very nice fix since needed object ID is hardcoded in the function code but for our needs it suits right. Here is the modified code (pay attention to the ie/ff stuff):

function getPlayer(id) {
//history crash with multiple swfs fix
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;

var result = null;
if (isIE)
{
result = document.getElementById("your_unique_id_for_ie");
}else
{
result = document.getElementById("your_unique_id_for_ff");
}
if (result != null)
{
return result
}
// /fix
return document.getElementById("your_unique_id_for_ie");
if (id && document.getElementById(id)) {
var r = document.getElementById(id);
if (typeof r.SetVariable != "undefined") {
return r;
}
else {
var o = r.getElementsByTagName("object");
var e = r.getElementsByTagName("embed");
if (o.length > 0 && typeof o[0].SetVariable != "undefined") {
return o[0];
}
else if (e.length > 0 && typeof e[0].SetVariable != "undefined") {
return e[0];
}
}
}
else {
var o = document.getElementsByTagName("object");
var e = document.getElementsByTagName("embed");
if (e.length > 0 && typeof e[0].SetVariable != "undefined") {
return e[0];
}
else if (o.length > 0 && typeof o[0].SetVariable != "undefined") {
return o[0];
}
else if (o.length > 1 && typeof o[1].SetVariable != "undefined") {
return o[1];
}
}
return undefined;
}

Now about the ID:
You should specify the ID in the HTML where you embed your SWF object: your_unique_id_for_ie where ID for the object tag is specified and your_unique_id_for_ff where ID for the embed tag is specified.

Supporting browser navigation and deep-linking in Flex applications

In web-applications sometimes (if you try to do things good then always) it is needed to support browser navigation (back, forward buttons, bookmarks) and deep-linking.

This kind of requirements is not that hard to implement like it might seem. All you need to do in most of cases is to support switching to different states of your app by direct URLs. You just adds additional parameters to the URL pointing to the outer HTML page.

I’ve spent few hours yesterday to research in Flex documentation what weapons Flex provides for deep-linking. Everything appears to be very nice and elegant there.

Flex provides IBrowserManager interface and BrowserManager class which you use to handle deep-linking and communication with browser. Behind the scenes it employs History.css, History.js and some other files to work via JavaScript capabilities with different types of browsers.
Also URLUtil class will be handy. It’s equipped with methods allowing you quickly translate additional parameters you have in the URL to the object and vice verse to make it easier for you to work with those parameters.

I’ve tried to do some kind of a PoC and integrated this thing to one module of my current application and it perfectly worked with IE7 and FF3.  What we were able to see after just some 1.5 hours of work is:

- ability to go by URL directly to the details page while without deeplinking it was always needed to go first to the list page

- ability to use back and forward browser buttons. History was nicely supported.

- ability to bookmark the pages

Though, some people have impression that standard Flex framework do not nicely support deep-linking. This can have few possible explanations as I think:

• some guys started to work with Flex quite long time ago when it was Flex 2. Those times as I understood people employed HistoryManager class to get history supported. And seems it didn’t worked properly with all browsers. Now Adobe says you need only use HistoryManager with Flex 2 and normally you must use BrowserManager.
• If you run your application from the Flex Builder under IE it uses local file system URI and underlying java script works incorrectly in this case. In FF you have no troubles even with local file system URI. This problem has quite nice solution. Use as a compilation target folder for your SWFs some folder under Apache htdocs or some other simple web-server so you can access your app in IE browser via normal http URL. After this you will be able to test deeplinking features under IE.

That’s all. It proved to me that BrowserManager and related features are reliable and can be used.

If you need full overview of deep-linking in Adobe Flex implementation then go here: Deep Linking.

One particularity of flex data binding

Yesterday I’ve been reading bout data binding in Flex. There was a link to one blog where one dude described that you can save your brain from WTF exclamations and hardcore debugging if you know that data binding in Flex is a bit tricky in one case. Also he said that this “issue” is not outlined visibilly enough in Adobe Flex Documentation.

The issue is when you try to set a property of the source object to the value that is already assigned (i.e. you pass to the setter the same value again) Flex will not propagate binding and update all bound values. This is simple and seems like all flexers in my surrounding know this from the ancient times.

The most interesting thing is that this “issue” is described very clear in the Adobe Flex 3 Help. A citation from there:

The Flex compiler automatically generates an event named
propertyChange, of the type ProperyChangeEvent, for all public
properties so that the properties can be used as the
source of a data binding expression.
If the property value remains the same on a write,
Flex does not dispatch the event or update the property,
where not the same translates to the following test:
(oldValue !== value)

That means if a property contains a reference to
an object, and that reference is modified to reference
a different but equivalent object, the binding is triggered.
If the property is not modified, but
the object that it points to changes internally, the binding
is not triggered.