An Empirical Evaluation of Code Smell Detection in Angular Applications
Diese Studie präsentiert den ersten Katalog von Angular-spezifischen Code-Smells, der aus Grauliteratur abgeleitet wurde, und demonstriert die hohe Effektivität eines automatisierten statischen Analysewerkzeugs bei der Erkennung dieser Probleme, wobei eine Genauigkeit von über 0,88 und F1-Werte von bis zu 1,00 erreicht werden.
Originalarbeit lizenziert unter CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). Dies ist eine KI-generierte Erklärung des untenstehenden Papers. Sie wurde nicht von den Autoren verfasst oder gebilligt. Für technische Genauigkeit konsultieren Sie das Originalpaper. Vollständigen Haftungsausschluss lesen
Stellen Sie sich vor, Sie bauen ein riesiges, komplexes Haus mit einem bestimmten Satz von Bauplänen und Werkzeugen namens Angular. Es ist eine beliebte Methode, um moderne Webanwendungen zu erstellen, da es robust, organisiert ist und alles Notwendige integriert bietet. Doch genau wie beim realen Bauwesen können Sie, wenn Sie nicht aufpassen, anfänglich Abkürzungen nehmen oder Dinge auf unordentliche Weise errichten. Diese unordentlichen Gewohnheiten werden „Code-Smells" genannt.
Denken Sie an einen Code-Smell nicht als eine kaputte Wand, sondern als ein Warnzeichen – wie ein seltsames Geräusch im Motor oder eine klemmende Tür. Es bedeutet nicht, dass das Haus sofort einstürzen wird, aber es deutet darauf hin, dass das Design fehlerhaft ist, und wenn Sie es weiterhin ignorieren, wird das Haus später ein Albtraum werden, um es zu reparieren oder zu erweitern.
Dieser Artikel ist wie ein Team von Experten für Hausinspektion (Forschende), das in die Gemeinschaft der Angular-Bauer gegangen ist, um zu fragen: „Was sind die häufigsten schlechten Gewohnheiten, die Sie sehen?" Sie haben sich nicht nur auf offizielle Regelwerke verlassen; sie haben den Bauarbeitern in Foren, Blogs und Chatgruppen zugehört (was der Artikel als „graue Literatur" bezeichnet).
Hier ist das, was sie gefunden und getan haben, einfach erklärt:
1. Die Detektivarbeit: Die Smells finden
Die Forschenden agierten wie Detektive, die hunderte von Online-Diskussionen durchsuchten, um wiederkehrende Beschwerden zu finden. Am Ende identifizierten sie 11 spezifische „schlechte Gewohnheiten", in die Angular-Entwickler oft verfallen.
Um Ihnen zu helfen, diese zu verstehen, hier einige dieser Smells mit einfachen Analogien:
- Die „Spülbecken"-Komponente (Große Komponente): Stellen Sie sich einen einzigen Raum in Ihrem Haus vor, der versucht, gleichzeitig Küche, Schlafzimmer, Badezimmer und Garage zu sein. In Angular passiert dies, wenn ein Code-Teil versucht, zu viele verschiedene Aufgaben zu erledigen. Es wird riesig, verwirrend und schwer zu reinigen.
- Die „Magische Kiste" (Übermäßige Verwendung des
any-Typs): Angular verwendet eine Sprache namens TypeScript, die wie ein strenger Sicherheitsinspektor ist, der prüft, ob Sie die richtige Art von Ziegeln in die richtigen Löcher legen. Manchmal werden Entwickler faul und sagen: „Legen Sie einfach rein, was Sie wollen", indem sie eine „magische Kiste" namensanyverwenden. Dies schaltet den Sicherheitsinspektor ab. Das Haus mag heute gut aussehen, aber später könnte ein schweres Sofa durch einen Boden fallen, der nicht dafür gebaut wurde, weil der Inspektor nicht aufpasste. - Das „Tauziehen" (Übermäßige Kommunikation von Eltern zu Kind): Stellen Sie sich vor, ein Elternteil schreit ständig Anweisungen zu einem Kind, oder schlimmer noch, das Elternteil greift direkt in das Zimmer des Kindes, um dessen Möbel umzustellen. In Angular sollten Komponenten höflich miteinander sprechen. Wenn eine Elternkomponente eine Kindkomponente packt und sie zwingt, ihren Zustand direkt zu ändern, entsteht ein enger, unordentlicher Knoten, der schwer zu entwirren ist.
- Der „Direkte Hammer" (Direkte DOM-Manipulation): Angular hat eine spezielle Art, die Wände (den Bildschirm) automatisch zu streichen. Manchmal werden Entwickler ungeduldig und greifen nach einem Hammer, um direkt auf die Wand zu schlagen und den automatischen Streicher zu umgehen. Das funktioniert einen Moment lang, aber es bricht die Fähigkeit des Systems, das Haus konsistent zu halten.
- Das „Kopier-Einfügen"-Haus (Duplizierte Komponente): Stellen Sie sich vor, Sie bauen zwei identische Küchen im selben Haus, weil Sie vergessen haben, dass Sie bereits eine gebaut haben. Das verschwendet Platz und bedeutet, dass Sie, wenn Sie das Waschbecken ändern wollen, daran denken müssen, es an zwei Stellen zu ändern.
2. Die Überschneidung: Angular vs. React
Die Forschenden bemerkten auch etwas Interessantes. Sie verglichen diese Angular-Smells mit schlechten Gewohnheiten, die in React gefunden wurden, einem weiteren beliebten Bau-Framework.
- Der gemeinsame Nenner: Etwa die Hälfte der schlechten Gewohnheiten (wie die „Spülbecken"- oder „Kopier-Einfügen"-Probleme) ist sowohl in Angular als auch in React gleich. Es stellt sich heraus, dass wenn Sie mit Blöcken bauen, Menschen die gleichen Fehler machen, unabhängig von der Marke der Blöcke, die sie verwenden.
- Die einzigartigen Smells: Einige Smells sind einzigartig für Angular, meist im Zusammenhang mit seinen spezifischen Regeln dafür, wie es den Bildschirm aktualisiert oder Daten verarbeitet.
3. Die Lösung: Ein neues „Schnüffel"-Werkzeug
Sobald sie ihre Liste mit 11 Smells hatten, schrieben die Forschenden nicht nur einen Bericht; sie bauten einen Roboter-Inspektor.
- Sie nahmen bestehende Werkzeuge, die schlechte Gewohnheiten in React erkennen konnten, und rüsteten sie so auf, dass sie Angular verstehen.
- Dieses neue Werkzeug scannt Ihre Code-Dateien, sucht nach den spezifischen Mustern dieser 11 Smells und markiert sie für Sie.
4. Der Test: Hat der Roboter funktioniert?
Um zu sehen, ob ihr Roboter gut war, testeten sie ihn an einer Reihe echter, quelloffener Angular-Projekte. Sie prüften den Code zunächst manuell, um sicherzustellen, dass die Smells tatsächlich vorhanden waren, und ließen dann den Roboter laufen.
- Die Ergebnisse: Der Roboter war überraschend gut. Er fing die schlechten Gewohnheiten mit sehr hoher Genauigkeit (über 88 % korrekt) und war fast perfekt darin, die „Magische Kiste" (
any-Typ) und „Kopier-Einfügen"-Probleme zu finden. - Der eine Glitch: Der Roboter wurde manchmal etwas zu aufgeregt wegen der Größe. Wenn eine Datei nur natürlich groß war, weil die Aufgabe komplex war (wie ein großes, legitimes Lagerhaus), markierte der Roboter sie manchmal als „Große Datei"-Smell, selbst wenn sie gut organisiert war. Es ist wie ein Sicherheitsbeamter, der jeden aufhält, der eine schwere Kiste trägt, selbst wenn er nur Möbel umzieht.
Warum das wichtig ist
Die Hauptaussage ist, dass diese Studie den ersten offiziellen Katalog Angular-spezifischer schlechter Gewohnheiten erstellt hat, basierend darauf, worüber echte Entwickler tatsächlich sprechen. Sie bewiesen, dass wir automatisierte Werkzeuge bauen können, um diese Probleme frühzeitig zu erkennen, und helfen Entwicklern, ihre digitalen Häuser sauber, sicher und in Zukunft leicht erweiterbar zu halten.
Kurz gesagt: Sie hörten den Bauarbeitern zu, listeten die häufigen Fehler auf, bauten einen Roboter, um diese Fehler zu finden, und zeigten, dass der Roboter sehr gut funktioniert.
Ertrinken Sie in Arbeiten in Ihrem Fachgebiet?
Erhalten Sie tägliche Digests der neuesten Arbeiten passend zu Ihren Forschungsbegriffen — mit technischen Zusammenfassungen, in Ihrer Sprache.