JARROD OVERSON

MANAGING

JAVASCRIPT@jsoversonCOMPLEXITY

WHO ISRIOT

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?

JAVASCRIPTWON

AND THIS ISN’T EVEN ITS FINAL FORM

STEP ONE

STEP THREE

ACCEPTANCESTEP 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 ISCOMPLEXITY?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 : 7function 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 THINKINGI’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

PLATOYour 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 HALSTEADHALSTEAD METRICS

PHIL BOOTH ARIYA HIDAYATTHOMAS MCCABECYCLOMATIC 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