Automated Refactoring of Legacy JavaScript Code to ES6 Modules

TL;DR

This paper presents an automated method for refactoring legacy JavaScript code from ES5 to ES6 modules, improving reusability and reducing module coupling through static analysis and a new dependency graph.

Contribution

It introduces a novel static analysis approach and a prototype tool for automated, fine-grained module refactoring from ES5 to ES6, validated on open source projects.

Findings

Refactored code shows increased reusability of module elements.

Reduction in module coupling after refactoring.

Empirical validation confirms the soundness of the approach.

Abstract

The JavaScript language did not specify, until ECMAScript 6 (ES6), native features for streamlining encapsulation and modularity. Developer community filled the gap with a proliferation of design patterns and module formats, with impact on code reusability, portability and complexity of build configurations. This work studies the automated refactoring of legacy ES5 code to ES6 modules with fine-grained reuse of module contents through the named import/export language constructs. The focus is on reducing the coupling of refactored modules through destructuring exported module objects to fine-grained module features and enhancing module dependencies by leveraging the ES6 syntax. We employ static analysis to construct a model of a JavaScript project, the Module Dependence Graph (MDG), that represents modules and their dependencies. On the basis of MDG we specify the refactoring procedure for module migration to ES6. A prototype implementation has been empirically evaluated on 19 open source projects. Results highlight the relevance of the refactoring with a developer intent for fine-grained reuse. The analysis of refactored code shows an increase in the number of reusable elements per project and reduction in the coupling of refactored modules. The soundness of the refactoring is empirically validated through code inspection and execution of projects' test suites.