Guidelines and Best Practices for Sencha Projects

Guidelines and Best
Practices for Sencha
Projects

Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
• Performance Guidelines
• General Guidelines
• Documentation Guidelines
• View Models and Data Binding
• Lifecycle Guidelines
- New Operator
- Controllers & Views
• Logging and Tracing
• Form Validation and Submission
• Scope
Agenda
2

Avoid Using doLayout()/updateLayout():
If at all there is a need, use suspendLayout flag.
• / /Turn the suspendLayout flag on
• containerPanel.suspendLayout: true
• // Trigger a layout.
• containerPanel.resumeLayouts();
• containerPanel.updateLayout();

Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
F 300 F F
500
suspendLayouts()
height
width
zindex
display
resumeLayouts(flushlayouts true/false)
updateLayout()

Effective use of event listeners :
Inefficient use slows down the application performance. For example:
listeners: {
load: {
fn: onFirstLoadData,
single: true
}
}

Avoid Over nesting :
It unnecessarily increases DOM Size and might lead to layout issues.
Replace Panels with Containers :
Ext JS Panels are more powerful (and expensive!) than basic containers.

Initial Page Load :
• <script src="filename.js"> tags should be placed as late in the body as
possible
• Make use of Ext JS “requires”
• Do not use Ext.require()
Event bubbling is a costly operation :
So handle it carefully.

1
2
3 Handler for handleParent event. return false.
4
5. this.enableBubble(‘handleparent’);
fireEvent(‘handleparent’);

Example:
xtype: 'button',
handler: function() {
this.enableBubble('MoreClicked');
this.fireEvent('MoreClicked', this);
}

Suspend and Resume events :
While manipulating bulk Dom elements of a component or bulk store records
or bulk array objects, suspend events to avoid multiple event execution,
nested layout executions and recursive DOM manipulation.
For example,
INCORRECT CORRECT

Performance Factors In Loops :
• Declaration of functions (and for that matter, other re-usable things) inside loops
wastes processing time, memory, and garbage collection cycles
INCORRECT CORRECT
• Calculate array length only once upfront and assign its value to a variable

Regular Expression:
• Store regular expressions in a variable
• Always add comments
INCORRECT CORRECT
• Cache literal Regular Expressions in a more permanent way
INCORRECT CORRECT

• Do not use Ext.apply () if recursive merging and cloning without referencing
the original objects / arrays is needed. Use Ext.Object.merge instead.
• Avoid hard coding of id property. Alternatively, use “itemId”.
• Avoid hard coding of height and width.
• If using a storeId, use fully qualified store class name as the storeId (e.g.
storeId : ‘MyApp.store.Businesses’).
• Specify font size as "em" or "%".
Localization and Internationalization:
• All static text should be defined in a separate file by keeping localization in
perspective.

Code documentation must be done using JSDuck annotations. Following are
the minimal documentation requirement:
• Every class must be documented
• Every public and protected property of a class must be documented along
with an example value. Document must indicate whether the property is
mandatory or optional. Default value must be specified for the optional
properties.
• Every public and protected method of a class must be documented
• Events fired by a class must be documented along with the parameters that
will be passed to a listener
JSDuck document must be generated from the documented code.
https://github.com/senchalabs/jsduck/wiki

View Models and Data Binding
18

• Preferred syntax for configuring a View Model.
viewModel : {
type: ‘app-main’
}
• Prefer using declarations over procedural calls. For example:
stores: {
businesses: {
model : ‘MyApp.model.Business’,
autoLoad : true
}
}

• Preferably, bind properties in the view class declaration itself rather than
binding procedurally
• Don’t create child View Models unless they are actually needed.
• For derived variables, use formulas
• Use formulas instead of repeating binds. For example,
one formula with 3 dependencies and 4 users make 3 + 4 = 7 dependencies
to track in the ViewModel. Compared to 4 users with those 3 dependencies
on themselves we would have 3 * 4 = 12 dependencies. Fewer
dependencies to track means less memory used and time to process them.

• Use “deep:true” while binding config with an object / property embedded
inside another object. For example, if this is the object
detail : {
name : ‘Rohit’,
address : {
state : ‘Telangana’,
city: ‘Hyderabad’
}
}
To be notified of changes in the address object, use the following syntax:
bind : {
data : {
bindTo : ‘{detail}’,
deep: true
}

New Operator :
• Use {} instead of new Object()
• Use [] instead of new Array()
• For Ext JS objects, you should use the create() method
• For dates related objects, you still require to use new

Views and View Controllers:
• Views have the following lifecycle methods:
1. constructor
2. initComponent
• View Controllers have the following 3 lifecycle methods :
1. beforeInit
2. init
3. initViewModel

When combined, the view and controller lifecycle methods are executed in
following order
1. constructor of View
2. beforeInit of Controller
3. initComponent of View
4. init of Controller
5. initViewModel of Controller

Dom Updates In Component LifeCycle:
• Changing elements after DOM elements are rendered causes reflows,
resulting in slowing down of the application. Write code that avoids DOM
read/writes.
• If required, add CSS classes and set styles in beforerender event handler
rather than afterrender.
• For some code, we may need to acquire the element size. If this is the case,
then consider handling the ‘boxready’ event. For example:
if ( height of element > 100px ) {
//do something
}

Tracing :
• Use Ext.getDisplayName(). For example:
throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message
here');
• Check call stack.

Logging :
• Use Ext.log compared to console.log. If console is present, it will be used. In
other cases, the message is logged to an array:
"Ext.log.out“
An attached debugger can watch this array and view the log. The log buffer is
limited to a maximum of "Ext.log.max" entries (defaults to 250).
• Debugging statements like console.log() and debugger should never be shipped
into standard production environments.
INCORRECT CORRECT

• Use the <debug> tag.
• Ext JS 5.x provides “debugHooks” config for a class, through which you can
write debugging statements.

Form Validation & Submission
31

• Use models for validating and submitting the forms and push the field
validation logic (including custom validations) inside models.
• Use loadRecord method of the FormPanel.
• Instead of using explicit logic to enable / disable a submit button, make use of
“formBind: true”.

Global Variables:
• Variables declared outside a function are considered in global scope –
irrespective of the usage of “var” keyword.
• These variables are in global “window” namespace. For example, the
following are same:
var gCompanyName = “Walking Tree”;
window.companyName = “Walking Tree”; //more explicit
• If you want to define global variables then use them inside application
namespace. For example:
Ext.define( ‘MyApp.util.Constants’,{
singleton : true,
ANIMATION_Time : 100,
// more variables and methods
});

• Consider saving the “this” scope into a different (and smaller) name (e.g.
me). For example,
Ext.define(‘MyApp.view.MyPanel’,{
initComponent : function () {
var me=this;
me.add () {
xtype : ‘button’,
handler: function () {
this.getHeight();
me.getTitle();
}
me.callParent( arguments );
}
});

Upcoming Online Training On Best Practices and Coding
Guidelines on:
28th Nov’, 2015
For details contact:
Ratan Agarwal
cel: +91 95 81400033

Guidelines and Best Practices for Sencha Projects

More Related Content

Viewers also liked (14)

Similar to Guidelines and Best Practices for Sencha Projects (20)

Recently uploaded (20)

Guidelines and Best Practices for Sencha Projects