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 Step
mvn install
E2: Tests Require More Than One Step
karma start
Environment
G2: Obvious Behavior Is Unimplemented
function getValue() {
this.otherValue = null;
counter = counter + 1;
return counter;
}
G3: Incorrect Behavior at the Boundaries
function 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 Code
G10: Vertical Separation
function add(a, b) {
AssertArg.notUndefined(a);
AssertArg.notUndefined(b);
return a + b;
}
G11: Inconsistency
function 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 Arguments
function doSth(a,b,c,d,e,f,g,h) {
…
}
F3: Flag Arguments
function sort(ascOrder) {…}
F4: Dead Function
Functions
N1: Choose Descriptive Names
function doSth(a,b,c,d,e,f,g,h) {…}
N5: Use Long Names for Long Scopes
var pageDisplayCounter = 1;
N7: Names Should Describe Side-Effects
function getOrCreate() {…}
Names
T1: Insufficient Tests
it("should return sum of 1 and 3", function() {
var result = calculator.add(1, 3);
});
T2: Use a Coverage Tool!
T3: Don’t Skip Trivial Tests
function 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 building
fast, scalable network applications. Node.js uses an event-driven, non-blocking
I/O model that makes it lightweight and efficient, perfect for data-intensive
real-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. npm
runs through the command line and manages dependencies for an application.
It also allows users to install Node.js applications that are available on the npm
registry.
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
4Developers 2015: Clean JavaScript code - only dream or reality - Sebastian Łaciak

4Developers 2015: Clean JavaScript code - only dream or reality - Sebastian Łaciak

  • 1.
    Clean JavaScript Code only dreamor reality? Sebastian Łaciak
  • 2.
    • Clean Code •Node.js • Environment • Tests Support • Design Patterns Agenda
  • 3.
  • 4.
    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
  • 5.
    E1: Build RequiresMore Than One Step mvn install E2: Tests Require More Than One Step karma start Environment
  • 6.
    G2: Obvious BehaviorIs Unimplemented function getValue() { this.otherValue = null; counter = counter + 1; return counter; } G3: Incorrect Behavior at the Boundaries function 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
  • 7.
    G5: Duplication DRY –Don’t repeat yourself G9: Dead Code G10: Vertical Separation function add(a, b) { AssertArg.notUndefined(a); AssertArg.notUndefined(b); return a + b; } G11: Inconsistency function setLastName(lName) { surName = lName; } General
  • 8.
    G20: Function NamesShould 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
  • 9.
    F1: Too ManyArguments function doSth(a,b,c,d,e,f,g,h) { … } F3: Flag Arguments function sort(ascOrder) {…} F4: Dead Function Functions
  • 10.
    N1: Choose DescriptiveNames function doSth(a,b,c,d,e,f,g,h) {…} N5: Use Long Names for Long Scopes var pageDisplayCounter = 1; N7: Names Should Describe Side-Effects function getOrCreate() {…} Names
  • 11.
    T1: Insufficient Tests it("shouldreturn sum of 1 and 3", function() { var result = calculator.add(1, 3); }); T2: Use a Coverage Tool! T3: Don’t Skip Trivial Tests function setLastName(lName) { firstName = lName; } T6: Exhaustively Test Near Bugs T9: Tests Should Be Fast Tests
  • 12.
  • 13.
    Node.js® is aplatform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. Node.js
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
    npm is apackage manager for JavaScript, and is the default for Node.js. npm is bundled and installed automatically with the Node.js environment. npm runs through the command line and manages dependencies for an application. It also allows users to install Node.js applications that are available on the npm registry. Node Package Manager
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
    Mocks – QUnitwith Sinon
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.