JARROD OVERSON
MANAGING
JAVASCRIPT
@jsoversonCOMPLEXITY

WHO IS
RIOT

WE MAKE A GAME

A GAME THAT GOT HUGE

BUT I JUST
MAKE WEB
STUFF

THE WEB IS
AWESOME
BUT, WE NEED TO TALK.

PEAK OF INFLATED EXPECTATIONS
TROUGH OF DISILLUSIONMENT
HTML5
MOBILE WEB APPS
PLATEAU OF REALITY
The Web
Platform

2008 2009 2010 2011 2012 2013 2014 NOW WE CAN MOVE ON

STEP TWO
STEP ONE
STEP THREE
HONESTY

DYNAMIC LANGUAGES ARE MESSY.1.
COMING TO TERMS
Combine the normal pitfalls with
!
• Immature IDEs and tooling
• Wildly variable module styles
• Best practices that vary monthly
• Similar yet vastly different ecosystems

THE TALENT POOL IS NUTS.2.
COMING TO TERMS
Web Platform Engineers
jQuery Experts
Made a menu fade in once
async wat?

PROGRESS IS STAGGERING.3.
COMING TO TERMS
It’s hard to keep up.
!
Everyone has an opinion.
!
The future doesn’t get here all at once.

REFACTORING JAVASCRIPT IS NOT EASY.4.
COMING TO TERMS
Callback hell is more than just deep nesting.
!
IDEs can’t help much yet.
!
Flexibility is more important here than anywhere.

THE WEB IS HARD!5.
COMING TO TERMS
Web applications are not solved.
!
Even the giants pivot and backtrack.
!
So many solutions just don’t exist yet.

WHY ARE WE EVEN HERE?

JAVASCRIPT
WON

AND THIS ISN’T EVEN ITS FINAL FORM

STEP ONE
STEP THREE
ACCEPTANCE
STEP TWO

RESPECT
YOUR JAVASCRIPT

‣ Indentation style
‣ Line length
‣ Quote styles
‣ Naming conventions
‣ Curly brace placement
‣ Directory structure
‣ Everything
GET EVERYONE TOGETHER
ENFORCE
‣ Use community tools
‣ Grunt
‣ Gulp
‣ JSHint
‣ etc
‣ Warnings === errors
‣ Make it hard to be
wrong
DOCUMENT
‣ Treat docs as code
‣ Make it
‣ easy to find
‣ easy to read
‣ easy to update
‣ easy to discuss
‣ Use github!
AGREE

RESPECT
THE COMMUNITY

RESPECT
THE COMMUNITY
>90% use last comma
http://sideeffect.kr/popularconvention/#javascript
>80% indent with spaces
>55% use single quotes
https://github.com/Seravo/js-winning-style
https://github.com/rwaldron/idiomatic.js/
Research public style guides

VIOLATIONS BEGET VIOLATIONS
ALLOW 1 & ALLOW 1,000

KNOW YOUR OPTIONS
JSHINT
ESLINT
JSCS
Community-driven JSLint fork. High configurability.
JSHint alternative. High configurability.
Code style checker. Good complement to JSHint.
WHAT ABOUT JSLINT AND CLOSURE LINTER?

KNOW YOUR OPTION’S OPTIONS

BE AGGRESSIVE. YOUR FEELINGS WILL GET HURT.

SMART DEVIATION IS OK AND EXPECTED
!
!
function fn(param) {
/*jshint eqeqeq:false*/
!
if (param == 42) return;
!
}

SET NUMERIC LIMITS
"maxparams" : 4
"maxdepth" : 4
"maxstatements" : 20
"maxlen" : 100
"maxcomplexity" : 7

WHAT IS
COMPLEXITY?
CYCLOMATIC

TECHNICALLY
CYCLOMATIC COMPLEXITY
IS THE NUMBER OF PATHS
THROUGH YOUR CODE

PRACTICALLY
CYCLOMATIC COMPLEXITY
IS HOW HARD
YOUR CODE IS TO TEST

COMPLEXITY : 1
!
function main(a) {
!
}

COMPLEXITY : 2
function main(a) {
if (a > 5) {
}
}

COMPLEXITY : ?
function main(a) {
if (a > 5) {
!
} else {
!
}
}

COMPLEXITY : 3
function main(a) {
if (a > 10) {
!
} else if(a > 5) {
!
}
}

COMPLEXITY : ?
function main(a) {
if (a > 5) {
if (a > 10) {
!
}
}
}

COMPLEXITY : 7
function main(a) {
if (a) {
} else if (a) {
}
!
if (other) { }
!
for (var i = 0; i < a; i++) {
if (i % 2) {
} else if (i % 3) {
}
}
}

I KNOW WHAT YOU’RE THINKING
I’M
GOING TO MAKE THE
MOST AMAZING .JSHINTRC
EVER

BUT IT’S NOT THAT EASY

STEP TWO
STEP ONE
PERSEVERANCE
STEP THREE

VISUALIZE YOUR GOAL

VISUALIZE YOUR CODE
PLATO
Your friendly, neighborhood
philosopher
PLATOJS.ORG

YOUR GOAL

THE PATH
FILES PASSING IDEAL SETTINGS

THE PATH
FILES IN NEED OF LARGER REFACTOR

THE PATH
QUICK WINS

OTHER
METRICS
HALSTEAD METRICS
CODE COVERAGE
MAINTAINABILITY
LINES OF CODE

MAINTAINABILITY?
fn(averageEffort, averageComplexity, averageLines);
fn(difficulty, volume)
fn(length, vocabulary)
fn(uniqueOperators, totalOperands, uniqueOperands)
fn(uniqueOperators, uniqueOperands)
fn(totalOperators, totalOperands)

MAURICE HALSTEAD
HALSTEAD METRICS
PHIL BOOTH ARIYA HIDAYATTHOMAS MCCABE
CYCLOMATIC COMPLEXITY COMPLEXITY ANALYSIS JS STATIC ANALYSIS
WHO TO BLAME

THE UNEXAMINED CODE IS
NOT WORTH RELEASING
“
”
- SOCRATES

CODE IS NOT JUST LOGIC.
CODE IS AN API.
TREAT IT LIKE ONE.

Recap
PERSEVERANCE
The web has unique value,
it’s not a cheap alternative to native apps.
Embrace the web and JavaScript as your platform.
Create new tools. Automate & visualize everything.
ACCEPTANCE
HONESTY

JARROD OVERSON
MANAGING
JAVASCRIPT
@jsoversonCOMPLEXITY
Office hours @ 2:10pm