research-article

Automated refactoring of legacy JavaScript code to ES6 modules

Authors:

Katerina Paltoglou,

Vassilis E. Zafeiris,

N.A. Diamantidis,

E.A. GiakoumakisAuthors Info & Claims

Volume 181, Issue C

https://doi.org/10.1016/j.jss.2021.111049

Published: 01 November 2021 Publication History

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.

Highlights

•

We study the automated migration of legacy JavaScript code to ES6.

•

We refactor ES5 code to ES6 modules and advanced use of named imports/exports.

•

We specify the refactoring identification algorithm and code transformation.

•

We evaluate effectiveness and practicality of the method with an empirical study.

•

The method reduces module coupling and enables fine-grained reuse among modules.

References

[1]

Abid C., Alizadeh V., Kessentini M., do Nascimento Ferreira T., Dig D., 30 years of software refactoring research: A systematic literature review, 2020, arXiv:2007.02194.

[2]

Agnihotri M., Chug A., A systematic literature survey of software metrics, code smells and refactoring techniques, J. Inf. Process. Syst. 16 (2020) 915–934.

[3]

AMD JS M., Asynchronous module definition (AMD) API, 2020, https://github.com/amdjs/amdjs-api, Accessed: 2020.

[4]

Anon M., Requirejs module loader, 2020, https://requirejs.org, Accessed: 2020.

[5]

Baqais A.A.B., Alshayeb M., Automatic software refactoring: A systematic literature review, Softw. Qual. J. 28 (2020) 459–502.

[6]

Bavota G., De Lucia A., Di Penta M., Oliveto R., Palomba F., An experimental investigation on the innate relationship between quality and refactoring, J. Syst. Softw. 107 (2015) 1–14.

Digital Library

[7]

Brito, A., Hora, A.C., Valente, M.T., 2020. Refactoring graphs: Assessing refactoring over time. In: 2020 IEEE 27th International Conference on Software Analysis, Evolution and Reengineering (SANER), pp. 367–377.

[8]

Brodu E., Frénot S., Oblé F., Toward automatic update from callbacks to promises, in: Proceedings of the 1st Workshop on All-Web Real-Time Systems, AWeS ’15, ACM, 2015.

[9]

Bruce B.R., Zhang T., Arora J., Xu G.H., Kim M., Jshrink: In-depth investigation into debloating modern java applications, in: Proceedings of the 28th ACM Joint Meeting on European Software Engineering Conference and Symposium on the Foundations of Software Engineering, ESEC/FSE 2020, ACM, 2020, pp. 135–146.

[10]

Crockford D., JavaScript: The Good Parts, O’Reilly Media, Inc., 2008.

[11]

ECMA International D., ECMAScript 2015 language specification, 2015, https://www.ecma-international.org/ecma-262/6.0/.

[12]

Feldthaus A., Millstein T., Møller A., Schafer̈ M., Tip F., Tool-supported refactoring for javascript, in: Proceedings of the 2011 ACM Int. Conf. on Object Oriented Programming Systems Languages and Applications, OOPSLA ’11, ACM, 2011, pp. 119–138.

[13]

Feldthaus A., Møller A., Semi-automatic rename refactoring for javascript, SIGPLAN Not. 48 (2013) 323–338.

[14]

Fernandes E., Chávez A., Garcia A., Ferreira I., Cedrim D., Sousa L., Oizumi W., Refactoring effect on internal quality attributes: What haven’t they told you yet?, Inf. Softw. Technol. (2020).

[15]

Fowler M., Refactoring: Improving the Design of Existing Code, first ed., Addison-Wesley Longman Publishing Co. Inc., Boston, MA, USA, 1999.

[16]

Fowler M., Refactoring: Improving the Design of Existing Code, second ed., Addison-Wesley Longman Publishing Co. Inc., Boston, MA, USA, 2018.

[17]

Gallaba, K., Hanam, Q., Mesbah, A., Beschastnikh, I., 2017. Refactoring asynchrony in javascript. In: 2017 IEEE Int. Conf. on Software Maintenance and Evolution (ICSME), pp. 353–363.

[18]

Gallaba, K., Mesbah, A., Beschastnikh, I., 2015. Don’t call us, we’ll call you: Characterizing callbacks in javascript. In: 2015 ACM/IEEE Int. Symp. on Empirical Software Engineering and Measurement (ESEM).

[19]

