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
2. JavaScript dominates the web… 2 src: https://www.codementor.io/learn-programming
3. The language is prototype-based 3 But it is possible to emulate classes in JavaScript JavaScript
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
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
6. 6 Goal: Use type inference to identify 
 class-to-class dependencies
7. Type Inferencer https://flowtype.org/ 7
8. Proposed Approach 8
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
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<X> = require(“fileX.js");
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%
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%
13. Future Work We plan to… • Extend our study • Investigate the causes of false negatives • Combine static and dynamic analysis 13
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?
15. leonardo.silva@ifnmg.edu.br Thank you!!!