Teil V. Die Säule der Dokumentation

Machen wir uns nichts vor: unser Frontend-Code wird mit jedem Projekt, das wir beginnen, komplexer. Ich sage nicht, dass das etwas Schlechtes ist, es ist nur so, dass dieses rasante Wachstum auch seine eigenen Wachstumsschmerzen mit sich bringt.

Noch vor ein paar Jahren wurde unser gesamtes CSS in einer einzigen Datei geschrieben, und jeder Stil verwendete einen langen, komplexen Selektor, um genau das richtige Element auf der Seite zu finden, das geändert werden sollte. Wenn wir feststellten, dass dieser Stil mit etwas anderem auf unserer Seite kollidierte, schrieben wir einfach eine weitere CSS-Zeile am Ende der Datei mit einem längeren Selektor.

Auf die gleiche Weise wurde unsere JavaScript-Datei mit einer Reihe von jQuery-Funktionen geschrieben, die auf bereits vorhandenes Markup abzielen und einige Funktionen darauf anwenden. Jede Funktion enthielt die gesamte Logik und Verarbeitung, die für die Erledigung der Aufgabe erforderlich war. Wenn wir eine leicht veränderte Version dieser Funktion für ein anderes Element schreiben mussten, war es immer einfacher, den Code zu duplizieren, den Selektor zu ändern und die Logik zu aktualisieren.

Wir schrieben für jedes Projekt das Äquivalent einer PHP-Anwendung mit nur einer Datei.

So wie neuen PHP-Entwicklern beigebracht wird, ihren Code in kleine, wiederverwendbare Objekte zu zerlegen und in einzelne Dateien zu organisieren, begannen unsere Frontend-Projekte weniger wie eine Kaskade von Anweisungen ...

Get Frontend-Architektur für Designsysteme now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.