How to write better code: in-depth best practices for writing readable, simple, extendable and efficient code (Part I)

Clean Code⇧⌘KEdwin Kwok

Monday, 11 March, 13

http://en.wikipedia.org/wiki/%E2%8C%98

Provided to you by

Open source development kit for mobile, web & IoT apps

Skygear.io

Skygear.io

http://en.wikipedia.org/wiki/%E2%8C%98

Clean CodeTitle: Clean Code: A Handbook of Agile Software Craftsmanship

Author: Robert C. Martin (Uncle Bob)


Skygear.io

Why Clean Code?


Skygear.io

Why Clean Code?

0

10

20

30

40

50

60

70

80

90

100

0 500 1000 2000 2500 3000 3500 4000

Productivity Ratio vs Time


Skygear.io

Smart vs ProfessionalSmart

Great Coding Skill

Write advanced code

String r; // lowercase url


Skygear.io

Smart vs ProfessionalSmart

Great Coding Skill

Write advanced code

String r; // lowercase url

Professional

Readable code

Maintainable code

String lowercaseUrl;


Skygear.io

NameChoose your names thoughtfully

If a name requires a comment, the name does not reveal its intent


Skygear.io



int d;

What does it mean? Days? Diameter?


Skygear.io



int d;


int d; //elapsed time in days

Is this any better?


Skygear.io



int d;


int elapsedTimeInDays;

What about this?

int d; //elapsed time in days

Is this any better?


Skygear.io

NameChoose part of speech well

method / function => verb

class / object => noun

def authentication # ...end

def authenticate # ...end


Skygear.io

Nameuse Pronounceable Names

class DtaRcrd102 { private Date genymdhms; private Date modymdhms; private final String pszqint = “102”;}

class Customer { private Date generationTimestamp; private Date modificationTimestamp; private final String recordId = “102”;}


Skygear.io

Names...Avoid encodings

public class Part { private String mName; void setName(String name) { mName = name; }}

public class Part { private String name; void setName(String name) { this.name = name; }}

Hungarian notation

bBusy: booleanchInitial: charcApples: count of itemsfpPrice: floating-pointdbPi: double (Systems)pFoo: pointer


http://en.wikipedia.org/wiki/Boolean_datatype

Skygear.io

http://en.wikipedia.org/wiki/Boolean_datatype

http://en.wikipedia.org/wiki/Character_(computing)

http://en.wikipedia.org/wiki/Character_(computing)

http://en.wikipedia.org/wiki/Floating-point

http://en.wikipedia.org/wiki/Floating-point

http://en.wikipedia.org/wiki/Pi

http://en.wikipedia.org/wiki/Pi

http://en.wikipedia.org/wiki/Double_precision

http://en.wikipedia.org/wiki/Double_precision

http://en.wikipedia.org/wiki/Foo

http://en.wikipedia.org/wiki/Foo

http://en.wikipedia.org/wiki/Pointer_(computer_programming)

http://en.wikipedia.org/wiki/Pointer_(computer_programming)

Discussion:Android vs IOS

ListView listView = new ListView(context);listView.setAdapter(anAdapter);

UITableView tableView = [[UITableView alloc] initWithFrame:aFrame style:UITableViewStylePlain];tableView.datasource = aDataSource;

Android:

IOS:

Which one is better?


Skygear.io

AdapterThe adapter pattern is adapting between classes and objects, like a bridge between two objects.

e.g.

SimpleCursorAdapter

ArrayAdapterMonday, 11 March, 13

Skygear.io

AdapterTitle: Design Patterns: Elements of Reusable Object-Oriented Software

Author:

John Vlissides

Richard Helm

Ralph Johnson

Erich Gamma


Skygear.io

Use Case (Philips)UITabBarController

Adapter

UITableViewController


Skygear.io

Use design pattern as name

Use Solution Domain Names, e.g.

AccountVisitor

JobQueue

LabelObserver

SimpleCursorAdapter


Skygear.io

Singleton

https://www.youtube.com/watch?v=-FRm3VPhseI



Skygear.io


Singleton


v.s.Global Object



Skygear.io


Deceptive APItestCharge() { CreditCard cc; cc = new CreditCard(“1234567890121234”); cc.charge(100);}

java.lang.NullPointerExceptionat talk.CreditCard.charge(CreditCard.java:49)


Skygear.io

Deceptive APItestCharge() { CreditCardProcessor.init(...); CreditCard cc; cc = new CreditCard(“1234567890121234”); cc.charge(100);}

java.lang.NullPointerExceptionat talk.CreditCardProcessor.init(CreditCardProcessor.java:146)


Skygear.io

