An Empirical Evaluation of Code Smell Detection in Angular Applications
Deze studie presenteert de eerste catalogus van Angular-specifieke codegeuren afgeleid van grijze literatuur en demonstreert de hoge effectiviteit van een geautomatiseerd statisch analyse-instrument bij het detecteren van deze problemen, met een nauwkeurigheid boven de 0,88 en F1-scores tot 1,00.
Oorspronkelijk artikel gelicentieerd onder CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). Dit is een AI-gegenereerde uitleg van het onderstaande artikel. Het is niet geschreven of goedgekeurd door de auteurs. Raadpleeg het oorspronkelijke artikel voor technische nauwkeurigheid. Lees de volledige disclaimer
Stel je voor dat je een enorm, ingewikkeld huis bouwt met een specifieke set blauwdrukken en gereedschappen genaamd Angular. Het is een populaire manier om moderne webapplicaties te bouwen omdat het krachtig, georganiseerd is en alles wat je nodig hebt ingebouwd heeft. Echter, net als bij echte bouw, kun je, als je niet voorzichtig bent, beginnen met hoeken af te snijden of dingen op rommelige manieren te bouwen. Deze rommelige gewoontes worden "codegeuren" genoemd.
Denk aan een codegeur niet als een gebroken muur, maar als een waarschuwingsbord – zoals een vreemd geluid in de motor of een deur die vastzit. Het betekent niet dat het huis direct zal instorten, maar het suggereert dat het ontwerp gebrekkig is, en als je het blijft negeren, zal het huis een nachtmerrie worden om later te repareren of uit te breiden.
Dit artikel is als een team van deskundige huisinspecteurs (onderzoekers) dat de gemeenschap van Angular-bouwers binnenkwam om te vragen: "Wat zijn de meest voorkomende slechte gewoontes die jullie zien?" Ze keken niet alleen naar officiële regelboeken; ze luisterden naar de bouwers in forums, blogs en chatgroepen (wat het artikel "grijze literatuur" noemt).
Hier is wat ze vonden en deden, eenvoudig uitgelegd:
1. Het speurwerk: De geuren vinden
De onderzoekers fungeerden als detectives, die honderden online discussies doorzochten om terugkerende klachten te vinden. Ze eindigden met het identificeren van 11 specifieke "slechte gewoontes" waar Angular-ontwikkelaars vaak in trappen.
Om je te helpen begrijpen, hier een paar van deze geuren met eenvoudige analogieën:
- De "Keukenkraan" Component (Grote Component): Stel je een enkele kamer in je huis voor die probeert tegelijkertijd de keuken, de slaapkamer, de badkamer en de garage te zijn. In Angular gebeurt dit wanneer één stuk code te veel verschillende taken probeert te doen. Het wordt enorm, verwarrend en moeilijk schoon te houden.
- De "Magische Doos" (Te veel gebruik van het type
any): Angular gebruikt een taal genaamd TypeScript, die werkt als een strenge veiligheidsinspecteur die controleert of je het juiste type bakstenen in de juiste gaten legt. Soms worden ontwikkelaars lui en zeggen ze: "Zet gewoon wat je maar wilt hier", door een "magische doos" genaamdanyte gebruiken. Dit zet de veiligheidsinspecteur uit. Het huis ziet er vandaag misschien prima uit, maar later kan een zware bank door een vloer vallen die niet voor zo'n gewicht was gebouwd, omdat de inspecteur niet keek. - De "Touwtrage" (Overmatige Communicatie van Ouder naar Kind): Stel je een ouder voor die constant instructies naar een kind schreeuwt, of erger nog, de ouder die de kamer van het kind binnenkomt om hun meubels direct te herschikken. In Angular moeten componenten beleefd met elkaar praten. Wanneer een ouder-component een kind-component grijpt en het dwingt om direct zijn staat te veranderen, ontstaat er een strakke, rommelige knoop die moeilijk te ontwarren is.
- De "Directe Hamer" (Directe DOM-bewerking): Angular heeft een speciale manier om de muren (het scherm) automatisch te schilderen. Soms worden ontwikkelaars ongeduldig en grijpen ze een hamer om direct op de muur te slaan, de automatische schilder omzeilend. Dit werkt even, maar het breekt het vermogen van het systeem om het huis consistent te houden.
- Het "Kopieer-Plak" Huis (Gedupliceerde Component): Stel je voor dat je twee identieke keukens in hetzelfde huis bouwt omdat je bent vergeten dat je er al één had gebouwd. Dit verspilt ruimte en betekent dat als je het aanrecht wilt veranderen, je moet onthouden om het op twee plaatsen te veranderen.
2. De Overlapping: Angular versus React
De onderzoekers merkten ook iets interessants op. Ze vergeleken deze Angular-geuren met slechte gewoontes die worden gevonden in React, een ander populair bouwframework.
- Het Gemene Delen: Ongeveer de helft van de slechte gewoontes (zoals de "Keukenkraan" of "Kopieer-Plak" problemen) is hetzelfde in zowel Angular als React. Het blijkt dat wanneer je bouwt met blokken, mensen dezelfde fouten maken, ongeacht het merk blokken dat ze gebruiken.
- De Unieke Geuren: Sommige geuren zijn uniek voor Angular, meestal gerelateerd aan zijn specifieke regels voor hoe het het scherm bijwerkt of gegevens verwerkt.
3. De Oplossing: Een Nieuw "Snuffel" Gereedschap
Zodra ze hun lijst van 11 geuren hadden, schreven de onderzoekers niet zomaar een rapport; ze bouwden een robotinspecteur.
- Ze namen bestaande gereedschappen die slechte gewoontes in React konden ruiken en upgraden ze om Angular te begrijpen.
- Dit nieuwe gereedschap scant je codebestanden, zoekt naar de specifieke patronen van deze 11 geuren en markeert ze voor je.
4. De Test: Werkte de Robot?
Om te zien of hun robot goed was, testten ze deze op een set echte, open-source Angular-projecten. Ze controleerden de code eerst handmatig om ervoor te zorgen dat de geuren er echt waren, en lieten toen de robot draaien.
- De Resultaten: De robot was verrassend goed. Het ving de slechte gewoontes op met zeer hoge nauwkeurigheid (meer dan 88% correct) en was bijna perfect in het vinden van de "Magische Doos" (type
any) en "Kopieer-Plak" problemen. - De Enige Glitch: De robot werd soms een beetje te enthousiast over grootte. Als een bestand van nature groot was omdat de taak complex was (zoals een groot, legitiem magazijn), markeerde de robot het soms als een "Groot Bestand" geur, zelfs als het goed georganiseerd was. Het is als een beveiligingsagent die iedereen stopt die een zware doos draagt, zelfs als ze gewoon meubels verplaatsen.
Waarom Dit Belangrijk Is
De belangrijkste conclusie is dat deze studie de eerste officiële catalogus creëerde van Angular-specifieke slechte gewoontes, gebaseerd op waarover echte ontwikkelaars daadwerkelijk praten. Ze bewezen dat we geautomatiseerde gereedschappen kunnen bouwen om deze problemen vroeg op te vangen, waardoor ontwikkelaars hun digitale huizen schoon, veilig en makkelijk uit te breiden houden in de toekomst.
Kortom: Ze luisterden naar de bouwers, maakten een lijst van de veelgemaakte fouten, bouwden een robot om die fouten te vinden, en toonden aan dat de robot zeer goed werkt.
Verdrinkt u in papers in uw vakgebied?
Ontvang dagelijkse digests van de nieuwste papers die bij uw onderzoekswoorden passen — met technische samenvattingen, in uw taal.