Top 10 Tips: Sencha Touch Best Practices Review

A little while ago Modus Create released the video and slides for a ‘Sencha Touch Best Practices for Enterprise JavaScript Applications’ webinar that took place on November 15th, 2013. The webinar was led by Arthur Kay, who is a Solutions Architect at Sencha and Jay Garcia, the CTO of Modus Create. You can check out the video for yourself below:

Best Practices for Sencha Javascript Applications from Sencha on Vimeo.

The whole video is worth watching, but I’m going to be summarising a few of my favourite points the video raised. In all there are 10 tips so I’ll be focusing on the ones that felt most relevant to me or made me think “Ah yes… I really should be doing that” but again, I encourage you to watch the whole video as this may be different for you.

1. Nesting callbacks == nightmare

There may be times where you need to perform certain asynchronous operations (that is code that won’t run in sync with your application, i.e: when you make an Ajax request the rest of your code will not wait for a response before continuing) that need to be executed in a certain order. It may be tempting to rely on the success callbacks in a way the following code demonstrates:

Ext.Ajax.request({
  url: 'someUrl.php',
  success: function (response) {
    Ext.Ajax.request({
      url: 'someUrl.php',
      success: function (response) {
        Ext.Ajax.request({
          url: 'someUrl.php',
          success: function (response) {},
        });
      },
    });
  },
});

The problem with nesting callbacks like this, although it may be easier, is that the code will become hard to read and very hard to debug. It is highly encouraged to avoid pyramid code like this. The best practice solution offered is to use scope, as is demonstrated in the following example:

getPeople: function(people){
	Ext.Ajax.request({
		url: 'people.php',
		method: 'GET',
		params: people,
		scope: this,
		success: this.onAfterGetPeople
	});
},

onAfterGetPeople: function(response){
	var jsonData = Ext.decode(response.responseText);

	this.getDepartments(jsonData.departments);
},

getDepartments: function(departments){
	Ext.Ajax.request({
		url: 'departments.php',
		method: 'GET',
		params: departments,
		scope: this,
		success: this.onAfterGetDepartments
	});
},

onAfterGetDepartments: function(response){

}

2. Object References

The webinar warns against the use of long chains such as the following:

globalVar.some.ridiculous.chain.method();

The problem with this is that it can lead to poor performance, and this performance issue is compounded if it is used within a loop. Sometimes a chain like this is necessary, but the performance penalty can be minimised by only performing this once and storing a reference to the object, for example:

var reference = globalVar.some.ridiculous.chain;

for (var i = 0; i < 1000; i++) {
  reference.method();
}

Now the complete chain only needs to be looked up once, and from there we can use the locally stored reference. In addition to this, it is highly recommended to avoid using the following methods:

document.getElementById()
Ext.getCmp()
Other global queries

3. What is ‘this’

The ‘this’ keyword can be very confusing, it describes the object that the function is executing in. As the video points out, there is two simple rules for this which can be described as follows: 1. When a function is executed via a var reference, the default execution context (this) is ‘window’ 2. When a function is executed via an object key, the execution context is the object Here’s an example of 1:

var myFn = function () {
  console.log(this);
};
myFn();

and an example of 2:

var person = {
  name: 'jay',
  getName: function () {
    console.log(this);
  },
};

person.getName();

You can check out the video for more confusing examples, but these rules will always be true.

Time for a challenge!

I know it’s a bit of a long watch, but I’d like to hear your three favourite points from the video in the comments below. If you’re on twitter, make sure to follow Arthur and Jay and send them your thanks!