Deceptive APItestCharge() { OffineQueue.start(); CreditCardProcessor.init(...); CreditCard cc; cc = new CreditCard(“1234567890121234”); cc.charge(100);}

java.lang.NullPointerExceptionat talk.OfflineQueue.start (OfflineQueue.java:16)


Skygear.io

Deceptive APItestCharge() { Database.connect(...); OffineQueue.start(); CreditCardProcessor.init(...); CreditCard cc; cc = new CreditCard(“1234567890121234”); cc.charge(100);}

CreditCard API lies

It pretends to not need the CreditCardProcessor

The API doesn’t tell the exact order of the initialization


Skygear.io

Deceptive APItestCharge() { database = new Database(...); queue = new OfflineQueue(database); creditCardProcessor = new CreditCardProcessor(queue); CreditCard cc; cc = new CreditCard(“1234567890121234”, creditCardProcessor); cc.charge(100);}

Dependency injection enforces the order of initialization at compile time.


Skygear.io

Discussion:Object passing in Android?

How to pass objects to another Activity?


Skygear.io

Comment


Skygear.io

Comment

//* no Comments *//


Skygear.io

Comment

Comment doesn’t make your code becomes good code

//* no Comments *//


Skygear.io

Good CommentsInformative Comments

// format matched kk:mm:ss EEE, MMM dd, yyyyPattern timePattern = Pattern.compile( “\\d*:\\d*:\\d* \\w*, \\w* \\d*, \\d*”);

Todo Comments/* TODO: All calls to getPage should actually come here, and be relative to the current page, not the parent page. It was a gross error to have the whole wiki know that references were relative to the parent instead of the page. */

Pubic API documentation


Skygear.io

Bad Comments

Redundant Comments

/** * The processor delay for this component. */protected int backgroundProcessorDelay = -1;

/** * The container event listeners for this Container. */protected ArrayList listeners = new ArrayList();


Skygear.io

Bad CommentsAttribution Comments/* Added by Gary */Big Banner Comments// **********************// * Instance Variables *// *********************private int myVariable;

// ***********************// * Default Constructor *// ***********************public MyClass() {}


Skygear.io

Mumbling

/* For bug FS-13005, we had to add this. The bug was that the Now Playing screen was somehow being launched, in that viewDidAppear was being called, but the view was not being shown on the screen. The Now Playing screen then when on to do all it's stuff and the user was left looking at an incomplete Mode screen. So the "fix" is to kill off any residual Now Playing screen that is under the Mode tab whenever we start a new connection to a radio. */

What is FS-13005?

Sorry! I have no idea what you are talking about.


Skygear.io

Horizontal Alignment@interface Tape : NSObject {! NSString *_brushName;! NSString *_headImageNamed;! NSString *_bodyImageNamed;! NSString *_tailImageNamed;! CGFloat _opacity;! BOOL! _includeShadow;! NSString *_text;! NSString *_fontName;! CGFloat! _fontSize;! NSString *_colorHex;! NSDictionary *_all;}

@interface Tape : NSObject {! NSString *_brushName;! NSString *_headImageNamed;! NSString *_bodyImageNamed;! NSString *_tailImageNamed;! CGFloat _opacity;! BOOL! _includeShadow;! NSString *_text;! NSString *_fontName;! CGFloat! _fontSize;! NSString *_colorHex;! NSDictionary *_all;}


Skygear.io

Function

should be Small

does one thing

the ideal number of arguments for a function is .... 0

the less arguments, the better

try not to more than 3 arguments


Skygear.io

Function

No Side effects

// do something or answer something, but not bothpublic boolean set(String attribute, String value);

if (attributeExists(“username”)) { setAttribute(“username”, “Ben”);}


Skygear.io

Class

Avoid God Class

In OO, God Class is a class that does lots of things

example: UITableViewController


Skygear.io

Data Structure and Objectpublic class Square { public Point topLeft; public double side;}

public class Geometry { public double calculateArea(Object shape) throws noSuchShapeException { if (shape instanceof Square) { Square square = (Square)shape; return square.side * square.side; } else if (shape instanceof Rectangle) { Rectangle rectangle = (Rectangle)shape; return rectangle.height * rectangle.width; } throw new NoSuchShapeException(); }}

public class Rectangle { public Point topLeft; public double height; public double width;}


Skygear.io

Data Structure and Objectpublic class Square implements Shape { public Point topLeft; public double side; public double area() { return side*side; }}

public class Rectangle implements Shape{ public Point topLeft; public double height; public double width; public double area() { return height * width; }}


Skygear.io

Data Structure and ObjectProcedural Code (code using data structure)

Pros: easy to add new functions without changing existing data structure

