FLEX vs AJAX vs GWT on the Grid

The title is a little a canvasser but the purpose of this post is rather to get acquainted with 3 manners to make RIA and to compare them through a central component of an application: the grid.
I was thus used to recreate a simple screen containing a label, a button and a grid.


flexExtGwt

By clicking the button we load in the grid a variable number of records and we display in the label the loading time. The test was made with 10, 50, 100, 500 and 1000 items.
Time are measured at the same moment in Internet Explorer 7 and in Firefox.
To be really honnest I also made the measures with Rialto.

FLEX

I tried first of all the environment of Adobe. After creating an account, it is necessary to download and to install Flex Builder 3.
Then everything is rather intuitive from the project creation to the execution of our mxml test file.



	
        
 	
     
    
      
        
        
        
      
    

The documentation is rather clear. With Flex the grid loading is made by modifying the dataProviderproperty of the component.

grid.dataProvider = gamesData

Ext js

To test in a javascript environment I opted for the foremost framework of the moment (for the best and the worst ;-))
I used Ext 2.0.2. I find it a little bit hard handling. You first need an HTML file which contains the javascript and css include for Ext. Then we create a javascript file containing the application code.

Ext.onReady(function() {
	 var oData=new Array;
	 for (var i=0;i<1000;i++){
  		oData.push([i,"data1","data2"]);
  	}
	 
	 Ext.get('myButton').on('click', function(){
       var date = new Date;
		start = date.getTime();
		var d =new Ext.data.Store({data:oData,reader: myReader});
		grid.reconfigure(d,grid.getColumnModel());
		date = new Date;
		end = date.getTime();
		var sec = (end-start)/1000;
	    var myDiv = Ext.get('lab');
	    myDiv.dom.innerHTML="Load in: "+sec;
    });
    
    
	var myData = [['','','','']];
 
	var myReader = new Ext.data.ArrayReader({}, [
		{name: 'id'},
		{name: 'd1'},
		{name: 'd2'}
	]);
 
	var grid = new Ext.grid.GridPanel({
		store: new Ext.data.Store({
			data: myData,
			reader: myReader
		}),
		columns: [
			{header: 'ID', width: 100, sortable: true, dataIndex: 'id'},
			{header: 'Data1', width: 100, sortable: true, dataIndex: 'd1'},
			{header: 'Data2', width: 100, sortable: true, dataIndex: 'd2'}
		],
		viewConfig: {
			forceFit: false
		},
		renderTo: 'content',
		title: 'My First Grid',
		width: 300,
		height: 300,
		frame: true
	});
 
	grid.getSelectionModel().selectFirstRow();
});

The documentation is very well made and we feel the strength of the component. On the other hand for a simple use the code becomes hard to manipulate.

The reload of the grid is made by modifying the Store object and by calling the reconfigure method.

var d =new Ext.data.Store({data:oData,reader: myReader});
grid.reconfigure(d,grid.getColumnModel());

GWT-Ext

At first I wanted to test the GWT environment only but the native component Grid is too simple and is more similar to a simple HTML table. So I test the grid component wrap in GWT-Ext. The code looks like thus that indicated above.

Panel panel = new Panel();  
panel.setBorder(false);
panel.setPaddings(15);  
lab=new Label("Load");
panel.add(lab);	  
Button but = new Button("Load", new ButtonListenerAdapter() {  
public void onClick(Button button, EventObject e) {  
		   Date now = new Date();
		   long start = now.getTime(); 
		   //treatment
		   Object[][] data = getData(1000);  
		   MemoryProxy proxy = new MemoryProxy(data);  
		   ArrayReader reader = new ArrayReader(recordDef);  
		   Store store = new Store(proxy, reader);  
		   store.load();  
		   grid.reconfigure(store, columnModel);
		   now = new Date();
		   long end = now.getTime(); 
		   float sec = (new Float((end-start)).floatValue())/1000;
		   lab.setText("Load in: "+sec);
}  
});  

panel.add (but);
		         
