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
JavaScript is gaining popularity
http://redmonk.com/dberkholz/2014/05/02/github-
language-trends-and-the-fragmenting-landscape/
2
1995: Small Scripts
3
2015: Complex Systems
4
Criticisms
https://www.destroyallsoftware.com/talks/wat 5
Motivation
How JavaScript software is organized?
6
Motivation
How JavaScript software is organized?
More specifically,
Do JS developers use class-like structures?
7
JavaScript
• Imperative
• Objects maps strings to values
– var person = { firstName: "Marco", lastName:"Valente" }
• Functions are first-class objects
– var fact = function factorial (n) { .... }
8
Emulating Classes
• new:
–creates a new object
–calls the constructor function
–with this bound to the new object 9
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
Prototype-based Inheritance
11
• Prototype chaining emulates inheritance
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
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
JSClassFinder
http://aserg.labsoft.dcc.ufmg.br/jsclasses/
14
Evaluation
Research Questions
1. Do developers use classes?
2. Do developers use inheritance?
3. What is the size of the classes?
16
Dataset
• 50 GitHub systems:
–at least 1,000 starts
–at least 150 commits
–that are no forks of other projects
17
Dataset
• Data cleaning:
– compacted files (min.js.*)
– third-party libraries
18
Dataset
• Largest system (ace): 194 KLOC
• Smallest system (masonry): 0.2 KLOC
• Average size: 14 KLOC
• Median is 2.5 KLOC
19
RQ #1: Do developers use classes?
• Class Usage Ratio (CUR):
20
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
Do large systems have more classes?
22
No correlation KLOC vs CUR
RQ #2: Do developers use inheritance?
• Only 9 systems with subclasses (but very few)
23
RQ #3: What is the size of JS classes?
24
Heavy-tailed distribution,
with NOA, NOM < 10 for most classes
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
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
Implications
ECMAScript 6
• Syntactical support to classes
• Conversion tool: “old JavaScript class styles” to ES 6
28
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
Thanks!
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

Does JavaScript Software Embrace Classes? (Talk at SANER 2015 Conference)

Editor's Notes

  • #7 In fact, our main motivation is to investigate how developers are organizing their JavaScript systems, which are becoming increasingly complex and large.
  • #16 And using this tool, we make a study aiming to answer 3 research questions
  • #19 We also made a careful work to clean the GitHub code, basically to remove minimized files (which are frequently used in JS to save network bandwidth) and also external libraries, that frequently are included in the source code.
  • #20 Just to give some number
  • #21 To answer the first RQ, we used a metric we called class usage ratio. Basicaly this metrics is the ratio of functions related to classes in a system, which can be methods or constructor functions
  • #22 Using this metric we found four types os systems: class-free systems, which have no functions implemented to emlutate classes. We found 13 class-free systems. We also have 18 systems with some classes, with CUR less than zero point two five. We called this systems class-aware .... The third category of systems are class-friendly, with CUR betwenn 0.25 and 0.75 ... and finally we found 4 systems which we called class-oriented systems, because most functions in these systems are used to emulate classes.
  • #23 We also checked whether large systems ave more classes ... and we found a very weak correlation between LOC and CUR