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 JavaScriptScienceHelped write two W3C standardsWritten code for: NASA Tesco Channel 4 Node Up and Running Three Telecom Tom Hughes-Croucher Yahoo!

3 RULES TO LIVE BY

RULE 1.COMPLEXITY IS THE ENEMY

WHAT IS COMPLEXITY?

COMPLEXITY IS...

...TOO MANY FEATURES

...UNINTELLIGIBLE CODE

...CODE THAT DOES THINGS MORE THAN ONE WAY

...TOOMUCHCODETHATJUSTGOESONANDONANDRUNSTOGETHER

COMPLEXITY IS...

...ANYTHING THATREDUCES UNDERSTANDING

WHY IS UNDERSTANDING SO IMPORTANT?

“BUILD TWITTER”

What is Twitter?140 character micro-blogging serviceAJAX web siteAPIScalability (sort of)etc

“BUILD TWITTER” IS NOT UNDERSTANDABLE

COMPUTERS REQUIREPERFECT INSTRUCTIONS

PERFECTION REQUIRES UNDERSTANDING

RULE 1A.HAVE A CLEAR GOAL

TANGIBLE OBJECTIVE

IT IS YOUR JOB AS DEVELOPERTO ACCEPT THE REQUIREMENTS

CLEAR OUTCOME

SUCCESS = ??

A WAY TO MEASURE SUCCESS

PUBLIC API

AGILE ALLOWS YOU TO FAIL FAST

FAILING FAST ALLOWSREDUCE 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.)

LIKE “REAL” CODE

TERSE != BETTER

LANGUAGES ARE EXPRESSIVE

//this is JavaScriptvar isTrueif (true) { isTrue = true}

//still JavaScriptvar isTrue = true ? true : undefined

ANOTHER EXAMPLE

var c = Math.floor(b)

var c = ~~b

YOUR BRAIN HAS MORE TO REMEMBER

FRENCH VS. ENGLISH

THERE ARE MANY REALPATTERNS TO REMEMBER

DON’T ADD SYNONYMOUS PATTERNS

RULE 1C.PICK SOME CONVENTIONS

BE OPINIONATEDAS LONG AS YOU STICK TO IT

PLACE { AFTER )

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

STUPID ERROR

STUPID CODE

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

SEMI-COLON FIRST JAVASCRIPT

// return whatever was printedfunction 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

SIMPLE VS COMPLEX

Browser Server

ABSTRACTION

GETBrowser 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 JavaScriptquery = 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 JavaScriptresult = 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 instruction2ns Data from l1 cpu cache5ns Data from l2 cpu cache80ns Data from ram

queryServer mySQL result

result = mysql.query(SELECT * FROM data);~100ms Time to run a query in database50ms Time to roundtrip query over the network

LOCAL VARIABLE

REMOTE OPERATION

100 Blue Whales Cat

TOO MUCH ABSTRACTION

USE ABSTRACTION WELL

MODULARISATION

BLACK BOXES ARE EASY TO UNDERSTAND

DRIVING A CAR ISN’TABOUT COMBUSTION

WELL DEFINED APISPROVIDE ABSTRACTION

RULE 2.DONT OPTIMISE TOO SOON

OPTIMISATION ISN’T JUST ABOUT PERFORMANCE

RULE 2A.1ST DRAFT, 2ND DRAFT

YOU AREN’T THEKWISATZ HADERACH

YOU HAVE TO WRITE CODETO LEARN WHAT YOU NEED

THE FIRST VERSION ALWAYS SUCKS

BACK TO AGILEDESIGNED TO “FAIL”

BUILD IN TIME TO REWRITE YOUR CODE

ESTIMATE+ 1/3 + 1/4

RULE 2B. WRITING COMPLEX CODE ISOK 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

RELIABILITY

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

JSLINT

YUI/DOJO COMPRESSOR CLOSURE COMPILER

RULE 3.ALL RULES ARE MADE TO BE BROKEN

WE ALL WORK FOR BUSINESSES

REALITY BITES

DEAL WITH IT

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

YOU HAD A DEADLINE

YOU DRANK TOO MUCH COFFEE

STAYED UP ALL NIGHT

YOU UPSET YOUR[GIRL/BOY]FRIEND

THE CODE YOU WROTE SUCKED

SUUUUUUUUUUCCCKKKEED!

BUT IT WORKED

SO. COOL.

RULE 3B.BREAKING RULES INVOLVES CLEANUP

SOMEONE* WILL HAVE TO MAINTAIN THAT CODE * maybe you

SHORTLY AFTER YOU WROTE BAD CODE

YOU WILL...

...WHAT DOES THIS DO?

CLEAN UP CODE ASAP

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

RULE 3C.RULE BREAKING ISN’T SUSTAINABLE

IT’S CALLEDTECHNICAL DEBT

EVERY OPEN SOURCEPROJECT 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

DON’T CARE ABOUT YOU!

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

Summary1. Complexity is the enemy 2. Dont optimise too soon1a. Have a clear goal 2a. 1st draft, 2nd draft1b. Write code you can 2b. rewriting code to be moreunderstand complex is ok when you understand it1c. Pick some conventions 2c. Document the heck out of1d. Use abstraction wisely optimisations 2d. optimise with tools if possible

QUESTIONS?@sh1mmer

http://www.webdirections.org	601
http://lanyrd.com	15
url_unknown	1
http://www.techgig.com	1

Lessons from a coding veteran - Web Directions @Media

by Tom Hughes-Croucher

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 618

Statistics

Lessons from a coding veteran - Web Directions @Media Presentation Transcript