Saturday, November 20, 2010

XJS: Avoiding of Anonymous Functions Example

One of the difficulties one faces quickly using the ExtJS framework is the code organization. Any project quickly grows into a jungle of anonymous functions and heavily nested configuration objects. Hard to read and hard to maintain.
Examples commonly start simple but as soon as more elements are added they turn off newbies. A configuration object spanning multiple screens is not easy to digest, but this is how most online examples are presented. This, according to my informal survey, discourages new developers from proceeding.
This, in my opinion, is one of the greater roadblocks to learning the framework and making scalable ExtJS apps. I understand that changes in ExtJS 4 will introduce a more mature MVC based application framework; however, the examples I have seen are still heavily reliant on multi-level nesting and anonymous functions.
It is of course, a matter of preference, but I do find organizing code written in that fashion harder to read and manage long term.
For once, common mistakes, such as missing a semicolon, comma, or bracket closure, result in disproportionate debugging time. On the other hand, having multiple team members working in their own "sandbox" is hard to do if everyone is trying to change the same file.
Thus, I was looking for alternate organization but could not find a simple example to show that another approach was possible.

Take this common ExtJS code as example (this is a fairly simple example in ExtJS realm). It draws a border layout based viewport:


Ext.onReady(function(){
new Ext.Viewport({

layout: 'border',
items: [{
region: 'north',

html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,

border: false,
margins: '0 0 5 0'
}, {

region: 'west',
collapsible: true,
title: 'Navigation',

width: 200
// the west region might typically utilize a TreePanel or a Panel with Accordion layout
}, {
region: 'south',

title: 'Title for South Panel',
collapsible: true,
html: 'Information goes here',

id: 'southPanel',
split: true,
height: 100,

minHeight: 100
}, {
region: 'east',

title: 'Title for the Grid Panel',
collapsible: true,
split: true,

width: 200,
xtype: 'box'
// more nested code could be added here, e.g a GridPanel

}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title

items: {
title: 'Default Tab',
html: 'Tab conent'
}
}]
});
});'


The formatting is nicely done, but still requires some getting used to. Only a few nested elements in this one yet the complexity can be already seen. What if you had a team of developers each working on one of the panels?

I prefer a more verbose but easier maintainable format that achieves the same result while allowing easier developer task separation (the use of multiple script tag is optional, I wanted to show a sense of separation of code):



<script type="text/javascript">
//we define a namespace to use for organization. This is optional.
Ext.namespace('startup');
</script>

<!-- panel definitions could be in another file -->
<script type="text/javascript">
// each panel could be seperate script file maintained by seperate developer or dynamically included via

// app server such as PHP / Railo / etc.
startup.northpanel = {
region: 'north',

html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,

border: false,
margins: '0 0 5 0'
};


startup.westpanel = {
region: 'west',
collapsible: true,

title: 'Navigation',
width: 200
};

startup.southpanel = {

region: 'south',
title: 'Title for South Panel',
collapsible: true,

html: 'Information goes here',
id: 'southPanel',
split: true,

height: 100,
minHeight: 100
};


startup.centerpanel = {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title

items: {
title: 'Default Tab',
html: 'Tab Conent.'

}
};

//assemble panels here into array, alternatly this array could be the items definition
startup.aItems = [startup.northpanel,startup.westpanel,startup.southpanel,startup.centerpanel];

</script>

<script type="text/javascript">
startup.DoInit = function () {

//create view port
var bport = new Ext.Viewport({
layout: 'border',

items: startup.aItems
});
}
</script>


<script type="text/javascript">
//the actual ExtJS onReady function remains very small
Ext.onReady(function(){
startup.DoInit();

}); //end onReady
</script>


Of course, there is the element of preference and argument about throw away functions, e.g. only run once; I would still prefer good naming and definition as this is the long run makes my life easier.

Feel free to comment.

Cheers,
-B

Tuesday, November 16, 2010

XJS: Sencha 2010 con impressions

I am attenting the Sencha (formerly ExtJS) developer conference to learn about the future. Overall good energy at this conference. Definite feel of excitement about product and company from the developer community. Here are some early impressions:
  • Lots of activity since the company got funding
  • Company is trying to grow up and it shows: products are beeing build out, revenue model is being decided on / experimented with, business processes look raw around the edges. Overall this puppy is growing up.
  • Sencha has many projects in the cooking pot with some very innovative ones in the mix while still putting good improvements into the existing ones. The question will be, is the company going to be able to pull all this off or are they overloaded. Deliveries could slip, quality could suffer etc.
  • Their bread and butter ExtJS 4 is getting a dose of good overwhaul inlcluding things I have been griping about for a while. The main thing for me is that a best practices application structure is now supported out of the box, so you can finally organize your code for larger apps in a meaningfull way. (Yeah!!!) . My impression is that there are still some challenges to overcome with backward compatibility which they are working on. Many more good things of course, hope they can pull it off.
  • The developer interest is increasing, 3 x the number of developers attended this year.
  • Keynote from at&t cto John Donovan (he loves all phones and all people, yeah very politically correct answers all the way). The nugget from him was the statement that HTML5 is a viable application plattform and mobile apps will be written in it more the future and at&t will support it on many devices with native device library connections. If you believe this, the future of Flash and Flex would look limited. Another conference attendee said "Adobe is the dead man walking". Wow!
  • The Sensha touch platform for mobile apps is going to be free. Cool.
  • Common Annoyance: "It works in webkit" myopia. Understandably browsers supporting HTML5 are cooler from developer perspective but many examples given did not work or broke when another browser was used (Firefox, IE). This is poor for any platform claiming universal compatibility. Hopefully this will improve next year.


Cheers,
-B