Context

• Context
• Research Objectives
• 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.

Little is known on the impact of code smells in JavaScript server code

Stackoverflow 2016 Survay

http://stackoverflow.com/research/developer-survey-2016

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Industry

*https://siftery.com/nodejs

More than 4500 companies*

Netflix   /  NY Times  /  PayPal  /  Medium

LinkedIn  /  Uber  /  Walmart

Mozilla / Pinterest

...

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Research Objectives

• Context
• Research Objectives
• 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?

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

RQ2

Are JavaScript files with code smells
equally fault-prone?

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Types of Code Smells

JSNose

• Context
• Research Objectives
• 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

8. Variable Re-assign
9. Nested Callbacks
10. Extra Bind
11. This Assign
12. Assignment in Conditional Statements

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

#8

Variable Re-assign

function parse(url) {
    url = url.split('/');
    // ...
}

• Context
• Research Objectives
• 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);
}

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

#12

Assignment in Conditional Statements

if (element = stack.pop()){
    element.addClass("last");
}

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Methodology & Design

Studied Systems, Data Extraction, Analysis

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Studied Systems

• Express Web framework
• Request HTTP client utility
• Less.js CSS pre-processor
• Bower.io Package manager
• Grunt Task Runner

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Data Extraction

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

• Context
• Research Objectives
• 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

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Data Extraction

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Data Extraction

• Context
• Research Objectives
• 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

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Code Smell Detection

Metrics

Code Smells

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Data Extraction

• Context
• Research Objectives
• 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.

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Survival Analysis

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Data Extraction

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Study Results

RQ1

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

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

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?

• Context
• Research Objectives
• 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.

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Request

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Findings

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Study Results

RQ2

Are JavaScript files with code smells
equally fault-prone?

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Approach

Time, Event

Smelly _i

If the file has the code smell type i

• Context
• Research Objectives
• 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

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

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

Findings

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Survey

https://srvy.online

Shared in HackerNews & EchoJS

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Survey

1484

Participants

• Context
• Research Objectives
• 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

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

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

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

Conclusion

Qualitative study with 1484 JS developers

Nested Callbacks, Variable Re-assign, Long Parameter List

• Context
• Research Objectives
• Methodology & Design
• Study Results
• Discussion
• Limitations
• Conclusion

#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