Slides for a talk given at Fluent 2014

2. JARROD OVERSON
MANAGING
JAVASCRIPT
@jsoversonCOMPLEXITY

3. WHO IS
RIOT

4. WE MAKE A GAME

6. A GAME THAT GOT HUGE

8. BUT I JUST
MAKE WEB
STUFF

9. THE WEB IS
AWESOME
BUT, WE NEED TO TALK.

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

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

12. STEP TWO
STEP ONE
STEP THREE
HONESTY

13. 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

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

15. 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.

16. 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.

17. 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.

18. WHY ARE WE EVEN HERE?

19. JAVASCRIPT
WON

20. AND THIS ISN’T EVEN ITS FINAL FORM

21. STEP ONE
STEP THREE
ACCEPTANCE
STEP TWO

22. RESPECT
YOUR JAVASCRIPT

23. ‣ 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

24. RESPECT
THE COMMUNITY

25. 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

26. VIOLATIONS BEGET VIOLATIONS
ALLOW 1 & ALLOW 1,000

27. 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?

28. KNOW YOUR OPTION’S OPTIONS

29. BE AGGRESSIVE. YOUR FEELINGS WILL GET HURT.

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

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

32. WHAT IS
COMPLEXITY?
CYCLOMATIC

33. TECHNICALLY
CYCLOMATIC COMPLEXITY
IS THE NUMBER OF PATHS
THROUGH YOUR CODE

34. PRACTICALLY
CYCLOMATIC COMPLEXITY
IS HOW HARD
YOUR CODE IS TO TEST

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

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

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

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

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

40. 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) {
}
}
}

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

42. BUT IT’S NOT THAT EASY

43. STEP TWO
STEP ONE
PERSEVERANCE
STEP THREE

44. VISUALIZE YOUR GOAL

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

46. YOUR GOAL

47. THE PATH
FILES PASSING IDEAL SETTINGS

48. THE PATH
FILES IN NEED OF LARGER REFACTOR

49. THE PATH
QUICK WINS

50. OTHER
METRICS
HALSTEAD METRICS
CODE COVERAGE
MAINTAINABILITY
LINES OF CODE

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

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

53. THE UNEXAMINED CODE IS
NOT WORTH RELEASING
“
”
- SOCRATES

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

55. 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

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