Managing JavaScript Complexity in Teams - Fluent
3 likes1,821 views
This document discusses managing complexity in JavaScript projects. It addresses coming to terms with the challenges of dynamic languages being messy, having an immature tooling ecosystem, and rapid evolution. It emphasizes respecting code style conventions, enforcing linting rules, documenting code, and using metrics like cyclomatic complexity to reduce testing difficulty. The overall message is that perseverance is needed to tame JavaScript's complexity through automation, visualization, honesty and acceptance of its challenges and opportunities.
Managing JavaScript Complexity in Teams - Fluent
- 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
- 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
- 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
- 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
- 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
- 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