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

42
Clean JavaScript Code only dream or reality? Sebastian Łaciak

Upload: proidea

Post on 15-Jul-2015

76 views

Category:

Software


0 download

TRANSCRIPT

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

Clean JavaScript Code

only dream or reality?

Sebastian Łaciak

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

• Clean Code

• Node.js

• Environment

• Tests Support

• Design Patterns

Agenda

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

Clean Code

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

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

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

E1: Build Requires More Than One Stepmvn install

E2: Tests Require More Than One Stepkarma start

Environment

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

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

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

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

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

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

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

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

…}

F3: Flag Argumentsfunction sort(ascOrder) {…}

F4: Dead Function

Functions

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

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

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

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

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

Node.js

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

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

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

Node.js

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

Node.js

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

Java Platform

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

Node.js – Single Thread

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

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

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

Environment

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

Development Environment

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

Development Environment

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

JSHint

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

Tests Support

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

Unit tests

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

QUnit

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

Jasmine

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

Mocks

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

Mocks – QUnit with Sinon

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

Mocks – Jasmine

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

Karma runner

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

Karma configuration

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

QUnit - browser

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

QUnit - browser

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

Karma Coverage with QUnit

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

PhantomJS

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

Design Patterns

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

Namespaces

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

Class with encapsulation

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

Singleton

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

Inheritance

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

Factory

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