This is a summary of "best practices" recommended for developing medium to large-scale qooxdoo applications.
This should always be the goal, especially when developing large applications. Regarding widget handling this means to avoid
To be clear: the use of timeouts is not wrong by default. There are scenarios in which a timeout can be reasonable like giving the browser the time to paint the selection at a certain widget before modifying another widget. Nevertheless be careful with every timeout and document its purpose in the code clearly. With every timeout a part of your code is executed asynchronously and you loose control over the flow of your application. This can result in errors which are very difficult to debug.
Avoid passing around JSON data structures in JavaScript functions.
Most AJAX applications hold data in a local data model. This data is most commonly sent as JSON data structures by the server and it is tempting to pass around bits of this JSON data in the JavaScript application code. Don't do this :-). It is worth the effort to wrap this data into accessor classes and pass around instances of these classes instead.
Lets take an addressbook as example. The JSON data could look like:
var address = {
"firstname" : "Klara",
"lastname" : "Korn",
"birthday" : 275353200000
}
A function could refer to this data directly by accessing the data fields.
// Attention: Not recommended coding style!
function printContact(addressData) {
var contact = addressData.firstname;
if (addressData.middlename) {
contact += " " + addressData.middlename;
}
contact += " " + addressData.lastname;
contact += " born at " + new Date(addressData.birthday);
alert(contact);
}
printContact(address);
It is worth to do the additional work and write an accessor class, which encapsulates each access to the underlaying JSON data. An accessor could look like the following in qooxdoo:
qx.Class.define("Address",
{
extend : qx.core.Object,
construct : function(data) {
this._data = data;
},
members :
{
getFirstName : function() { return this._data.firstname },
getMiddleName : function() { return this._data.middlename || ""},
getLastName : function() { return this._data.lastname },
getBirthday : function() { return new Date(this._data.birthday) },
getName : function() {
var name = this._data.firstname;
if (this._data.middlename) {
name += " " + this._data.middlename;
}
name += " " + this._data.lastname;
return name;
},
}
});
function printContact(address) {
var contact = address.getName() + " " + address.getBirthday();
alert(contact);
}
printContact(new Address(address));
Reasons not to pass around JSON are:
Especially for the application's initial startup it is important to minimize the byte-size of transferred data and also to reduce the number of HTTP requests.