Αναδόμηση React εφαρμογών

Abstract

Η παρούσα διπλωματική εργασία εξετάζει τη React, ένα από τα πιο δημοφιλή JavaScript frameworks για την ανάπτυξη διεπαφών χρήστη. Αφού, γίνει μια σύντομη εισαγωγή στη React και σύγκριση με άλλα δημοφιλή frameworks, όπως το Angular και το Vue, αναδεικνύοντας τα πλεονεκτήματα και τις διαφορές τους, η εργασία εστιάζει σε συνήθεις οσμές κώδικα στη React. Ειδικότερα, δίνεται έμφαση στο Prop Drilling, μια πρακτική όπου οι ιδιότητες (properties) περνούν μέσα από πολλά ενδιάμεσα συστατικά, δυσχεραίνοντας τη συντήρηση και την αναγνωσιμότητα του κώδικα. Στη συνέχεια, κατασκευάστηκαν δύο μεθοδολογίες που έχουν σκοπό την ανίχνευση και αντιμετώπιση περιστατικών Prop Drilling αντίστοιχα. Οι παραπάνω τεχνικές υλοποιήθηκαν σε ένα εργαλείο, το RefactoringReact, με στόχο την αυτόματη εύρεση και αναδόμηση τέτοιων περιστατικών. Μέσω της χρήσης του εργαλείου, πραγματοποιήθηκαν δοκιμές σε ένα σύνολο από έργα ανοιχτού κώδικα και εξήχθησαν συμπεράσματα σχετικά με την φύση αυτής της κακής πρακτικής καθώς και την επίδραση της αναδόμησης στη δομή των React εφαρμογών. Τα αποτελέσματα της έρευνας καταδεικνύουν τη συχνότητα του Prop Drilling, τις διαφορετικές εκδοχές που μπορεί να συναντήσει κάποιος, καθώς και τις δυσκολίες εφαρμογής που παρουσιάζουν συχνά οι αναδομήσεις του.This thesis examines React, one of the most popular JavaScript frameworks for user interface development. After providing a brief introduction to React and comparing it with other widely used frameworks, such as Angular and Vue, highlighting their advantages and differences, the study focuses on common code smells in React. Specifically, emphasis is placed on Prop Drilling, a practice where properties pass through multiple intermediate components, making code maintenance and readability more challenging. Subsequently, two methodologies were developed, aiming to detect and address instances of Prop Drilling. These techniques were implemented in a tool called RefactoringReact, designed for the automatic detection and restructuring of such occurrences. By utilizing this tool, experiments were conducted on a set of open-source projects, leading to insights regarding the nature of this bad practice and the impact of refactoring on the structure of React applications. The research findings indicate that the proper application of refactoring techniques improves code structure, reduces complexity, and facilitates the maintenance of React applications.