Gligoric M., Behrang F., Li Y., Overbey J., Hafiz M., Marinov D., Systematic testing of refactoring engines on real software projects, in: Proceedings of the 27th European Conf. on Object-Oriented Programming, ECOOP’13, Springer-Verlag, 2013, pp. 629–653.

[20]

Grover D., Kunduru H.P., ES6 for Humans: The Latest Standard of JavaScript ES2015 and beyond, first ed., Apress, USA, 2017.

[21]

Ivers, J., Ozkaya, I., Nord, R.L., Seifried, C., 2020. Next generation automated software evolution refactoring at scale. In: Proceedings of the 28th ACM Joint Meeting on European Software Engineering Conference and Symposium on the Foundations of Software Engineering, pp. 1521–1524.

[22]

Jensen S.H., Jonsson P.A., Møller A., Remedying the eval that men do, in: Proceedings of the 2012 Int. Symp. on Software Testing and Analysis, ISSTA 2012, ACM, 2012, pp. 34–44.

[23]

Lacerda G., Petrillo F., Pimenta M., Guehéneuć Y.G., Code smells and refactoring: A tertiary systematic review of challenges and observations, J. Syst. Softw. 167 (2020).

[24]

Martin R.C., Agile Software Development: Principles, Patterns, and Practices, Prentice Hall PTR, Upper Saddle River, NJ, USA, 2003.

[25]

MDN Web Docs R.C., Javascript reference, 2020, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference.

[26]

Mens T., Tourwé T., A survey of software refactoring, IEEE Trans. Softw. Eng. 30 (2004) 126–139.

Digital Library

[27]

Nasagh R.S., Shahidi M., Ashtiani M., A fuzzy genetic automatic refactoring approach to improve software maintainability and flexibility, Soft Comput. (2020) 1–31.

[28]

Obbink, N.G., Malavolta, I., Scoccia, G.L., Lago, P., 2018. An extensible approach for taming the challenges of javascript dead code elimination. In: 2018 IEEE 25th International Conference on Software Analysis, Evolution and Reengineering (SANER), pp. 291–401.

[29]

OpenJS R.S., Node.js v12.6.0 documentation: ECMAScript modules, 2020, https://nodejs.org/api/esm.html, Accessed: 2020.

[30]

OpenJS R.S., Node.js documentation: CommonJS modules, 2020, https://nodejs.org/api/modules.html.

[31]

Osmani A., Learning JavaScript Design Patterns, O’Reilly Media, Inc., 2012.

[32]

Paiva D.M.B., Freire A.P., de Mattos Fortes R.P., Accessibility and software engineering processes: A systematic literature review, J. Syst. Softw. (2020).

[33]

Paltoglou A., Zafeiris V.E., Giakoumakis E.A., Diamantidis N., Automated refactoring of client-side javascript code to es6 modules, in: 2018 IEEE 25th Int. Conf. on Software Analysis, Evolution and Reengineering, SANER, IEEE, 2018, pp. 402–412.

[34]

Rauschmayer A., Speaking JavaScript, first ed., O’Reilly Media, Inc., 2014.

[35]

Rauschmayer A., Exploring ES6. Upgrade to the next version of javascript, 2015.

[36]

Rollup A., Rollup module bundler, 2020, https://rollupjs.org, Accessed: 2020.

[37]

Rostami, S., Eshkevari, L., Mazinanian, D., Tsantalis, N., 2016. Detecting function constructors in javascript. In: 2016 IEEE Int. Conf. on Software Maintenance and Evolution (ICSME), pp. 488–492.

[38]

Shore J., Fail fast, IEEE Softw. 21 (2004) 21–25,.

Digital Library

[39]

Silva, L.H., Valente, M.T., Bergel, A., 2017. Statically identifying class dependencies in legacy javascript systems: First results. In: 2017 IEEE 24th Int. Conf. on Software Analysis, Evolution and Reengineering (SANER).

[40]

Silva, L.H., Valente, M.T., Bergel, A., 2017. Refactoring legacy JavaScript code to use classes: The good, the bad and the ugly. In: 16th Int. Conf. on Software Reuse (ICSR), pp. 1–16.

[41]

Silva L.H., Valente M.T., Bergel A., Anquetil N., Etien A., Identifying classes in legacy javascript code, J. Softw.: Evol. Process 1 (2017) 1–37.

[42]

Soares, E., Ribeiro, M., Amaral, G., Gheyi, R., Fernandes, L., Garcia, A., Fonseca, B., Santos, A., 2020. Refactoring test smells: A perspective from open-source developers. In: Proceedings of the 5th Brazilian Symposium on Systematic and Automated Software Testing, pp. 50–59.

