Automated refactoring of client-side JavaScript code to ES6 modules

JavaScript (JS) is a dynamic, weakly-typed and object-based programming language that expanded its reach, in recent years, from the desktop web browser to a wide range of runtime platforms in embedded, mobile and server hosts. Moreover, the scope of functionality implemented in JS scaled from DOM manipulation in dynamic HTML pages to full-scale applications for various domains, stressing the need for code reusability and maintainability. Towards this direction, the ECMAScript 6 (ES6) revision of the language standardized the syntax for class and module definitions, streamlining the encapsulation of data and functionality at various levels of granularity. This work focuses on refactoring client-side web applications for the elimination of code smells, relevant to global variables and functions that are declared in JS files linked to a web page. These declarations "pollute" the global namespace at runtime and often lead to name conflicts with undesired effects. We propose a method for the encapsulation of global declarations through automated refactoring to ES6 modules. Our approach transforms each linked JS script of a web application to an ES6 module with appropriate import and export declarations that are inferred through static analysis. A prototype implementation of the proposed method, based on WALA libraries, has been evaluated on a set of open source projects. The evaluation results support the applicability and runtime efficiency of the proposed method.

[1]  Úlfar Erlingsson,et al.  Automated Analysis of Security-Critical JavaScript APIs , 2011, 2011 IEEE Symposium on Security and Privacy.

[2]  Ali Mesbah,et al.  A Study of Causes and Consequences of Client-Side JavaScript Bugs , 2017, IEEE Transactions on Software Engineering.

[3]  Alfred V. Aho,et al.  Compilers: Principles, Techniques, and Tools (2nd Edition) , 2006 .

[4]  Frank Tip,et al.  Refactoring towards the good parts of javascript , 2011, OOPSLA Companion.

[5]  Amin Milani Fard,et al.  JavaScript: The (Un)Covered Parts , 2017, 2017 IEEE International Conference on Software Testing, Verification and Validation (ICST).

[6]  William F. Opdyke,et al.  Refactoring object-oriented frameworks , 1992 .

[7]  Frank Tip,et al.  Efficient construction of approximate call graphs for JavaScript IDE services , 2013, 2013 35th International Conference on Software Engineering (ICSE).

[8]  Frank Tip,et al.  Correlation Tracking for Points-To Analysis of JavaScript , 2012, ECOOP.

[9]  Anders Møller,et al.  Semi-automatic rename refactoring for JavaScript , 2013, OOPSLA.

[10]  Mauricio A. Saca Refactoring improving the design of existing code , 2017, 2017 IEEE 37th Central America and Panama Convention (CONCAPAN XXXVII).

[11]  Davood Mazinanian,et al.  Detecting Function Constructors in JavaScript , 2016, 2016 IEEE International Conference on Software Maintenance and Evolution (ICSME).

[12]  Sukyoung Ryu,et al.  Battles with False Positives in Static Analysis of JavaScript Web Applications in the Wild , 2016, 2016 IEEE/ACM 38th International Conference on Software Engineering Companion (ICSE-C).

[13]  Manu Sridharan,et al.  DLint: dynamically checking bad coding practices in JavaScript , 2015, ISSTA.

[14]  Mary Shaw,et al.  Global variable considered harmful , 1973, SIGP.

[15]  Davood Mazinanian,et al.  JSDeodorant: Class-Awareness for JavaScript Programs , 2017, 2017 IEEE/ACM 39th International Conference on Software Engineering Companion (ICSE-C).

[16]  Simon Holm Jensen,et al.  Remedying the eval that men do , 2012, ISSTA 2012.

[17]  Peter Thiemann,et al.  Type Analysis for JavaScript , 2009, SAS.

[18]  Zhen Zhang xWIDL: modular and deep JavaScript API misuses checking based on extended WebIDL , 2016, SPLASH.

[19]  Marijn Haverbeke,et al.  Eloquent JavaScript: A Modern Introduction to Programming , 2011 .

[20]  Marco Tulio Valente,et al.  Statically identifying class dependencies in legacy JavaScript systems: First results , 2017, 2017 IEEE 24th International Conference on Software Analysis, Evolution and Reengineering (SANER).

[21]  Ralph E. Johnson,et al.  A Refactoring Tool for Smalltalk , 1997, Theory Pract. Object Syst..

[22]  Marco Tulio Valente,et al.  Refactoring Legacy JavaScript Code to Use Classes: The Good, The Bad and The Ugly , 2017, ICSR.

[23]  Marco Tulio Valente,et al.  Identifying Classes in Legacy JavaScript Code , 2017, J. Softw. Evol. Process..

[24]  Prasad A. Kulkarni,et al.  Source-to-Source Refactoring and Elimination of Global Variables in C Programs , 2013 .

[25]  水野 貴明,et al.  JavaScript : the good parts : 「良いパーツ」によるベストプラクティス , 2008 .

[26]  Ali Mesbah,et al.  Discovering bug patterns in JavaScript , 2016, SIGSOFT FSE.

[27]  Amin Milani Fard,et al.  JSNOSE: Detecting JavaScript Code Smells , 2013, 2013 IEEE 13th International Working Conference on Source Code Analysis and Manipulation (SCAM).

[28]  Addy Osmani Learning JavaScript Design Patterns - a JavaScript and jQuery Developer's Guide , 2012 .

[29]  Frank Tip,et al.  Tool-supported refactoring for JavaScript , 2011, OOPSLA '11.

[30]  Foutse Khomh,et al.  An empirical study of code smells in JavaScript projects , 2017, 2017 IEEE 24th International Conference on Software Analysis, Evolution and Reengineering (SANER).