4developers 2015: clean javascript code - only dream or reality - sebastian Łaciak

Clean JavaScript Code

only dream or reality?

Sebastian Łaciak

• Clean Code

• Node.js

• Environment

• Tests Support

• Design Patterns

Agenda

Clean Code

C1: Inappropriate Information/** ------------------------------- REVISION HISTORY -------------dd-mmm-yyyy <name> <problem number> <description>06/01/99 Kowalski Andy initial*/

C2: Obsolete Comments/* return sum of arguments */function multiply(a, b) { return a * b; }

C3: Redundant Comments/* multiply two numbers */function multiply(a, b) { return a * b; }

C4: Poorly Written Comments/* I had to write this comment due to checkstyle */function add(a, b) { return a + b; }

C5: Commented-Out Code/* function devide(a, b) { return a / b; } */

Comments

E1: Build Requires More Than One Stepmvn install

E2: Tests Require More Than One Stepkarma start

Environment

G2: Obvious Behavior Is Unimplementedfunction getValue() {

this.otherValue = null;counter = counter + 1;return counter;

}

G3: Incorrect Behavior at the Boundariesfunction getLastName() {

return firstName;}

G4: Overridden Safeties/** QUnit.test("should return sum of 1 and 3", function(assert) {

assert.equal(this.calculator.add(1, 3), 4);});

}*/

General

G5: Duplication DRY – Don’t repeat yourself

G9: Dead CodeG10: Vertical Separation

function add(a, b) {AssertArg.notUndefined(a);AssertArg.notUndefined(b);

return a + b;}

G11: Inconsistencyfunction setLastName(lName) {

surName = lName;}

General

G20: Function Names Should Say What They Do

function getValue() {this.otherValue = null;counter = counter + 1;return counter;

}

G25: Replace Magic Numbers with Named Constants

var MONTH_APRIL = 3;

General

F1: Too Many Argumentsfunction doSth(a,b,c,d,e,f,g,h) {

…}

F3: Flag Argumentsfunction sort(ascOrder) {…}

F4: Dead Function

Functions

N1: Choose Descriptive Namesfunction doSth(a,b,c,d,e,f,g,h) {…}

N5: Use Long Names for Long Scopesvar pageDisplayCounter = 1;

N7: Names Should Describe Side-Effectsfunction getOrCreate() {…}

Names

T1: Insufficient Testsit("should return sum of 1 and 3", function() {

var result = calculator.add(1, 3);});

T2: Use a Coverage Tool!

T3: Don’t Skip Trivial Testsfunction setLastName(lName) {

firstName = lName;}

T6: Exhaustively Test Near Bugs

T9: Tests Should Be Fast

Tests

Node.js

Node.js® is a platform built on Chrome's JavaScript runtime for easily buildingfast, scalable network applications. Node.js uses an event-driven, non-blockingI/O model that makes it lightweight and efficient, perfect for data-intensivereal-time applications that run across distributed devices.

Node.js

Node.js

Node.js

Java Platform

Node.js – Single Thread

npm is a package manager for JavaScript, and is the default for Node.js.npm is bundled and installed automatically with the Node.js environment. npmruns through the command line and manages dependencies for an application.It also allows users to install Node.js applications that are available on the npmregistry.

Node Package Manager

Environment

Development Environment

Development Environment

JSHint

Tests Support

Unit tests

QUnit

Jasmine

Mocks

Mocks – QUnit with Sinon

Mocks – Jasmine

Karma runner

Karma configuration

QUnit - browser

QUnit - browser

Karma Coverage with QUnit

PhantomJS

Design Patterns

Namespaces

Class with encapsulation

Singleton

Inheritance

Factory