Clean Code Suraj Shirvankar Implementing SOLID principles in any programming language 

2 WARNING 

Suraj Shirvankar 3 @h0lyalg0rithm surajms.com Suraj Shirvankar was raised in Dubai. He is obsessed with learning different languages like Ruby, Java, Elixir and JavaScript. After some experience in a startup accelerator, he decided to move from Dubai to Spain where he works as the CTO of Paack. 

4 

5 

6 

7 

CLEAN CODE Clean code is code that is easy to understand and easy to change. 8 

Uncle Bob 9 http://cleancoder.com Robert Cecil Martin (colloquially known as Uncle Bob) is an American software engineer and author. He is a co-author of the Agile Manifesto. 

1 0 

1 1 

1 2 S.O.L.I.D PRINCIPLES 

1 3 S.O.L.I.D PRINCIPLES SRP The Single Responsibility Principle A class should have one, and only one, reason to change. OCP The Open Closed Principle You should be able to extend a classes behavior, without modifying it. LSP The Liskov Substitution Principle Derived classes must be substitutable for their base classes. ISP The Interface Segregation Principle Make fine grained interfaces that are client specific. DIP The Dependency Inversion Principle Depend on abstractions, not on concretions. 

1 4 

Single Responsibility Principle • A class must do one thing and one thing only • Break bigger classes into smaller ones 1 5 

