Please click on any Advertisement, if you like this blog.

Friday, September 6, 2013

Efficient coding style in ExtJs: Volume 4

.....being continued from eficient coding style in ExtJs: Volume 3

Very important links related to this post:

25)   Use get/set methods: if you are using config function to declare a variable in a class, ExtJs will automatically create its getters and setters functions and it’s better to use these getters and setters to enhance the code readability. We can also override these functions and can add some more functionality in these functions that will execute if we call these function instead of directly using that variable name. So, always try to use getters and setters of class level variables to use them.

26)  Never create a component with auto layout. A very common mistake is done by most of the ExtJs developer that they creates container but forget to assign some layout to it. Although it works well on some browsers or particular version of a browser, yet in long run it will create problems like causing blank screen or distortion of some of the components. E.g.

Ext.create(‘Ext.panel.Panel’,{
                height: 200,
                width: 500,
                //layout: ‘hbox’,          // anti pattern if layout is not defined
                items:[
                                {
                                                xtype: ‘button’,
                                                id: ‘button1’
                                                flex: 1
},{
                                                xtype: ‘button’,
                                                id: ‘button2’
                                                flex: 1
}
]
});

Here, as layout is not defined in the panel, the height and width of this panel will not be distributed among its component depending on their flex value. The reason behind this is that the layout of containers assures that how the height and width of the container is provided to the components of that container. If we uncomment the line “layout: ‘hbox’”, both the buttons will take the required height and width of their parent container.

27) Avoid using fixed height and width: Never provide fixed height and width to any container or component in your application as this will destroy the layout liquidity of your application. Always provide a height and width to your top most container or view port that will define your screen size and then carefully distribute this dimension to your child components or containers by properly using flex and layouts. Even for defining dimension of your top most container or view port, don’t use hard coded height or width, but calculate it by using ExtJs functions like “Ext.getBody().getViewSize().height” and “Ext.getBody().getViewSize().width” as follows:

Ext.create(“Ext.panel.Panel”,{
                height: Ext.getBody().getViewSize().height,
                width: Ext.getBody().getViewSize().width
});

28) Properly use flex keyword: Flex is a very important keyword used for maintaining liquid layout. It is used to receive the dimension from parent container depending on its value. E.g. if two components are provided with the flex = 1 and flex = 2, then these components will receive dimension from parent container in ration 1:2.
Another important point to be noted here is that the flex value divides only height or width of its parent container but not both according to the ratio of child components’ flex value depending upon the layout type of the parent container. E.g.

Ext.create(‘Ext.panel.Panel’,{
                height: 200,
                width: 500,
                layout: ‘hbox’,         
                items:[
                                {
                                                xtype: ‘button’,
                                                id: ‘button1’
                                                flex: 1
},{
                                                xtype: ‘button’,
                                                id: ‘button2’
                                                flex: 1
}
]
});

Here, as the layout is hbox, only width will be divided in the ratio of flex value of the buttons and height will be 100% for both buttons i.e. width will be 250 and height will be 200 for each of the buttons. Similarly if we change the layout type of the panel to vbox, then width will be 500 and height will 100 for each of the buttons. So, properly and carefully use flex to achieve better liquid layout.

29) Minimize use of minWidth, maxWidth, minHeight, maxHeight: Try to use these attributes in your components only when they are much needed otherwise don’t use them as they are very expensive in terms of layouting of the components. If any of these attribute is encountered in a component, the layout is recalculated. So, these are very expensive.

30) Use code minification by Sencha command tool: Minification is the process of eliminating white space, comments, and other nonessential parts of the JavaScript code to decrease the size of the JavaScript files that need to be transferred from the server to the browser. In addition to the above tasks, minifiers also rename variables to shorter names (but only when it’s safe to do so), such as the parameters D, C, B, A in the preceding code. Minifiers can rename only local variables because renaming globals might break the code. This is why it’s a good practice to use local variables whenever possible. If you use a global variable, such as a DOM reference, more than once or twice in a function, it’s a good practice to assign it to a local variable. This is usually done by a tool (a minifier) such as the ExtJs command tool (in case of application developed in ExtJs)  or Yahoo! YUICompressor or Google’s Closure Compiler (in case of normal javascript application ) and helps speed up the page loading time. It is important to minify the production-ready scripts because this results in significant savings, often cutting the size in half. Provide here the link of your Code Minification Steps

31) Keep Dom Lighter: Always try to keep Dom as lighter as possible to speed up the Dom access and manipulation. This can be done by removing the unnecessary Dom elements. E.g. If we are using card layout and in each card we are showing huge containers and components and if the user is not returning to the previous card, it is better to cache the Dom elements in a variable in your program (so that the required containers and components are not created again and again) and then remove that Dom elements from Dom to make it lighter.

32)   Minimize Dom access: DOM access is expensive; it’s the most common bottleneck when it comes to JavaScript performance. This is because the DOM is usually implemented separately from the JavaScript engine. The bottom line is that DOM access should be reduced to minimum. This means:

·         Avoiding DOM access in loops
·         Assigning DOM references to local variables and working with the locals
·         Using selectors API where available
·         Caching the length when iterating over HTML collections
·         Always try to use ExtJs functions to access or manipulate Dom to gain cross browser facility otherwise code may fail on some browser as each browser has its own way of Dom access.

.....To be continued in Efficient coding style in ExtJs: Volume 5

Very important links related to this post:

No comments:

Post a Comment

Please provide your precious comments and suggestion