Lessons from a coding veteran - Web Directions @Media

LESSONS FROM A CODING
VETERAN

TOM HUGHES-CROUCHER
@sh1mmer

Stuff to be “proud of ”
BSc 1st Class (Hons) Computer Scalable Server-Side Code with JavaScript

Science

Helped write two W3C standards

Written code for:

NASA
Tesco
Channel 4
Node Up and Running

Three Telecom
Tom Hughes-Croucher
Yahoo!

RULE 1.
COMPLEXITY IS THE ENEMY

...CODE THAT DOES THINGS
MORE THAN ONE WAY

...TOOMUCHCODETHATJUSTGOE
SONANDONANDRUNSTOGETHER

...ANYTHING THAT
REDUCES UNDERSTANDING

WHY IS UNDERSTANDING
SO IMPORTANT?

What is Twitter?

140 character micro-blogging service

AJAX web site

API

Scalability (sort of)

etc

“BUILD TWITTER” IS NOT
UNDERSTANDABLE

COMPUTERS REQUIRE
PERFECT INSTRUCTIONS

PERFECTION REQUIRES
UNDERSTANDING

IT IS YOUR JOB AS DEVELOPER
TO ACCEPT THE REQUIREMENTS

AGILE ALLOWS YOU TO FAIL
FAST

FAILING FAST ALLOWS
REDUCE COST OF DEFINITION

RULE 1B.
WRITE CODE YOU* CAN UNDERSTAND

* and your team

function(a,b,c){return{pub:function(d,e){for(c in a)if
(c.split("-")[0]==d)a[c](e)!==!1||delete a[c]},sub:function
(d,e){a[d+--b]=e}}}({},0)

function(
  a, // the subscription object
  b, // the current event number
  c // (placeholder)
){
  return { // return an object, with
    pub: function( // a "pub" function that takes
      d, // a channel name and
      e // a message value,
    ){ // and
      for( // for each
        c // subscriber
        in a // in the subscription object,
      ) if ( // if
        c // its name, with the event number discarded
          .split // by splitting it
          ("-") // with a hyphen and
          [0] // taking only the first part,
          == d // is equal to the published channel
      ) a[c](e) // call the subscriber. and if
        !== !1 || // the value returned is false
        delete a[c] // unsubscribe by removing the subscriber, and
    },

    sub: function( // a "sub" function that takes
      d, // a channel name and
      e // a subscriber function
    ){ // and,
      a[ // on the subscriptions object,
        d + // sets the name of the channel appended with
        --b // a hyphen and the decremented event number, to
      ] = e // the function passed.
    }
  }
}( // auto-run with
  {}, // the subscription object
  0 // and event id.
)

//this is JavaScript
var isTrue

if (true) {
isTrue = true
}

//still JavaScript
var isTrue = true ? true : undefined

YOUR BRAIN HAS MORE TO
REMEMBER

THERE ARE MANY REAL
PATTERNS TO REMEMBER

DON’T ADD SYNONYMOUS
PATTERNS

RULE 1C.
PICK SOME CONVENTIONS

BE OPINIONATED
AS LONG AS YOU STICK TO IT

function buildObjectLiteral()
{
   return // this returns!
   {
      "someProperty": "hello"
   };
}

IF YOU PICK A GOOD STYLE YOU
WON’T WRITE STUPID CODE

// return whatever was printed
function showFields (data, version, fields) {
var o = {}
;[data,version].forEach(function (s) {
Object.keys(s).forEach(function (k) {
o[k] = s[k]
})
})
return search(o, fields.split("."), version._id, fields)
}

YOU CAN PICK ALL
KINDS OF STYLES

MOST IMPORTANT IS
CONSISTENCY

RULE 1D.
USE ABSTRACTION WISELY

GET

Browser Server
200 OK

TCP (Slow start)

Browser Server

ABSTRACTION AIDES
UNDERSTANDING

ABSTRACTION MAKES
THINGS SIMPLE

WHEN DOING COMPLEX THINGS
ABSTRACTION MAKE THINGS
MORE COMPLEX

//node.js style JavaScript

query = mysql.query('SELECT * FROM data');

query.on(‘result’, function(result) {
for(var i=0;i<length;i++) {
var row = result.rows[i];
//do something with the row
}
});

//threaded style JavaScript

