guidelines and best practices for sencha projects

Guidelines and Best Practices for Sencha

Projects

• 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

Performance Guidelines

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

F 300 F F

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.

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

• 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

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

• 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

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

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

• 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

Thank You

guidelines and best practices for sencha projects

Design

sencha touch intro

beautifying sencha touch

sencha services

celestial & sencha relationship

sencha and spring

sencha keynote

building sencha themes

sencha wp as to js sencha

sencha animator

sencha touch & phonegap

workshop on sencha touch - part 3 - mvc in sencha touch

sencha touch - introduction

extjs sencha touch

sencha extjs 4

sencha at xero

sencha touchonbb10 bootcamp

faq sencha

sencha touch.key - meetup

protect your assets sencha desktop packager · donald carr,...

sencha touch 2.0 vs sencha touch 2.1 beta3 list와 data...