Does JavaScript Software Embrace Classes? (SANER 2015)

Does JavaScript Software Embrace Classes? (SANER 2015)

In this talk we report on a large and in-depth study to understand how class emulation is employed in JavaScript applications. We propose a strategy to statically detect class-based abstractions in the source code of JavaScript systems. We used this strategy in a dataset of 50 popular JavaScript applications available from GitHub. We found four types of JavaScript software: class-free (systems that do not make any usage of classes), class-aware (systems that use classes, but marginally), class-friendly (systems that make a relevant usage of classes), and class-oriented (systems that have most of their data structures implemented as classes). The systems in these categories represent, respectively, 26%, 36%, 30%, and 8% of the systems we studied.

13beaa3b7239eca3319d54c6a9f3a85a?s=128

ASERG, DCC, UFMG

March 03, 2015
Tweet

Transcript

  1. 1.

    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
  2. 8.

    JavaScript • Imperative • Objects maps strings to values –

    var person = { firstName: "Marco", lastName:"Valente" } • Functions are first-class objects – var fact = function factorial (n) { .... } 8
  3. 9.

    Emulating Classes • new: –creates a new object –calls the

    constructor function –with this bound to the new object 9
  4. 10.

    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
  5. 12.

    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
  6. 13.

    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
  7. 16.

    Research Questions 1. Do developers use classes? 2. Do developers

    use inheritance? 3. What is the size of the classes? 16
  8. 17.

    Dataset • 50 GitHub systems: –at least 1,000 starts –at

    least 150 commits –that are no forks of other projects 17
  9. 19.

    Dataset • Largest system (ace): 194 KLOC • Smallest system

    (masonry): 0.2 KLOC • Average size: 14 KLOC • Median is 2.5 KLOC 19
  10. 21.

    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
  11. 23.
  12. 24.

    RQ #3: What is the size of JS classes? 24

    Heavy-tailed distribution, with NOA, NOM < 10 for most classes
  13. 25.

    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
  14. 26.

    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
  15. 28.

    ECMAScript 6 • Syntactical support to classes • Conversion tool:

    “old JavaScript class styles” to ES 6 28
  16. 29.

    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
  17. 30.
  18. 31.

    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