BEFORE class UserSettings { constructor(user) { this.user = user; } changeSettings(settings) { if (this.verifyCredentials()) { // ... } } verifyCredentials() { // ... } } 1 6 AFTER class UserAuth { constructor(user) { this.user = user; } verifyCredentials() { } } class UserSettings { constructor(user) { this.user = user; this.auth = new UserAuth(user); } changeSettings(settings) { if (this.auth.verifyCredentials()) { } } } SRP 

1 7 S.O.L.I.D PRINCIPLES SRP The Single Responsibility Principle A class should have one, and only one, reason to change. OCP The Open Closed Principle You should be able to extend a classes behavior, without modifying it. LSP The Liskov Substitution Principle Derived classes must be substitutable for their base classes. ISP The Interface Segregation Principle Make fine grained interfaces that are client specific. DIP The Dependency Inversion Principle Depend on abstractions, not on concretions. 

1 8 

Open Close Principle • You should allow users to add new functionalities without changing existing code. 1 9 

class AjaxAdapter extends Adapter { constructor() { super(); this.name = 'ajaxAdapter'; } } class LocalStorageAdapter extends Adapter { constructor() { super(); this.name = 'localStorageAdapter'; } } class DataRequester { constructor(adapter) { this.adapter = adapter; } fetch(url) { if (this.adapter.name === 'ajaxAdapter') { return makeAjaxCall(url).then((response) => { // transform response and return }); } else if(this.adapter.name === 'localStorageAdapter') { return makeLocalStorageCall(url).then((response) => { // transform response and return }); } } } 2 0 function makeAjaxCall(url) { // request and return promise } function makeLocalStorageCall(url) { // request and return promise } 

class AjaxAdapter extends Adapter { constructor() { super(); this.name = 'ajaxAdapter'; } request(url) { // request and return promise } } class LocalStorageAdapter extends Adapter { constructor() { super(); this.name = 'localStorageAdapter'; } request(url) { // request and return promise } } class HttpRequester { constructor(adapter) { this.adapter = adapter; } fetch(url) { return this.adapter.request(url).then((response) => { // transform response and return }); } } 2 1 requester = new HttpRequester(ajaxAdapter) requester.fetch(‘http://example.com') 

2 2 SRP The Single Responsibility Principle A class should have one, and only one, reason to change. OCP The Open Closed Principle You should be able to extend a classes behavior, without modifying it. LSP The Liskov Substitution Principle Derived classes must be substitutable for their base classes. ISP The Interface Segregation Principle Make fine grained interfaces that are client specific. DIP The Dependency Inversion Principle Depend on abstractions, not on concretions. S.O.L.I.D PRINCIPLES 

2 3 

Liskov Substitution Principle • Derived types must be completely substitutable for their base types. 2 4 

class Rectangle { constructor() { this.width = 0; this.height = 0; } render(area) { } setWidth(width) { this.width = width; } setHeight(height) { this.height = height; } getArea() { return this.width * this.height; } } class Square extends Rectangle { setWidth(width) { this.width = width; this.height = width; } setHeight(height) { this.width = height; this.height = height; } } 2 5 function renderLargeRectangles(rectangles) { rectangles.forEach((rectangle) => { rectangle.setWidth(4); rectangle.setHeight(5); const area = rectangle.getArea(); // BAD: Returns 25 for Square. Should be 20. rectangle.render(area); }); } const rectangles = [new Rectangle(), new Rectangle(), new Square()]; renderLargeRectangles(rectangles); 

class Shape { render(area) { // ... } } class Rectangle extends Shape { constructor(width, height) { super(); this.width = width; this.height = height; } getArea() { return this.width * this.height; } } class Square extends Shape { constructor(length) { super(); this.length = length; } getArea() { return this.length * this.length; } } function renderLargeShapes(shapes) { shapes.forEach((shape) => { const area = shape.getArea(); shape.render(area); }); } const shapes = [new Rectangle(4, 5), new Rectangle(4, 5), new Square(5)]; renderLargeShapes(shapes); 2 6 

2 7 SRP The Single Responsibility Principle A class should have one, and only one, reason to change. OCP The Open Closed Principle You should be able to extend a classes behavior, without modifying it. LSP The Liskov Substitution Principle Derived classes must be substitutable for their base classes. ISP The Interface Segregation Principle Make fine grained interfaces that are client specific. DIP The Dependency Inversion Principle Depend on abstractions, not on concretions. S.O.L.I.D PRINCIPLES 

2 8 

Interface Segregation • A class should not be forced to depend on methods it does not use • Make fine grained interfaces that are client specific. 2 9 

3 0 

3 1 

public interface Machine { public void print(); public void staple(); public void scan(); public void photoCopy(); } public class AllInOneMachine implements Machine { @Override public void print() { System.out.println("Printing Job"); } @Override public void staple() { System.out.println("Stapling Job"); } @Override public void scan() { System.out.println("Scan Job"); } @Override public void photoCopy() { System.out.println("Photo Copy"); } } 3 2 public class XeroxMachine implements Machine { @Override public void print() { System.out.println("Printing Job"); } @Override public void staple() { System.out.println("Stapling Job"); } @Override public void scan() { // Wait cannot scan its a xerox machine } @Override public void photoCopy() { System.out.println("Photo Copy"); } } 

3 3 public interface Printer { public void print(); } public interface Scanner { public void fax(); } public interface Stapler { public void staple(); } public interface PhotoCopier { public void photoCopy(); } public class XeroxMachine implements Printer, PhotoCopier { @Override public void print() { System.out.println("Printing Job"); } @Override public void photoCopy() { System.out.println("Photo Copy"); } } 

3 4 SRP The Single Responsibility Principle A class should have one, and only one, reason to change. OCP The Open Closed Principle You should be able to extend a classes behavior, without modifying it. LSP The Liskov Substitution Principle Derived classes must be substitutable for their base classes. ISP The Interface Segregation Principle Make fine grained interfaces that are client specific. DIP The Dependency Inversion Principle Depend on abstractions, not on concretions. S.O.L.I.D PRINCIPLES 

3 5 

Dependency Inversion Principle • High-level modules should not depend on low-level modules. Both should depend on abstractions. • Abstractions should not depend upon details. Details should depend on abstractions. 3 6 

class InventoryRequester { constructor() { this.REQ_METHODS = ['HTTP']; } requestItem(item) { // ... } } class InventoryTracker { constructor(items) { this.items = items; // BAD: We have created a dependency on a specific request implementation. // We should just have requestItems depend on a request method: `request` this.requester = new InventoryRequester(); } requestItems() { this.items.forEach((item) => { this.requester.requestItem(item); }); } } const inventoryTracker = new InventoryTracker(['apples', 'bananas']); inventoryTracker.requestItems(); 3 7 

class InventoryTracker { constructor(items, requester) { this.items = items; this.requester = requester; } requestItems() { this.items.forEach((item) => { this.requester.requestItem(item); }); } } class InventoryRequesterV1 { constructor() { this.REQ_METHODS = ['HTTP']; } requestItem(item) { } } class InventoryRequesterV2 { constructor() { this.REQ_METHODS = ['WS']; } requestItem(item) { } } // By constructing our dependencies externally and injecting them, we can easily // substitute our request module for a fancy new one that uses WebSockets. const inventoryTracker = new InventoryTracker(['apples', 'bananas'], new InventoryRequesterV2()); inventoryTracker.requestItems(); 3 8 

3 9 SRP The Single Responsibility Principle A class should have one, and only one, reason to change. OCP The Open Closed Principle You should be able to extend a classes behavior, without modifying it. LSP The Liskov Substitution Principle Derived classes must be substitutable for their base classes. ISP The Interface Segregation Principle Make fine grained interfaces that are client specific. DIP The Dependency Inversion Principle Depend on abstractions, not on concretions. S.O.L.I.D PRINCIPLES 

4 0 

SIMPLE RULES TO FOLLOW •Small functions •Meaningful names •No Comments •Simple classes •Refactor often •Prefer explicit over implicit dependency 4 1 

BAD const yyyymmdstr = moment().format('YYYY/MM/DD'); 4 2 GOOD const currentDate = moment().format('YYYY/MM/DD'); Method Names 

BAD setTimeout(blastOff, 86400000); 4 3 GOOD const MILLISECONDS_IN_A_DAY = 86400000; setTimeout(blastOff, MILLISECONDS_IN_A_DAY); DEFINE GOOD CONSTANTS 

BAD const Car = { carMake: 'Honda', carModel: 'Accord', carColor: 'Blue' }; function paintCar(car) { car.carColor = 'Red'; } 4 4 GOOD const Car = { make: 'Honda', model: 'Accord', color: 'Blue' }; function paintCar(car) { car.color = 'Red'; } DRY VARIABLE NAMES 

BAD function addToDate(date, month) { // ... } const date = new Date(); addToDate(date, 1); 4 5 GOOD function addMonthToDate(month, date) { // ... } const date = new Date(); addMonthToDate(1, date); GOOD METHOD NAMES 

BAD function createMenu(title, subtitle, body, buttonText, cancellable) { // ... } 4 6 GOOD function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: true }); FUNCTION ARGUMENTS 

BAD if (fsm.state === 'fetching' && isEmpty(listNode)) { // ... } 4 7 GOOD function shouldShowSpinner(fsm, listNode) { return fsm.state === 'fetching' && isEmpty(listNode); } if (shouldShowSpinner(fsmInstance, listNodeInstance)) { // ... } SIMPLER METHODS 

BAD function emailClients(clients) { clients.forEach((client) => { const clientRecord = database.lookup(client); if (clientRecord.isActive()) { email(client); } }); } 4 8 GOOD function emailActiveClients(clients) { clients .filter(isActiveClient) .forEach(email); } function isActiveClient(client) { const clientRecord = database.lookup(client); return clientRecord.isActive(); } SIMPLER METHODS 

BAD let name = 'Ryan McDermott'; function splitIntoFirstAndLastName() { name = name.split(' '); } splitIntoFirstAndLastName(); console.log(name); // ['Ryan', 'McDermott']; 4 9 GOOD function splitIntoFirstAndLastName(name) { return name.split(' '); } const name = 'Ryan McDermott'; const newName = splitIntoFirstAndLastName(name); console.log(name); // 'Ryan McDermott'; console.log(newName); // ['Ryan', 'McDermott']; REMOVE SIDE EFFECTS 

BAD function travelToBCN(vehicle) { if (vehicle instanceof Bicycle) { vehicle.pedal(this.currentLocation, this.cityCenter); } else if (vehicle instanceof Car) { vehicle.drive(this.currentLocation, this.cityCenter); } } 5 0 GOOD function travelToBCN(vehicle) { vehicle.move(this.currentLocation, this.cityCenter); } AVOID TYPE CHECKING 

BAD function oldRequestModule(url) { // ... } function newRequestModule(url) { // ... } const req = newRequestModule; inventoryTracker('apples', req, 'www.inventory-awesome.io'); 5 1 GOOD function newRequestModule(url) { // ... } const req = newRequestModule; inventoryTracker('apples', req, 'www.inventory-awesome.io'); REMOVE DEAD CODE 

BAD class Car { constructor() { this.make = 'Honda'; this.model = 'Accord'; this.color = 'white'; } setMake(make) { this.make = make; } setModel(model) { this.model = model; } setColor(color) { this.color = color; } save() { console.log(this.make, this.model, this.color); } } const car = new Car(); car.setColor('pink'); car.setMake('Ford'); car.setModel('F-150'); car.save(); 5 2 GOOD class CarBuilder { constructor() { this.make = 'Honda'; this.model = 'Accord'; this.color = 'white'; } setMake(make) { this.make = make; return this; } setModel(model) { this.model = model; return this; } setColor(color) { this.color = color; return this; } build() { console.log(this.make, this.model, this.color); return this; } } const car = new CarBuilder() .setColor('pink') .setMake('Ford') .setModel('F-150') .build(); USE METHOD CHAINING (BUILDER PATTERN) 

function getMemes() { return [‘meme1.jpg’,‘meme2.jpg’,‘meme3.jpg’,‘meme4.jpg’,‘meme5.jpg’] } 5 3 

5 4 

//Returns 5 best memes function getMemes() { return [‘meme1.jpg’,‘meme2.jpg’,‘meme3.jpg’,‘meme4.jpg’,‘meme5.jpg’] } 5 5 

5 6 

//Returns 5 best memes function getMemes() { return [‘meme1.jpg’,‘meme2.jpg’,‘meme3.jpg’,‘meme4.jpg’,‘meme5.jpg’,‘meme6.jpg’,‘ meme7.jpg’,‘meme8.jpg’,‘meme9.jpg’,‘meme10.jpg’,‘meme11.jpg’,‘meme12.jpg’] } 5 7 OH WAIT BUT THE COMMENTS SAY THE METHOD RETURNS 5 Memes 

5 8 

Refactor Code • Keep your code D.R.Y (Dont repeat yourself). • Extract common functionality from different places into a method or object. • Remove dead code 5 9 

6 0 

6 1 

Test All the things • Following clean code principles, makes testing a lot easier 6 2 

WAKE UP 6 3 

6 4 

REFERENCES • http://blog.cleancoder.com/ • https://github.com/ryanmcdermott/clean-code-javascript 6 5