Does JavaScript Software
Embrace Classes?
L. Silva, M. Ramos,
M. T. Valente
UFMG, Brazil
A. Bergel
Univ. Chile
N. Anquetil
INRIA, France
SANER, Montreal, March 2015
Slide 2
Slide 2 text
JavaScript is gaining popularity
http://redmonk.com/dberkholz/2014/05/02/github-
language-trends-and-the-fragmenting-landscape/
2
Motivation
How JavaScript software is organized?
6
Slide 7
Slide 7 text
Motivation
How JavaScript software is organized?
More specifically,
Do JS developers use class-like structures?
7
Slide 8
Slide 8 text
JavaScript
• Imperative
• Objects maps strings to values
– var person = { firstName: "Marco", lastName:"Valente" }
• Functions are first-class objects
– var fact = function factorial (n) { .... }
8
Slide 9
Slide 9 text
Emulating Classes
• new:
–creates a new object
–calls the constructor function
–with this bound to the new object
9
Slide 10
Slide 10 text
Emulating Inheritance
• Each object has an implicit prototype property
• To eval obj.p, the runtime searches for p in:
–The current object obj
–The prototype of obj
–The prototype of the prototype of obj
10
Heuristic to Detect Classes
• A class is a tuple (C,A,M)
–C is the class name
–A= {a1
, a2
, ..., ap
} are attributes
–M= {m1
, m2
, ..., mq
} are methods
12
Slide 13
Slide 13 text
Heuristic to Detect Classes
• A program P has a class (C,A,M) if:
–P has a function called C
• For each a in A,
– C includes this.a = Exp;
• For each m in M
– C includes this.m = function {...}
–P has a new C()
13
Dataset
• Largest system (ace): 194 KLOC
• Smallest system (masonry): 0.2 KLOC
• Average size: 14 KLOC
• Median is 2.5 KLOC
19
Slide 20
Slide 20 text
RQ #1: Do developers use classes?
• Class Usage Ratio (CUR):
20
Slide 21
Slide 21 text
Key Finding: Four Types of Systems
• Class-free systems (CUR = 0)
– 13 systems, 26%
• Class-aware systems (0 < CUR ≤ 0.25)
– 18 systems, 36%
• Class-friendly systems (0.25 < CUR ≤ 0.75)
– 15 systems, 30%
• Class-oriented systems (CUR > 0.75)
– 4 systems, 8%
21
Slide 22
Slide 22 text
Do large systems have more classes?
22
No correlation KLOC vs CUR
Slide 23
Slide 23 text
RQ #2: Do developers use inheritance?
• Only 9 systems with subclasses (but very few)
23
Slide 24
Slide 24 text
RQ #3: What is the size of JS classes?
24
Heavy-tailed distribution,
with NOA, NOM < 10 for most classes
Slide 25
Slide 25 text
Few methods
• In Java:
– Classes have more methods than attributes
• In JavaScript:
– Classes with more attributes are common
– Possible reason: lack of getters and setters
25
Slide 26
Slide 26 text
In Summary
• For many JavaScript developers:
• Objects are not enough... they need classes
• We found classes in 74% of the systems
• But there is controversy :
• “This is the first time a research paper has ever
called me classless, and boy am I proud.”
• (prototype-based) inheritance is rarely used
26
Slide 27
Slide 27 text
Implications
Slide 28
Slide 28 text
ECMAScript 6
• Syntactical support to classes
• Conversion tool: “old JavaScript class styles” to ES 6
28
Slide 29
Slide 29 text
Class-Oriented Tools and Techniques
1. Reverse engineering (class diagrams)
2. Bad smells (large class, feature envy etc)
3. IDEs with class browsers (package explorer)
4. Metrics (coupling, cohesion etc)
29
Slide 30
Slide 30 text
Thanks!
Slide 31
Slide 31 text
Does JavaScript Software
Embrace Classes?
L. Silva, M. Ramos,
M. T. Valente
UFMG, Brazil
A. Bergel
Univ. Chile
N. Anquetil
INRIA, France
SANER, Montreal, March 2015