Enterprise RIA Javascript MVC Thoughts?

I like Knockout’s binding functionality, it should appeal to both Flex and Silverlight software engineers who decide to move into Javascript land. I haven’t used Underscore yet, but I’m sure I will. Which brings me to ExtJS and building large RIA Javascript applications.

The ExtJS tutorials talk about Big Applications, and provide some direction. Pragmatic Guide to JavaScript suggests Dojo as the first choice for RIA’s. What I am so far missing is the best way to put together a large application using Javascript frameworks.

Flex and Silverlight both have MVC/MVVM pretty much pegged, which leads me back to Ed’s posting on Customer containers with ExtJS. The problem I have with the samples in Ed’s posting is that the view is in Javascript. Yet in Flex/Silverlight the view is in a markup language – MXML/XAML.

It appears to me that most Javascript MVC samples appear to avoid the big RIA question, steering towards leveraging appropriate server side technology, whereas what I want is a Javascript RIA connected to a streaming server – obviously

Today, I could possible do something like this at the application view level i.e. appropriate breaking the application into smaller parts:

    var viewport = new Ext.Container({
		renderTo: 'viewport',
		layout: 'absolute',
		width: '100%',
		height: '100%',
		autoScroll: true,
        items:[{
			itemId: 'stage',
            xtype: 'container',
			layout: 'absolute',
			x: 5,
			y: 10,
			width: 1010,
			height: 764,
			items: [{
				itemId: 'viewBar',
				xtype: 'viewBar',
				x: 125,
				y: 5,
				width: 890,
				height: 35
			},{
...

Coupled with sub-views such as:

...view.viewBar = Ext.extend(Ext.Container, {
    layout: 'absolute',
	cls: 'viewBar',

	instrument: '',
	priceType: '',
	price: 0,


    initComponent: function() {

		this.boxTitle = new Ext.form.Label({
			itemId: 'boxTitle',
			cls: 'bigPriceBoxTitle',
			text: this.boxTitle,
			x: 4,
			y: 3,
			width: 174,
			height: 12,
		});

		this.bigFigure = new Ext.form.Label({
			itemId: 'bigFigure',
			cls: 'bigPriceBoxBigFigure',
			x: 9,
			y: 8,
			width: 165,
			height: 16,
		});
...

Which just doesn’t feel right given what I said above. Which leads to the question, what patterns are other people following in the RIA enterprise Javascript space?

Advertisement

~ by mdavey on November 25, 2010.