advertisement

Managing JavaScript Complexity in Teams - Fluent

50 %
50 %
advertisement
Information about Managing JavaScript Complexity in Teams - Fluent
Technology

Published on March 12, 2014

Author: JarrodOverson

Source: slideshare.net

Description

Slides for a talk given at Fluent 2014
advertisement

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Speaker: Jarrod Overson: JavaScript, HTML5, CSS3 ...

Jarrod Overson is a web junkie, JavaScript addict, ... Managing JavaScript Complexity in Teams. ... Fluent; About;
Read more

GitHub - markhealey/fluent2014-repos: A list of Github ...

... A list of Github repositories mentioned during #fluentconf 2014. ... Fluent 2014: Mentioned repos. I'm ... Managing JavaScript Complexity in Teams ...
Read more

Fluent Conference 2014 Complete Video Compilation - O ...

Put the latest web tech into practice If you missed the 2014 Fluent ... Comments about Fluent Conference 2014 Complete Video ... and Javascript ? by Pamela ...
Read more

Fluent Conference 2014 Complete Video Compilation - O ...

Fluent Conference 2014 Complete Video Compilation. ... How does the pervasiveness of JavaScript on the client change how we architect applications?
Read more

Fluent Conference 2014 Complete Video Compilation Part3 ...

Fluent Conference 2014 Complete Video Compilation ... javascript, HTML5, CSS3, ... 42.Managing javascript Complexity in Teams ...
Read more

[O'Reilly Media] Fluent Conference 2014 Complete Video ...

... Fluent Conference 2014 Complete Video Compilation ... JavaScript: Taking both the ... Managing JavaScript Complexity in Teams ...
Read more

Fluent Conference 2014: JavaScript & Beyond Complete Video ...

If you missed the 2014 Fluent Conference in ... Selection from Fluent Conference 2014: JavaScript & Beyond ... Managing JavaScript Complexity in Teams ...
Read more

[MULTI] Fluent Conference 2014 Complete Video Collection ...

If you missed the 2014 Fluent Conference ... http://rapidgator.net/file/af16f91269b378ace6790fdab593b9ec/42.Managing_JavaScript_Complexity_in_Teams ...
Read more