Guidelines and Best Practices for Sencha Projects
Transcript of 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
Performance Guidelines
3
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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()heightwidthzindexdisplayresumeLayouts(flushlayouts true/false)updateLayout()
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Effective use of event listeners :
Inefficient use slows down the application performance. For example:
listeners: {
load: {
fn: onFirstLoadData,
single: true
}
}
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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.
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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.
Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
12
3 Handler for handleParent event. return false.
45. this.enableBubble(‘handleparent’);fireEvent(‘handleparent’);
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Example:
xtype: 'button',
handler: function() {
this.enableBubble('MoreClicked');
this.fireEvent('MoreClicked', this);
}
Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
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
Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
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
Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
Regular Expression:• Store regular expressions in a variable • Always add comments
INCORRECT CORRECT
• Cache literal Regular Expressions in a more permanent way
INCORRECT CORRECT
General Guidelines
14
Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
• 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.
Documentation Guidelines
16
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
• 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
}
}
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
• 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.
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
• 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
}
}
Lifecycle Guide Lines
22
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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
}
Logging & Tracing
27
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Tracing :• Use Ext.getDisplayName(). For example:
throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
• Check call stack.
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
• 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
Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
• 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”.
Scope
33
Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
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
});
Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
• 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 );
}
});
Copyright © 2008 Walking Tree Consultancy Services . All rights reserved.
Upcoming Online Training On Best Practices and Coding Guidelines on:
28th Nov’, 2015
For details contact: Ratan Agarwal
cel: +91 95 81400033
Thank You
37