Cons: hard to add new data structure all the functions must change

OO code

Pros: easy to add new classes without changing existing function

Cons: hard to a new function as all classes must change


Skygear.io

Data Structure and ObjectProcedural Code (code using data structure)

Pros: easy to add new functions without changing existing data structure

Cons: hard to add new data structure all the functions must change

OO code

Pros: easy to add new classes without changing existing function

Cons: hard to a new function as all classes must change

Avoid Hybrids


Skygear.io

How About ActiveRecord?


Error HandlingPrefer exceptions to returning error codes

if (deletePage(page) == E_OK) { if (registry.deleteReference(page.name) == E_OK) { if (configKeys.deleteKey(page.name.makeKey() == E_OK) { logger.log(“page deleted”); } else { logger.log(“configKey not deleted”); } } else { logger.log(“deleteReference from registry failed”); }} else { logger.log(“delete failed”); return E_ERROR;}


Skygear.io

Error Handlingprefer exceptions to returning error codes

try { deletePage(page); registry.deleteReference(page.name); configKeys.deleteKey(page.name.makeKey());} catch (Exception e) { logger.log(e.getMessage());}

easier to find the normal path

avoid nested conditions


Skygear.io

Error Handling

Don’t Return Null

List<Employee> employees = getEmployees();if (employees != null) { for (Employee e : employees) { totalPay += e.getPay(); }}


Skygear.io

Error Handling

Don’t Return Null

List<Employee> employees = getEmployees();for (Employee e : employees) { totalPay += e.getPay();}

public List<Employee> getEmployees() { if (/* there are no employees */) { return Collections.emptyList(); }}


Skygear.io

SOLID

Single Responsibility Principle

Open Closed Principle

Liskov Substitution Principle

Interface Segregation Principle

Dependency inversion Principle


Skygear.io

Single Responsibility PrincipleLabelBox Cloud Labels


Skygear.io

Architecture


Skygear.io


Skygear.io

Architecture

The Lost Years

http://www.youtube.com/watch?v=WpkDN78P884

The Web (Rails) is a Delivery Mechanism!



Skygear.io




Test - a real scenario

...

client server

workerss3

1. upload a video

2. store in s33. start worker and

send request to worker

4. dedicated worker pulls the file from s3 and do transcoding


Skygear.io

TestRemove FEAR during Development

You know you break something during testing.

For example:

Rugby - ~178 tests

Refer to Ben’s presentation

https://speakerdeck.com/oursky/testing



Skygear.io


Test

FIRST

Fast

Independent

Repeatable

Self-validating

Timely


Skygear.io

RefactorTitle:Refactoring: Improving the Design of Existing Code

Author:

Martin Fowler

Kent Beck

John Brant

William Opdyke

Don RobertsMonday, 11 March, 13

Skygear.io

Familiar With your Tools

try to familiar with your tools before coding, don’t create messy stuffs by your first impression

do testing before adopting to the real code

read the API, doc and Google

ask others ...


Skygear.io

Quiz (javascript)The expected output of the following javascript is alert count down from 5 to 0. Explain why it doesn’t work and fix the bug.

function count (num) { for (var i = 0; i <= num; i += 1) { setTimeout(function () { alert(num - i); }, i * 1000); }}count(5);


Skygear.io

Quiz (javascript)function count (num) { for (var i = 0; i <= num; i += 1) { (function (time) { setTimeout(function () { alert(num - time); }, time * 1000); }(i)); }}count(5);


Skygear.io

Skygear.io

Quiz (javascript) cont.

function changeAnchorsToLightBox(anchors) { var length = anchors.length; for (var i = 0; i < length; i++) { anchors[i].onclick = function () { lightBox.open(anchors[i]); return false; }; }}


Skygear.io

Quiz (javascript) cont.function changeAnchorsToLightBox(anchors) { var length = anchors.length; for (var i = 0; i < length; i++) { (function (anchor) { anchor.onclick = function () { lightBox.open(anchor); return false; }; }(anchors[i])); }}


Skygear.io

Quiz (javascript) cont.function changeAnchorsToLightBox(anchors) { var length = anchors.length; for (var i = 0; i < length; i++) { (function (anchor) { anchor.onclick = function () { lightBox.open(anchor); return false; }; }(anchors[i])); }}


Skygear.io

Reference

Clean Code: A Handbook of Agile Software Craftsmanship

http://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882

The Clean Code Talks - "Global State and Singletons"




Skygear.io




Q & A and ...

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”

Martin Fowler:


Skygear.io

Brought to you by Oursky

Build your mobile app fast skygear.io (open source)

http://bit.ly/2aIrPw0