Refactoring Legacy JavaScript Code to Use Classes: The Good, The Bad and The Ugly

  • Leonardo Humberto Silva
  • Marco Tulio Valente
  • Alexandre Bergel
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 10221)

Abstract

JavaScript systems are becoming increasingly complex and large. To tackle the challenges involved in implementing these systems, the language is evolving to include several constructions for programming-in-the-large. For example, although the language is prototype-based, the latest JavaScript standard, named ECMAScript 6 (ES6), provides native support for implementing classes. Even though most modern web browsers support ES6, only a very few applications use the class syntax. In this paper, we analyze the process of migrating structures that emulate classes in legacy JavaScript code to adopt the new syntax for classes introduced by ES6. We apply a set of migration rules on eight legacy JavaScript systems. In our study, we document: (a) cases that are straightforward to migrate (the good parts); (b) cases that require manual and ad-hoc migration (the bad parts); and (c) cases that cannot be migrated due to limitations and restrictions of ES6 (the ugly parts). Six out of eight systems (75%) contain instances of bad and/or ugly cases. We also collect the perceptions of JavaScript developers about migrating their code to use the new syntax for classes.

Keywords

JavaScript Refactoring ECMAScript 6 

References

  1. 1.
    Kienle, H.: It’s about time to take JavaScript (more) seriously. IEEE Softw. 27(3), 60–62 (2010)CrossRefGoogle Scholar
  2. 2.
    Ocariza Jr., F.S., Pattabiraman, K., Zorn, B.: JavaScript errors in the wild: an empirical study. In: 22nd IEEE International Symposium on Software Reliability Engineering (ISSRE), pp. 100–109 (2011)Google Scholar
  3. 3.
    Nederlof, A., Mesbah, A., van Deursen, A.: Software engineering for the web: the state of the practice. In: 36th International Conference on Software Engineering (ICSE), pp. 4–13 (2014)Google Scholar
  4. 4.
    Borges, H., Hora, A., Valente, M.T.: Understanding the factors that impact the popularity of GitHub repositories. In: 32nd International Conference on Software Maintenance and Evolution (ICSME), pp. 1–10 (2016)Google Scholar
  5. 5.
    Borning, A.H.: Classes versus prototypes in object-oriented languages. In: ACM Fall Joint Computer Conference, pp. 36–40 (1986)Google Scholar
  6. 6.
    Guha, A., Saftoiu, C., Krishnamurthi, S.: The essence of JavaScript. In: D’Hondt, T. (ed.) ECOOP 2010. LNCS, vol. 6183, pp. 126–150. Springer, Heidelberg (2010). doi:10.1007/978-3-642-14107-2_7 CrossRefGoogle Scholar
  7. 7.
    European Association for Standardizing Information and Communication Systems (ECMA). ECMAScript Language Specification, 6th edn. (2015)Google Scholar
  8. 8.
    Silva, L.H., Ramos, M., Valente, M.T., Bergel, A., Anquetil, N.: Does JavaScript software embrace classes? In: 22nd IEEE International Conference on Software Analysis, Evolution, and Reengineering (SANER), pp. 73–82 (2015)Google Scholar
  9. 9.
    Silva, L.H., Hovadick, D., Valente, M.T., Bergel, A., Anquetil, N., Etien, A.: JSClassFinder: a tool to detect class-like structures in JavaScript. In: 6th Brazilian Conference on Software (CBSoft), Tools Demonstration Track, pp. 113–120 (2015)Google Scholar
  10. 10.
    Hafiz, M., Hasan, S., King, Z., Wirfs-Brock, A.: Growing a language: an empirical study on how (and why) developers use some recently-introduced and/or recently-evolving JavaScript features. J. Syst. Softw. (JSS) 121, 191–208 (2016)CrossRefGoogle Scholar
  11. 11.
    Gama, W., Alalfi, M., Cordy, J., Dean, T.: Normalizing object-oriented class styles in JavaScript. In: 14th IEEE International Symposium on Web Systems Evolution (WSE), pp. 79–83 (2012)Google Scholar
  12. 12.
    Nagappan, N., Ball, T.: Use of relative code churn measures to predict system defect density. In: 27th International Conference on Software Engineering (ICSE), pp. 284–292 (2005)Google Scholar
  13. 13.
    Fowler, M.: Refactoring: Improving the Design of Existing Code. Addison-Wesley, Boston (1999)MATHGoogle Scholar
  14. 14.
    Apel, S., Kästner, C.: An overview of feature-oriented software development. J. Object Technol. 8(5), 49–84 (2009)CrossRefGoogle Scholar
  15. 15.
    Silva, L.H., Valente, M.T., Bergel, A.: Statically identifying class dependencies in legacy JavaScript systems: first results. In: 24th IEEE International Conference on Software Analysis, Evolution, and Reengineering (SANER), Early Research Achievements (ERA) Track, pp. 1–5 (2017)Google Scholar
  16. 16.
    Rostami, S., Eshkevari, L., Mazinanian, D., Tsantalis, N.: Detecting function constructors in JavaScript. In: 32nd IEEE International Conference on Software Maintenance and Evolution (ICSME), pp. 1–5 (2016)Google Scholar
  17. 17.
    Feldthaus, A., Millstein, T.D., Møller, A., Schäfer, M., Tip, F.: Refactoring towards the good parts of JavaScript. In: 26th Conference on Object-Oriented Programming (OOPSLA), pp. 189–190 (2011)Google Scholar
  18. 18.
    Siff, M., Reps, T.: Program generalization for software reuse: from C to C++. In: 4th Symposium on Foundations of Software Engineering (FSE), pp. 135–146 (1996)Google Scholar
  19. 19.
    Kyriakakis, P., Chatzigeorgiou, A.: Maintenance patterns of large-scale PHP web applications. In: 30th IEEE International Conference on Software Maintenance and Evolution (ICSME), pp. 381–390 (2014)Google Scholar

Copyright information

© Springer International Publishing AG 2017

Authors and Affiliations

  1. 1.Federal Institute of Northern Minas GeraisSalinasBrazil
  2. 2.Federal University of Minas GeraisBelo HorizonteBrazil
  3. 3.PLEIAD Lab, DCCUniversity of ChileSantiagoChile

Personalised recommendations