Writing a high quality code

SakiJozef Sakáloš

• provide project consultancy and supervision

• on-line consultancy, code review, extensions

• deliver Sencha Ext and Touch Courses

Contact

• jsakalos@extjs.eu, jsakalos@gmail.com

• Facebook: jsakalos

• Skype: jsakalos

• Sencha Forums: jsakalos

Code Quality

Code must work, but

• fixing a bug introduces (many) new bugs

• a new developer cannot (easily) comprehend the code

• implementing changes/features is (extremely) difficult

• no, or not up-to-date documentation

• cross browser problems

if(anyOfAbove === “yes”) {

codeQuality !== “high enough”;

}

Quality

1. is degree of perfection of a product

2. is the standard of something as measured against other things of a similar kind

High quality code is

1. pleasant to read and easy to grasp

2. abide by standards

3. modular

4. bug-free

High quality code is

5. finished

6. clean

7. documented

8. working

The code must be pleasant to read and

easy to grasp

Write the code for another person

Ugly code

Ugliest code

Beautiful code

The code must abide by standards

Two kind of standards

• JavaScript standards

• your coding conventions

http://jslint.com

Do you have a written Code Style Guide?

Style Guide

• naming conventions

• spaces, indenting, commas

• how to write docs

• how to write file header footer

• ... and others

Sencha recommends naming conventions in The Class System

guide

Code must be modular

Example

Task #1:Split the app into small modules.

Rule #1: Define and then abide by API of

modules

Corollaries

• controller must not know view internals

• view must fire custom events

• dynamic view must expose an API

• view must not access another view

Don’t do it like this

Controller

ViewButton

ListenHide/Show

View

StoreRecord/Field

...but like thisController

View

Button

View

Store

setVisible

handler

custom event

updateRecord

No more spaghetti code

The code must be bug-free

The code must be finished

Finished === there is nothing more to be done on it

if(code.indexOf(“@todo”) !== -1) { code !== “finished”;}

The code must be documented

see http://github.com/senchalabs/jsduck

And, of course, the code must WORK!

Questions?

Happy quality coding!