Efficient coding style in ExtJs: Volume 1

Very important links related to this post:

• Collection of my posts
• Efficient coding style in ExtJs: Volume 1
• Efficient coding style in ExtJs: Volume 2
• Efficient coding style in ExtJs: Volume 3
• Efficient coding style in ExtJs: Volume 4
• Efficient coding style in ExtJs: Volume 5
• Efficient coding style in ExtJs: Volume 6

Hi gyes. I am working on javascript from years and during this I have identified some important points that we must follow to make our application more responsive, more efficient and bug free. I am presenting these points in my several posts (Links of all these post provided at the top and bottom). My each post related with "Efficient Coding Style" is having 8 points. I have tried my best to explain it and tried to provide example code for better understanding. I am requesting you to please go through examples. These will provide lots of information.

One thing more, if you have any point that I have missed in my posts related with "Efficient Coding Style",  please mention that in feedback column at the bottom, so that I can include that in these list.

Gyes, lets make it one place for all important points that should be followed while coding in Javascript and ExtJs. 

1)      Never use “new” keyword: Using ‘new’ keyword to create an instance of a component or a class in ExtJs is a wrong practice as it does not follow the component life cycle. Always use Ext.create() function to create an object. E.g.

Wrong: var obj = new Ext.panel.Panel();

Right: var obj = Ext.create(‘Ext.panel.Panel’);

2)      Initiate Literals: Do not directly create objects of literals if you want to just create the blank object in javascript like

var stringObj = new String();

var arrayObj = new Array();

var obj = new Object();

These are not right way to create object in javascript, because if we use these process, control will traverse through whole class hierarchy. So, instead of these, we should use following ways to create object of these classes:

var stringObj = ‘’;

var arrayObj = [];

var obj = {};

But you might be inheriting legacy code written by others, so you should be aware of one “feature” of this constructor (or yet another reason not to use it). The feature in question is that the Object() constructor accepts a parameter and, depending on the value passed, it may decide to delegate the object creation to another built-in constructor and return a different object than you expect. E.g.

// Warning: antipatterns ahead

// an empty object

var o = new Object();

console.log(o.constructor === Object); // true

// a number object

var o = new Object(1);

console.log(o.constructor === Number); // true

3)      Smart use of getCmp(): It will return you an item object matching the id you passed it. This will be the fastest method to return an item. All items when created with an id are registered in a single object using their id as a key. So Ext.getCmp( myId) will look up and return theRegistrationObject["myId"]; So it will be very quick.

But it fails if we provided same id to more than one component. In that case, it will return the last one. Beside this, we should not use it to get the object. We should try to use it once and apply its outcome at many places by keeping the outcome in a variable.

If we need to use same id for more than one component, we can use itemId. Let’s finddifference between id and itemId here.

4)      Avoid unnecessary global variables:  The problem with the global variable is that they are shared among all the code in your javascript application or web page. They live in the same global namespace and there is always a chance  of naming collisions – when two separate parts of an application define global variables with the same name but with different purposes. Second drawback of using unnecessary global variable is larger memory consumption as these global variable are generally not garbage collected and they never release memory.

5)      Use var keyword with global variable:  There is one slight difference between globals with var keyword and globals without var keyword – the difference is in the ability to undefine these variables using the delete operator:

Globals created with var ( Those created in the program outside any function) cannot be deleted. E.g.

                // define three globals

var global_var = 1;

global_novar = 2; // antipattern

(function () {

                global_fromfunc = 3; // antipattern

}());

// attempt to delete

delete global_var; // false

delete global_novar; // true

delete global_fromfunc; // true

// test the deletion

typeof global_var; // "number"

typeof global_novar; // "undefined"

typeof global_fromfunc; // "undefined"

6)      Try to remove unused variables and functions: Do not keep unused variables, functions and unnecessary comments in your code as these will only increase your file size and thus file loading time will be increased.

7)      Avoid object or variable creation in loop: If not needed, do not create even a single variable or object inside any loop because their numbers will increases with every iteration of loop causing memory leakage.

8)      Avoid unnecessary use of panel: Most of the ExtJS applications suffer from panel explosion. Everything is done using a panel, or to be more accurate, everything is done using several panels. The problem is using a panel when there are much more lightweight alternatives. Everyone loves panels but truth be told they're overkill for most parts of a UI. I once saw a UI that displayed a few dozen thumbnail images and each image was rendered as the HTML content of a different panel. All those panel were totally unnecessary. Consider instead...

·         Could you use HTML and CSS instead of a full component? An Ext.Template or Ext.XTemplate might prove helpful.

·         Could you just use a custom Ext.Component? There are various config settings for injecting HTML into a component: autoEl, html, tpl & data.

·         Could you use a DataView to render all of your data instead of a number of individual components?

·         Could you use an Ext.container.Container rather than an Ext.panel.Panel to reduce the overhead?

.....To be continued in "Efficient coding style in ExtJs: Volume 2"

Very important links related to this post:

• Collection of my posts
• Efficient coding style in ExtJs: Volume 1
• Efficient coding style in ExtJs: Volume 2
• Efficient coding style in ExtJs: Volume 3
• Efficient coding style in ExtJs: Volume 4
• Efficient coding style in ExtJs: Volume 5
• Efficient coding style in ExtJs: Volume 6