Statically Identifying Class Dependencies in Legacy JavaScript Systems: First Results (SANER ERA 2017)

Identifying dependencies between classes is an essential activity when maintaining and evolving software applications. It is also known that JavaScript developers often use classes to structure their projects. This happens even in legacy code, i.e., code implemented in JavaScript versions that do not provide syntactical support to classes. However, identifying associations and other dependencies between classes remain a challenge due to the lack of static type annotations. This paper investigates the use of type inference to identify relations between classes in legacy JavaScript code. To this purpose, we rely on Flow, a state-of-theart type checker and inferencer tool for JavaScript. We perform a study using code with and without annotating the class import statements in two modular applications. The results show that precision is 100% in both systems, and that the annotated version improves the recall, ranging from 37% to 51% for dependencies in general and from 54% to 85% for associations. Therefore, we hypothesize that these tools should also depend on dynamic analysis to cover all possible dependencies in JavaScript code.

Transcript

1. Statically Identifying Class
   Dependencies in Legacy
   JavaScript Systems: First Results
   Leonardo Silva (IFNMG, Brazil)
   Marco T. Valente (UFMG, Brazil)
   Alexandre Bergel (University of Chile)
   SANER ERA, 2017
   

   View Slide

2. JavaScript dominates the web…
   2
   src: https://www.codementor.io/learn-programming
   

   View Slide

3. The language is prototype-based
   3
   But it is possible to emulate classes in
   JavaScript
   JavaScript
   

   View Slide

4. 4
   4
   // function -> class
   function Circle (radius) {
   // property -> attribute
   this.radius = radius;
   }
   // function -> method
   Circle.prototype.getArea = function () {
   return (3.14 * this.radius * this.radius)
   }
   // Circle instance -> object
   var myCircle = new Circle (10);
   Classes in legacy JavaScript
   ECMAScript 5 

   ( ES5 )
   JS version
   

   View Slide

5. 5
   Heuristics for Class
   Identification
   Previous Work
   • Does Javascript Software Embrace Classes? SANER, 2015
   • JSClassFinder: A Tool to Detect Class-like Structures in
   JavaScript. CBSoft Tools, 2015
   

   View Slide

6. 6
   Goal: Use type inference to identify 

   class-to-class dependencies
   

   View Slide

7. Type Inferencer
   https://flowtype.org/
   7
   

   View Slide

8. Proposed Approach
   8
   

   View Slide

9. Evaluation Design
   1. Select two TypeScript systems
   2. Build an “oracle” with all dependencies
   3. Transpile TypeScript to JavaScript
   4. Apply the proposed approach
   5. Measure precision and recall
   9
   

   View Slide

10. Research Questions
    • RQ1: What is the accuracy of the proposed
    approach in detecting class dependencies?
    • RQ2: Do module annotations improve the accuracy
    of the proposed approach?
    10
    var X: Class = require(“fileX.js");
    

    View Slide

11. 11
    RQ1 - Accuracy of the Proposed Approach
    System
    All Dependencies Associations
    Precision Recall Precision Recall
    INVERSIFYJS 100% 6% 100% 19%
    SATELLIZER 100% 44% 100% 85%
    

    View Slide

12. 12
    RQ2 - Accuracy Using Module Annotations
    System
    All Dependencies Associations
    Precision Recall Precision Recall
    INVERSIFYJS 100% 37% 100% 54%
    SATELLIZER 100% 51% 100% 85%
    

    View Slide

13. Future Work
    We plan to…
    • Extend our study
    • Investigate the causes of false negatives
    • Combine static and dynamic analysis
    13
    

    View Slide

14. 14
    Open Questions
    1. Why module annotations do not help to improve
    type inference accuracy in some systems?
    2. Should one invest in dynamic analysis to detect
    class-to-class dependencies in JavaScript?
    

    View Slide

15. leonardo.silva@ifnmg.edu.br
    Thank you!!!
    

    View Slide