[43]

Sousa, L., Oizumi, W., Garcia, A., Oliveira, A., Cedrim, D., Lucena, C., 2020. When are smells indicators of architectural refactoring opportunities: A study of 50 software projects. In: Proceedings of the 28th International Conference on Program Comprehension, pp. 354–365.

[44]

UMD L.H., Universal module definition (UMD) API, 2020, https://github.com/umdjs/umd, Accessed: 2020.

[45]

Vazquez H., Bergel A., Vidal S., Pace J., Marcos C., Slimming javascript applications: an approach for removing unused functions from javascript libraries, Inf. Softw. Technol. (2018).

[46]

Webpack H., Webpack module bundler. Tree shaking, 2019, https://webpack.js.org/guides/tree-shaking/, Accessed: Nov. 2019.

[47]

Wirfs-Brock A., Eich B., Javascript: The first 20 years, Proc. ACM Program. Lang. 4 (2020),.

Digital Library

[48]

Wohlin C., Runeson P., Hosẗ M., Ohlsson M.C., Regnell B., Wesslén A., Experimentation in Software Engineering: An Introduction, Kluwer Academic Publishers, Norwell, MA, USA, 2000.

Digital Library

[49]

Ying M., Miller J., Refactoring legacy ajax applications to improve the efficiency of the data exchange component, J. Syst. Softw. 86 (2013) 72–88.

[50]

Zakas N., Maintainable JavaScript, O’Reilly Media, Inc., 2012.

Cited By

Nicolini THora AFigueiredo E(2024)On the Usage of New JavaScript Features Through Transpilers: The Babel CaseIEEE Software10.1109/MS.2023.324385841:1(105-112)Online publication date: 1-Jan-2024
https://dl.acm.org/doi/10.1109/MS.2023.3243858
Panighrahi RKuanar SKumar L(2022)Cross-Project Software Refactoring Prediction Using Optimized Deep Learning Neural Network With the Aid of Attribute SelectionInternational Journal of Open Source Software and Processes10.4018/IJOSSP.30075613:1(1-31)Online publication date: 20-May-2022
https://dl.acm.org/doi/10.4018/IJOSSP.300756

Index Terms

Automated refactoring of legacy JavaScript code to ES6 modules
1. Social and professional topics
  1. Professional topics
    1. Management of computing and information systems
      1. Software management
        Software maintenance
2. Software and its engineering
  1. Software creation and management
    1. Software development techniques
    2. Software post-development issues
      1. Software reverse engineering
  2. Software notations and tools
    1. General programming languages

Index terms have been assigned to the content through auto-classification.

Recommendations

ES6 for Humans: The Latest Standard of JavaScript ES2015 and Beyond
Aspect-Oriented Refactoring of Legacy Applications: An Evaluation

The primary claimed benefits of aspect-oriented programming (AOP) are that it improves the understandability and maintainability of software applications by modularizing crosscutting concerns. Before there is widespread adoption of AOP, developers need ...
Drupal 6 JavaScript and jQuery

Comments

Please enable JavaScript to view thecomments powered by Disqus.

Information & Contributors

Information

Published In

cover image Journal of Systems and Software

Journal of Systems and Software Volume 181, Issue C

Nov 2021

331 pages

ISSN:0164-1212

Issue’s Table of Contents

Elsevier Inc.

Publisher

Elsevier Science Inc.

United States

Publication History

Published: 01 November 2021

Author Tags

Qualifiers

Research-article

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

2
Total Citations
View Citations
0
Total Downloads

Downloads (Last 12 months)0
Downloads (Last 6 weeks)0

Reflects downloads up to 26 Dec 2024

Other Metrics

View Author Metrics

Citations

Cited By

Nicolini THora AFigueiredo E(2024)On the Usage of New JavaScript Features Through Transpilers: The Babel CaseIEEE Software10.1109/MS.2023.324385841:1(105-112)Online publication date: 1-Jan-2024
https://dl.acm.org/doi/10.1109/MS.2023.3243858
Panighrahi RKuanar SKumar L(2022)Cross-Project Software Refactoring Prediction Using Optimized Deep Learning Neural Network With the Aid of Attribute SelectionInternational Journal of Open Source Software and Processes10.4018/IJOSSP.30075613:1(1-31)Online publication date: 20-May-2022
https://dl.acm.org/doi/10.4018/IJOSSP.300756

View Options

View options

Media

Figures

Other

Tables

View Issue’s Table of Contents