Friday, September 6, 2013

Efficient coding style in ExtJs: Volume 6


Very important links related to this post:

41) Don’t keep reference of ‘this’ to use it in event handler: Generally while working in the inline event handler function of any Extjs component, we don't get the reference of object of the corresponding class by using 'this' keyword. Usually, it gives the object of the component which event handler is this. So, to solve this problem, some developer used to keep the reference of class in some global variables inside the constructor or initComponent of that class and then use this global variable in inline handlers to get the object of the corresponding class. But, this is wrong practice and we should follow as given here. Click here to get complete idea about this.

42) Try to use client side caching: local storage, session storage, sqllite etc.: If we are using Html5, we can save some of our data on client side (not on cookies) and use it if use revisit that page again. Thus, we can avoid unnecessary hit to server and database. In extJs, we can use proxy to handle such cache. There are two types of proxies in ExtJs: ClientProxy and ServerProxy. ClientProxy is used to handle client side caching. There are three types of clientProxies:

·         Ext.data.proxy.LocalStorage: The LocalStorageProxy uses the new HTML5 localStorage API to load and save data into the client browser. The localStorage sets the fields on the domain; this means you can close the browser and reopen it, and the data will be in the localStorage. The localStorage is used for long-term storage; it is also accessible in all browser tabs/windows.

·         Ext.data.proxy.SessionStorage: The SessionStorageProxy uses the new HTML5 sessionStorage API to load and save data into the client browser. sessionStorage sets the fields on the window; this means that all the data will be lost when you close the browser, even if the website remains open in another browser window. The sessionStorage data is confined to the browser window that it was created in.

·         Ext.data.proxy.SessionStorage: MemoryProxy is a helper proxy. Usually, it is used to load some inline data into a store. The MemoryProxy contents are lost in every page refresh. It can be useful to load temporary data.

Beside these, some browser like chrome etc also supports a special type of client side database i.e. SqlLite and it can be used to store some data on client side. Thus, by using these techniques, we can enhance our application’s performance.

43) Don’t use Array.isArray(): Array.isArray(anyObject) function is used  to decide that whether “anyObject” is an array object. This function is working as needed in Chrome but not in IE. IE is not able to identify this function and giving error. We should use “instanceof” instead of this function to fulfill the same purpose. “instanceof” is working in both IE and Chrome.

44)      Be careful about Date formatting: While dealing with date parsing below are date string formats which are supported by IE and chrome.
                                 var dateString = "03/20/2008";                                 
                                 var dateString = "2008/03/20";                                                 
                                 var dateString = "03-20-2008";                                  
                                 var dateString = "March 20, 2008";                                         
                                 var dateString = "Mar 20, 2008";                                              
                                 var dateString = "Oct 2, 2011";

But  do not use  var dateString = "Oct/02/2011"; it not supported by IE, although works in chrome. It was being used in application I corrected it.

45)      Don’t forget followings: Below are the some points that we should not forget while sending our code in production:

·         No trailing commas.
·         Use multiline comments instead of single line comments even if you are commenting a single line.
·         No debuggers left uncommented in the code.
·         Don’t miss any semicolon where it is expected.
·         Don’t use consol.log() in production code.

Gyes! This is not the end of the list of Efficient coding style in ExtJs and javascript. I will keep updating this list whenever I got a new point. I am requesting to all readers that if you got any point that I have not mentioned in all the posts under heading “Efficient coding style in ExtJs”, please send me your points through the feedback section at the bottom of this post.

46) Avoid using doLayout()

47) Try to use component.suspendLayout() and component.resumeLayout()

48) Declare 3rd party library under require statement on the page where it is needed

49) Stop event bubbling if it is not needed.

50) Try to use component.suspendEvent() or component.resumeEvent() where needed.

51) Keep static text in separate file for localization point of view

52) From Extjs 5 ownward, try to use Reference instead of id or itemId

53) Write proper documentation for each and every class and function using JSDuck

54) Use deep:true to watch the changes in any attribute of a deeply nested object


1 comment:

  1. Hi, there is a typo on #42, 3rd bullet: it says "Ext.data.proxy.SessionStorage", where it should say "Ext.data.MemoryProxy". Best regards, nice compilation!!

    ReplyDelete

Please provide your precious comments and suggestion