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.
This is a preview of subscription content, log in via an institution to check access.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
Notes
- 1.
- 2.
- 3.
For the sake of legibility, Rule #1 assumes a class with only one method in each idiom. The generalization for multiple methods is straightforward.
- 4.
- 5.
- 6.
- 7.
A transpiler is a source-to-source compiler. Transpilers are used, for example, to convert back from ES6 to ES5, in order to guarantee compatibility with older browsers and runtime tools.
- 8.
References
Kienle, H.: It’s about time to take JavaScript (more) seriously. IEEE Softw. 27(3), 60–62 (2010)
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)
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)
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)
Borning, A.H.: Classes versus prototypes in object-oriented languages. In: ACM Fall Joint Computer Conference, pp. 36–40 (1986)
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
European Association for Standardizing Information and Communication Systems (ECMA). ECMAScript Language Specification, 6th edn. (2015)
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)
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)
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)
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)
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)
Fowler, M.: Refactoring: Improving the Design of Existing Code. Addison-Wesley, Boston (1999)
Apel, S., Kästner, C.: An overview of feature-oriented software development. J. Object Technol. 8(5), 49–84 (2009)
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)
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)
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)
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)
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)
Acknowledgments
This research is supported by CNPq, CAPES and Fapemig.
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2017 Springer International Publishing AG
About this paper
Cite this paper
Silva, L.H., Valente, M.T., Bergel, A. (2017). Refactoring Legacy JavaScript Code to Use Classes: The Good, The Bad and The Ugly. In: Botterweck, G., Werner, C. (eds) Mastering Scale and Complexity in Software Reuse. ICSR 2017. Lecture Notes in Computer Science(), vol 10221. Springer, Cham. https://doi.org/10.1007/978-3-319-56856-0_11
Download citation
DOI: https://doi.org/10.1007/978-3-319-56856-0_11
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-319-56855-3
Online ISBN: 978-3-319-56856-0
eBook Packages: Computer ScienceComputer Science (R0)