Frontend-Refactoring bezieht sich auf die Überarbeitung oder Überholung des Frontend-Codes einer Anwendung, um ihn zu verbessern, zu optimieren oder zu vereinfachen, ohne jedoch die Funktionalität der Anwendung zu ändern.
Das Hauptziel besteht darin, den Code sauberer und leichter wartbar zu machen, indem man Dinge wie unbenutzten oder redundanten Code entfernt, den Code in kleinere, wiederverwendbare Module aufteilt und die Benennung von Variablen, Funktionen und Klassen verbessert.
Indem man den Frontend-Code einer Anwendung refactored, kann man die Lesbarkeit, die Wartbarkeit und die Leistung der Anwendung verbessern und sicherstellen, dass sie besser skaliert und einfacher erweitert werden kann. Typische Techniken, die hier Anwendung finden, sind BEM (Block-Element-Modifier) und der Einsatz von SCSS / SASS. Zudem ist die Code Coverage des genutzten CSS relevant.
Eine durchdachte Code-Optimierung kann auch dazu beitragen, Fehler und Probleme zu beseitigen, die aufgrund von schlechtem oder unorganisiertem Code auftreten können.
In der Regel wird Frontend-Refactoring als kontinuierlicher Prozess durchgeführt, der im Laufe der Zeit durchgeführt wird, um sicherzustellen, dass der Code immer auf dem neuesten Stand und optimiert ist.
Techniken beim Refactoring
- Durch das Entfernung von Redundanzen (überflüssigem Code) kann man die Dateigröße der Stylesheets reduzieren und die Ladezeit der Seite verbessern. Es ist wichtig sicherzustellen, dass Stile nur einmal definiert werden und unnötige Selektoren entfernt werden.
- Verwendung von wiederverwendbaren Variablen: Durch die Nutzung von Variablen kann man CSS-Code konsistenter schreiben. Wenn man beispielsweise eine Farbe in mehreren Stilen verwendet, kann man eine Variable definieren, die die Farbe speichert und in jedem Stil anstelle der Farbe verwendet wird.
- Verwendung von Mixins: Wiederkehrende Stildefinitionen in einer einzigen Stildefinition zu kombinieren und wiederzuverwenden, verbessert die Einheitlichkeit der Seite. Achtung: Bei falscher Anwendung kann das Stylesheet unnötig aufgebläht werden!
- Verwendung von Post- und Präprozessoren wie Sass/Scss und Less können das Schreiben von CSS-Code vereinfachen, indem sie zusätzliche Funktionen wie Variablen, Mixins und Kontrollstrukturen hinzufügen. Diese Tools werden das Refactoring erleichtern bzw. überhaupt möglich machen.
- Durch den Einsatz von Linting (stylelint, htmllint) werden einheitliche Coding-Styles hergestellt und eine bessere Lesbarkeit gewährleistet. Erweiterungsmöglichkeiten können auch die Reihenfolge von CSS-Eigenschaften ordnen, was die Lesbarkeit deutlich verbessert und teamübergreifende Code-Reviews verbessert
How to start
- Nutze unbedingt ein Versionierungssystem wie GIT.
- Beginne mit der Überarbeitung des HTML-Codes, dann CSS und dann JS. Nutze Linting Strategien wie htmllint, stylelint und eslint.
- Nutze Stragien wie BEM um HTML und CSS leicht zu warten.
- Löse komplexe CSS-Klassen auf, indem du regeln vereinfachst und normalisierst.
- Splitte komplexe Stylesheets in passende Sektionen wie Layout, Helper, Mixins, Typo, Colors etc. Inspiration kannst du dir auf mdn web docs holen.
- Um sicherzustellen, dass sämtliche Funktionalitäten später noch gegeben sind, nutze Tests (Unit tests, e2e)
- Belese dich ausführlich über best practises. Es gibt Literatur dazu beispielweise auf O’Reilly – Refactoring JavaScript