Investigating Vue.js Code Smells: Insights from Grey Literature

Code smells are parts of the code with the potential to cause problems. They are generated by problematic procedures adopted during software design or bad programming practices. Although code smells have been explored in several studies, they are more often focused on traditional Java language antipatterns, with a lack of studies aimed at the JavaScript ecosystem and web applications. In recent years, Vue has become a popular framework for developing web interfaces and, more recently, developers have started using not only JavaScript but also TypeScript, a superset that adds static typing to JavaScript. The objective of this work is to identify the most common code smells in the development of interfaces with the Vue framework and analyze how developers evaluate these smells in terms of frequency and negative impact on the code. In addition, to perform a comparative analysis to understand the nuances between the code smells of Vue and React. To achieve this goal, we conducted a grey literature review, seeking to identify code smells for the Vue framework. Subsequently, we interviewed developers and conducted a survey in the Vue communities. As a result, we identified 11 code smells in the grey literature review. In the interviews and survey, we identified that the following smells are Large file, Prop Drilling, Ref for complex objects, Using v-html with User Provided Data, and Any Type, which are the most harmful and frequent. The initial results of this work are a first attempt to catalog front-end code smells for the Vue.js framework and can help developers remove these anti-patterns.