result = mysql.query('SELECT * FROM data');

for(var i=0;i<length;i++) {
var row = result.rows[i];
//do something with the row
}

var x = "I am a string"

~1ns Running 1 instruction
2ns Data from l1 cpu cache
5ns Data from l2 cpu cache
80ns Data from ram

query

Server mySQL
result

result = mysql.query('SELECT * FROM data');

~100ms Time to run a query in database
50ms Time to roundtrip query over the network

100 Blue Whales

Cat

BLACK BOXES ARE EASY TO
UNDERSTAND

DRIVING A CAR ISN’T
ABOUT COMBUSTION

WELL DEFINED APIS
PROVIDE ABSTRACTION

RULE 2.
DON'T OPTIMISE TOO SOON

OPTIMISATION ISN’T JUST
ABOUT PERFORMANCE

YOU AREN’T THE
KWISATZ HADERACH

YOU HAVE TO WRITE CODE
TO LEARN WHAT YOU NEED

THE FIRST VERSION ALWAYS
SUCKS

BACK TO AGILE
DESIGNED TO “FAIL”

BUILD IN TIME TO REWRITE
YOUR CODE

RULE 2B.
WRITING COMPLEX CODE IS
OK WHEN YOU UNDERSTAND IT

RULE 2B.
REWRITING CODE TO BE MORE COMPLEX
IS OK WHEN YOU UNDERSTAND IT

Math.floor(3.141) //3
~~3.141 //3 but faster

typeof foo === 'number' && !isNaN(foo) && foo !== Infinity
? foo > 0 ? Math.floor(foo) : Math.ceil(foo) : 0;

// ~~var in JavaScript explained by James Padosley
// side note (this is why I, personally, dislike ? )

~~VAR IS LIKE MATH.FLOOR
FOR +INTEGER

RULE 2C.
DOCUMENT THE HECK OUT OF
OPTIMISATIONS

// Using ~~ to floor and generate a random #1-6
(~~(Math.random()*6))+1

RULE 2D.
OPTIMISE WITH TOOLS IF POSSIBLE

YUI/DOJO COMPRESSOR
CLOSURE COMPILER

RULE 3.
ALL RULES ARE MADE TO BE BROKEN

RULE 3A.
IT’S OK TO WRITE SHITTY CODE
FOR A DEADLINE

YOU DRANK TOO MUCH
COFFEE

YOU UPSET YOUR
[GIRL/BOY]FRIEND

THE CODE YOU WROTE
SUCKED

RULE 3B.
BREAKING RULES INVOLVES CLEANUP

SOMEONE* WILL HAVE TO
MAINTAIN THAT CODE

* maybe you

SHORTLY AFTER YOU
WROTE BAD CODE

SPRINT 1 : CODE THAT SUCKS
SPRINT 2 : CODE THAT DOESN’T

RULE 3C.
RULE BREAKING ISN’T SUSTAINABLE

EVERY OPEN SOURCE
PROJECT YOU FORK

EVERY FUNCTION THAT
ISN’T DOCUMENTED

EVERY LINE THAT WAS ONLY
WRITTEN ONCE

TECHNICAL DEBT IS LIKE
OTHER DEBT

THE MORE OF IT YOU HAVE
THE HARDER IT IS TO FIX

RULE 3D.
IF YOU KEEP CHEATING GTFO

ENVIRONMENTS THAT DON’T
CARE ABOUT GOOD CODE

STRESS IS NOT GOOD FOR
LIFE

CODING WITH RULE 1 AND RULE
2 IS CODING FOR THE FUTURE

CODING WITH RULE 3 IS
CODING FOR NOW

SHORT-TERM THINKING DOESN’T
YIELD LONG-TERM RESULTS

Summary
1. Complexity is the enemy 2. Don't optimise too soon

1a. Have a clear goal 2a. 1st draft, 2nd draft

1b. Write code you can 2b. rewriting code to be more
understand complex is ok when you
understand it
1c. Pick some conventions
2c. Document the heck out of
1d. Use abstraction wisely optimisations

2d. optimise with tools if
possible

Lessons from a coding veteran - Web Directions @Media

More Related Content

Similar to Lessons from a coding veteran - Web Directions @Media

More from Tom Croucher

Recently uploaded

Lessons from a coding veteran - Web Directions @Media