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


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()


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.


12

3 Handler for handleParent event. return false.

45. 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

General Guidelines

14


• 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


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

}

}

Lifecycle Guide Lines

22


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

}

Logging & Tracing

27


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”.

Scope

33


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

Thank You

37

Design

Guidelines and Best Practices for Sencha Projects