On the fault-proneness of

JavaScript Code Smells

Amir Saboury

December 2016

Outline

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

JavaScript

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Code Smell

The pieces of the codes that scream out to be refactored

 – Martin Fowler

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Research Objectives

RQ1

Is the risk of fault higher in files with code smells in comparison with those without smell?

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

RQ2

Are JavaScript files with code smells
equally fault-prone?

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Related Works

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Li and Shatnawi

The relationships between code smells and the occurrence of errors in Eclipse.

Code smells are positively associated with higher error probability.

Khomh et al.

The relationship between code smells and the change- and fault-proneness of 54 releases of four Java open source systems.

Classes with code smells tend to be more change- and fault-prone than other classes.

 Fard et al.

JSNOSE: a tool to detect 13 different types of code smells in JavaScript systems.

“lazy object” and “long method/function” are the most frequent code smells.

JavaScript Code Smells

  1. The detection of code smells.
  2. The evolution of code smells in software systems and their impact on software quality.
  3. The relationship between code smells and software development activities.
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Types of Code Smells

JSNose

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Types of Code Smells

  1. Lengthy Lines
  2. Long Parameter List
  3. Long Methods
  4. Complex code
  5. Complex Switch Case
  6. Chained Methods
  7. Depth

 

  1. Variable Re-assign
  2. Nested Callbacks
  3. Extra Bind
  4. This Assign
  5. Assignment in Conditional Statements
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

#8

Variable Re-assign

function parse(url) {
    url = url.split('/');
    // ...
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

#9

Nested Callbacks

$.get('/info.json', function (err, data) {
    log(data, function (err, data) {
        // ...
    });
});
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

#10

Extra Bind

var download = function (url) {
    var callback = function (err, data) {
        // this.data = data;
        console.log(data);
    }.bind(this);
    $get(url, callback);
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

#11

"this" Assign

var download = function (url) {
    var self = this;
    var callback = function (err, data) {
        self.error = err;
        self.data = data;
    }
    $get(url, callback);
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

#12

Assignment in Conditional Statements

if (element = stack.pop()){
    element.addClass("last");
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Methodology & Design

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Studied Systems, Data Extraction, Analysis

Studied Systems

  • Express Web framework
  • Request HTTP client utility
  • Less.js CSS pre-processor
  • Bower.io Package manager
  • Grunt Task Runner
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Data Extraction

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion
var a = 42;
var b = 5;
function addA(d) {
  return a + d;
}
var c = addA(2) + b;

Abstract Source Tree

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Data Extraction

File

comit
comit
comit
comit
comit
bug inducing
bug fixing
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Data Extraction

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Code Smell Detection

  1. Extra Bind
  2. This Assign
  3. Assignment in Conditional Statements
  4. Variable Re-assign
  5. Lengthy Lines
  6. Chained Methods
  7. Long Parameter List
  8. Nested Callbacks
  9. Complex code
  10. Long Methods
  11. Complex Switch Case
  12. Depth

Boolean

Number

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Code Smell Detection

Metrics

Code Smells

grunt - nested callbacks
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Data Extraction

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Survival Analysis

Models how long subjects under observation can survive before the occurrence of an event of interest.

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Survival Analysis

Die

Live

Die

Live

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Data Extraction

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Study Results

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

RQ1

Is the risk of fault higher in files with code smells in comparison with those without smell?

Approach

Time:

The number of hours between the previous revision and the revision r.

For each file f and revision r:

Covariate of interest:

The presence of a code smell in the file f in the revision r.

Event:

Is the revision r a fault-fixing change?

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Survival Analysis

Cox Proportional Hazard Model

  • Subjects can remain in the model for the entire observation period.
  • Subjects can be grouped according to a covariate (smelly or non-smelly).
  • The characteristics of the subjects might change during the observation period.
  • Cox hazard models are adapted for events that are recurrent.
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Request

Less.js

Grunt

Express

Bower

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Log-rank Test

(which compares the survival distributions of two samples)

p-value < 0.05

JavaScript files without code smells have hazard rates 65% lower than JavaScript files with code smells and this difference is statistically significant.

Findings

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Study Results

RQ2

Are JavaScript files with code smells
equally fault-prone?

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Approach

Time, Event

Smelly i

If the file has the code smell type i

LOC, Code Churn, and the number of past bugs

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

The hazard ratios of the studied code smells vary across the systems

Express

Chained Methods, This Assign, Variable Re-assign, and #Past-bugs

Grunt

Nested Callbacks, Assignment in Conditional Statements, and Variable Re-assign

Bower

Depth, #Past-bugs, and LOC

Less.js

Assignment in Conditional Statements, and #Past-bugs

Request

Variable Re-assign, and #Past-bugs

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion
JavaScript files containing different types of code smells are not equally fault-prone.

Refactor files containing "Variable Re-assign" and "Assignment in Conditional Statements" code smell in priority.

Findings

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Survey

https://srvy.online

Shared in HackerNews & EchoJS

Survey

1484

Participants

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Survey

92% used JS for client-side applications

51% used JS for server-side applications

68% 3+ years of experience with JavaScript

Nested Callbacks (8.1/10)

Variable Re-assign (6.5/10)

Long Parameter List (6.2/10)

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Limitations

  • Findings bug-fixing commits ("bug", "fix", "defect" etc)

  • SZZ heuristic

  • Presence of the smell in the file as a whole

  • AST provided by ESLint

  • 5 JS Systems

Conclusion

Quantitative study of 5 JavaScript systems

JS files without code smells have hazard rates 65% lower than JavaScript files with code smells

"Variable Re-assign" and "Assignment in Cond. Statements" have the highest hazard rates

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Limitations
  • Conclusion

Conclusion

Qualitative study with 1484 JS developers

Nested Callbacks, Variable Re-assign, Long Parameter List

  • 5 JavaScript systems
  • Extracted information about code smells
  • Survival Analysis

"Variable Re-assign" and "Assignment in Conditional Statements"

Different types of code smells are not equally fault-prone.

Files without code smells have 65% lower hazard rates.

  • Qualitative study
  • Survey with 1484 JS developers

"Nested Callbacks", "Variable Re-assign", "Long Parameter List"

Summary

Thank you

#1

Lengthy Lines

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#2

Long Parameter List

move(x1, y1, x2, y2, direction, speed, steps, onFinish)
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#3

Long Methods

* https://sourcemaking.com/refactoring
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#4

Complex code

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

cyclomatic complexity

#5

Complex Switch Case

* https://sourcemaking.com/refactoring
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#6

Chained Methods

$('a').find('span').attr('id', 'title').end().click();
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#7

Depth

var download = function (url) {
    if (url) {
        $get(url, function(err, data) {
            if (!err) {
                if (data.includes('http')) {
                    //...
                }
            }
        });
    }
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

js-smell

By amir

Made with Slides.com

js-smell

  • 1,900

More from amir