I.T. aware

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.

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.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;			     
		    [Bindable]
		    private var gamesData:ArrayCollection; 
			private function initDataGridData():void
			{
			  var gamesData:ArrayCollection = new ArrayCollection();
			  var date=new Date();
			  var start = date.getTime();
				for (var i=0;i<10;i++){
			  		gamesData.addItem({ID: i, Data1: start, Data2: "Data2"});
			  	}
                                grid.dataProvider = gamesData; 
				date = new Date;
				var end = date.getTime();
				var sec = (end-start)/1000;
				lab.text="Load in:"+sec;
			}
         ]]>
    </mx:Script>
 	<mx:Button y="10" x="400" click="initDataGridData()" label="load"/>
     <mx:Label x="490" y="10" id="lab"
      text="Wait:"
      fontSize="16" fontWeight="bold"/>
    <mx:DataGrid id="grid" x="10" y="5"  
      width="300" height="250" selectedIndex="0">
      <mx:columns>
        <mx:DataGridColumn dataField="ID" headerText="ID" width="100"/>
        <mx:DataGridColumn dataField="Data1" headerText="Data1" width="100"/>
        <mx:DataGridColumn dataField="Data2" headerText="Data2" width="100"/>
      </mx:columns>
    </mx:DataGrid>
</mx:Application>

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.



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.