Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

ASERG, DCC, UFMG

March 03, 2015
Tweet

More Decks by ASERG, DCC, UFMG

Other Decks in Research

Transcript

  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

    View Slide

  2. JavaScript is gaining popularity
    http://redmonk.com/dberkholz/2014/05/02/github-
    language-trends-and-the-fragmenting-landscape/
    2

    View Slide

  3. 1995: Small Scripts
    3

    View Slide

  4. 2015: Complex Systems
    4

    View Slide

  5. Criticisms
    https://www.destroyallsoftware.com/talks/wat 5

    View Slide

  6. Motivation
    How JavaScript software is organized?
    6

    View Slide

  7. Motivation
    How JavaScript software is organized?
    More specifically,
    Do JS developers use class-like structures?
    7

    View Slide

  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

    View Slide

  9. Emulating Classes
    • new:
    –creates a new object
    –calls the constructor function
    –with this bound to the new object
    9

    View Slide

  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

    View Slide

  11. Prototype-based Inheritance
    11
    • Prototype chaining emulates inheritance

    View Slide

  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

    View Slide

  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

    View Slide

  14. JSClassFinder
    http://aserg.labsoft.dcc.ufmg.br/jsclasses/
    14

    View Slide

  15. Evaluation

    View Slide

  16. Research Questions
    1. Do developers use classes?
    2. Do developers use inheritance?
    3. What is the size of the classes?
    16

    View Slide

  17. Dataset
    • 50 GitHub systems:
    –at least 1,000 starts
    –at least 150 commits
    –that are no forks of other projects
    17

    View Slide

  18. Dataset
    • Data cleaning:
    – compacted files (min.js.*)
    – third-party libraries
    18

    View Slide

  19. Dataset
    • Largest system (ace): 194 KLOC
    • Smallest system (masonry): 0.2 KLOC
    • Average size: 14 KLOC
    • Median is 2.5 KLOC
    19

    View Slide

  20. RQ #1: Do developers use classes?
    • Class Usage Ratio (CUR):
    20

    View Slide

  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

    View Slide

  22. Do large systems have more classes?
    22
    No correlation KLOC vs CUR

    View Slide

  23. RQ #2: Do developers use inheritance?
    • Only 9 systems with subclasses (but very few)
    23

    View Slide

  24. RQ #3: What is the size of JS classes?
    24
    Heavy-tailed distribution,
    with NOA, NOM < 10 for most classes

    View Slide

  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

    View Slide

  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

    View Slide

  27. Implications

    View Slide

  28. ECMAScript 6
    • Syntactical support to classes
    • Conversion tool: “old JavaScript class styles” to ES 6
    28

    View Slide

  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

    View Slide

  30. Thanks!

    View Slide

  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

    View Slide