.....being continued from eficient coding style in ExtJs: Volume 3
.....To be continued in Efficient coding style in ExtJs: Volume 5
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