recordDef = new RecordDef(  
		 new FieldDef[]{  
		 new StringFieldDef("id"),  
		 new StringFieldDef("data1"),  
		 new StringFieldDef("data2")  
		 }  
);  
		   
		         grid = new GridPanel();  
		   
		         Object[][] data =new Object[][]{new Object[]{"", "", ""}}; 
		         //Object[][] data= getData(1);
		         MemoryProxy proxy = new MemoryProxy(data);  
		   
		         ArrayReader reader = new ArrayReader(recordDef);  
		         Store store = new Store(proxy, reader);  
		         store.load();  
		         grid.setStore(store);  
		   
		   
		         ColumnConfig[] columns = new ColumnConfig[]{  
		                 new ColumnConfig("ID", "id", 100),  
		                 new ColumnConfig("Data 1", "data1", 100),  
		                 new ColumnConfig("Data 2", "data2", 100)
		         };  
		   
		         columnModel = new ColumnModel(columns);  
		         grid.setColumnModel(columnModel);  
		   
		         grid.setFrame(true);  
		         grid.setStripeRows(true);   
		         grid.setHeight(350);  
		         grid.setWidth(600);  
		         grid.setTitle("Array Grid");  
		   
		        
		         panel.add(grid);  
		   
		         RootPanel.get().add(panel);  
		     }  
		   
		     private Object[][] getData(int numberElmt) {  
		    	 Object[][] data =new Object[numberElmt][2];
		    	 for (int i=0;i

The official sites include useful information, very beautiful showroom , the API documentation. The reload is the same that with Ext js.

RESULTATS

Times are indicated in seconds.

results

graphe
Without surprise Flex offer results widely above the others but don’t forget that we compare a compiled language with an interpreted language (the same with GWT that in final runs javascript). I’ve been surprise by the results of GWT that I imagined less good.
We note, as often, of better results in firefox than in IE.
At least a very interesting test to get familiar with tomorrow RIA actors.

18 réflexions sur « FLEX vs AJAX vs GWT on the Grid »

  1. There is a API doc for GWT-Ext (http://www.gwt-ext.com/docs/2.0.3)

    « GWT that I imagined less good ». Why ? The Java code is compiled into a regular javascript file. This file is optimized to reduce its size and other stuff to improve overall performances.

    Including GWT-Ext in your test is kinda useless because you also include Ext-JS and GWT-Ext is just a wrapper for Ext-JS. When you see the results, there are pretty close and it’s normal.

    It’s always good to have such a vs betwwen different technos tought.

    Thomas

  2. Thank for the API link, i missed it. I update the post. Concerning GWT, even if it’s true that the compilation is optimized, you « add » several treatement use by GWT. So i imagine that we should have seen effects of the wrapping comparing to the original code as the number of record grow up.

  3. It is true that GWT-Ext is a wrapper for ExtJS. I think that’s why you have slightly better results for ExtJS. Maybe you should test with Ext GWT (not a wrapper but full java implementation) where all javascript will be optimized javascript (generated by GWT).

  4. To be fair you should probably have tested Ext-GWT (formerly MyGWT) http://extjs.com/products/gxt/ which is a native GWT port of Ext rather than a wrapper. I’d definitely be interested to see how much better the native GWT version performed.

  5. User have already complained about the performance of Ext GWT being much muich slower than Ext. I will be interesting to see how slow Ext GWT is compared to GWT-Ext

  6. Have you tested with GWT-rialto 1.0 too ? I guess yes 😉 What are the results ?

  7. Thanks for including Ext JS in your test. I noticed a few key differences that may affect results that you may wish to correct so you are seeing proper results before moving forward with your decision:

    1. You are only timing building the data array for Flex, not grid rendering. Since Flex is built in Flash and rendering is asynchronous, I would imagine it will be very difficult to get an accurate result even if the call « grid.dataProvider = gamesData; » was included within the timed block.

    2. You are completely reconfiguring the Ext JS grid instead of just loading new data. Data in Ext JS is completely separate from the visual component and the loading of new data is done through the Store API (similar to the Flex DataProvider). If all you want to do is test the load/rendering time of new/additional data, I would recommend instead of reconfiguring and recreating the grid from scratch every time, you use the loadData() method of the store. For example:

    var d =new Ext.data.Store({data:oData,reader: myReader});
    grid.reconfigure(d,grid.getColumnModel());

    grid.getStore().loadData(oData);

  8. Bruno,

    No i don’t made the test with Rialto-GWT. The purpose was not to test Rialto here. I just add the results with rialto js to be honnest. We plan a new release of rialto GWT sooner. At this moment i will test it…..

  9. Jack,

    Concerning Flex you are true i made a mistake. I run the test again and the results are almost the same. Even if we can discut about how flex is build don’t you think that only the final result matter. The load is immediate.
    For Ext, thank you for the precision. I made the same test using the loadData method. By the way the results are very close to the first one.

    With FF the loading times for 10,50,100,500 and 1000 rows are:

    0,034
    0,071
    0,180
    0,718
    1,858

    With IE :

    0,029
    0,144
    0,248
    1,025
    2,271

    That doesn’t surprise me because this test try to evaluate the first load end renderer of the grid. So even if i use a method that change the data you have to build all DOM elements of your grid.

  10. Hi,
    How to setup Ext js-GWT : GXT and Example on Eclipse Ganymede 3.4
    Follow this:

Les commentaires sont fermés.