Developing for

Humans

mature

Great programmers are not always 

engineers

"Mature" engineering has

many facets

Writing

maintainable

code

Being a

zealous

reviewer

"If a lion could speak, we could not understand him"

Wittgenstein

My first

pull request

did

not

go well

Waterbear

Be a

But here are some of mine

your own

Develop

best practices

Caveats:

Programming should be

Hackathons, POCs, throwaway code is

fun

exempt

I am opinionated. Some of my opinions are controversial

Communicate intent through core concepts

 

Principles:

  • Never sacrifice clarity for micro optimisations
  • Semantic code is easily scannable
  • Be type aware. Type safety leads to less errors

Semantic is

var result = [];
_.each(rums, function(rum){
  if(rum.year < 1918){
    result.push(rum);
  }
});
_.filter(rums, function(rum){
  return rum.year < 1918;
});
_.each(rums, function(rum){
  if(rum.year < 1918){
    rum.isDelicious = true;
  }
});
_.map(rums, function(rum){
  rum.isDelicious = rum.year < 1989;
  return rum;
});

scannable

return types

function getAvailbleYears(rum){
  var rumYears = {
    'Angostura': [1, 5, 7 ,12],
    'Havana Club': [1, 3, 4, 7]
  };
  return rumYears[rum];
}
function getAvailbleYears(rum){
  var rumYears = {
    'Angostura': [1, 5, 7 ,12],
    'Havana Club': [1, 3, 4, 7]
  };
  return rumYears[rum] || [];
}

Functions should always return the same type

Consistent

Array

undefined

Array

Provide context through sensible naming

Principles:

  • Keystrokes are cheap, comprehension is expensive
  • Code is read more times than it is written
  • Code will be read by people yet to join the company

Keystrokes are

cheap

Comprehension is

expensive

No single letter variables

No abbr in function names

Naming is

hard

but

important

var d = 5;
var stateList = ['good','bad'];
var open = true;
var elapsedTimeInDays = 5;
var possibleStates = ['good','bad'];
var isOpen = true;

Function names should imply a return type

function pending(){}
function orgs(){}
function states(){}
function calculatePercentage(){}
function isPending(){}
function hasOrganizations(){}
function getStates(){}
function getPercentage(){}

Variable names should be descriptive

Improve readability through clearer syntax

Principles:

  • Reduce local confusion
  • Write like the reader is a programmer, not a JS expert

use quirks

Never

if(~'human'.indexOf('u')){
  // When is this executed?
}
if(_.includes('human', 'u')){
  // This is a lot clearer
}
function isReadable(){
  return !!this.readable;
}
function isReadable(){
  return Boolean(this.readable);
}
var date = +new Date()
var date = Date.now();

Fail

function getSomething(){
  if(condition) {
    // Long
    // function
    // body
    // example
    if(otherCondition){
      return true;
    }
  }
  return false;
}
function getSomething(){
  if(!condition){
    return false;
  }
  // Long
  // function
  // body
  // example
  return Boolean(otherCondition);
}

Avoid many nested conditions by returning as quickly as possible

fast

Nested Ternary Expressions

Reduce confusion by not digging rabbit holes

Keep flow control at the

highest level

possible

function submitForm(){
  var data = this.getFormData();
  validateForm(data);
}

function validateForm(data){
  if(isValid(data)){
    augmentData(data);
  }
}

function augmentData(data){
  data.something = 123;
  makeXHRCall(data);
}


function submitForm(){
  var data = this.getFormData();
  if(!isValid(formData)){
    return;
  }
  var augmentedData = augmentData(data);
  makeXHRCall(data);
}

function augmentData(data){
  data.something = 123;
  return;
}

Else is

function isProper(sausage){
  if(sausage.isMadeOfChicken()){
     return false;
  } else {
    return true;
  }
}
function isProper(sausage){
  if(sausage.isMadeOfChicken()){
     return false;
  }
  return true;
}

redundant

If you need an else in your function then your function does too much.

Human

.js

Copy of dfh

By Will Demaine

Made with Slides.com

Copy of dfh

  • 1,620

More from Will Demaine