Frontend-Architektur für Designsysteme

Kapitel 1. Die Disziplin der Frontend-Architektur

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Die Frontend Architektur ist eine Sammlung von Tools und Prozessen, die darauf abzielt, die Qualität des Frontend-Codes zu verbessern und gleichzeitig einen effizienteren und nachhaltigeren Arbeitsablauf zu schaffen.

Wenn ich über die Rolle eines Frontend-Architekten nachdenke, denke ich immer an die Eigenschaften, die sie mit denen eines traditionellen Architekten teilen.

Ein Architekt ist jemand, der Gebäude entwirft, plant und deren Bau überwacht. Das ist genau das, was ein Frontend-Architekt tut, nur dass das Endprodukt eine Website ist. Und so wie ein Architekt mehr Zeit damit verbringt, Pläne zu entwerfen, als Beton zu gießen, ist der Frontend-Architekt mehr damit beschäftigt, Werkzeuge und Prozesse zu entwickeln, als Produktionscode zu schreiben.

Lass uns in diese Definition eintauchen und herausfinden, was unsere Rolle als Frontend-Architekten ist.

Entwurf

Stell dir ein Gebäude vor, das keine klare Architektur hat. Die wichtigen Entscheidungen wurden alle den Bauarbeitern überlassen, die die Arbeit erledigten. Eine Wand wurde aus Stein gebaut, eine andere aus Ziegeln, eine dritte aus Holz, und die vierte wurde weggelassen, weil sie gerade in Mode war.

Das Gesamtbild der Website liegt immer noch in den Händen von erfahrenen Designern, aber der Frontend-Architekt entwirft den Frontend-Ansatz und die Philosophie des Designsystems. Indem er ein System entwirft, innerhalb dessen alle Frontend-Entwickler/innen arbeiten werden, gibt der Architekt eine klare Vorstellung davon, wie das Endprodukt, der Code, aussehen wird.

Sobald ein Frontend-Architekt die Vision festlegt, hat das Projekt einen Standard, gegen den der Code getestet werden kann. Wie können wir ohne einen Entwurf für das fertige Produkt feststellen, ob unser Code diesen Standard tatsächlich erfüllt hat? Ein sorgfältig konzipiertes System verfügt über Kontrollmechanismen, die sicherstellen, dass der gesamte Code, der zu diesem System beiträgt, einen erkennbaren Mehrwert bringt und nicht einfach nur aufgeblähte Zeilen enthält.

Planung

Wenn du ein klares Konzept im Kopf hast, musst du in der Planungsphase den Entwicklungsworkflow abbilden. Welche Schritte muss ein Entwickler unternehmen, um eine Codezeile zu schreiben und diese bis zur Produktion zu bringen? Im einfachsten Fall bedeutet dieser Plan, dass man per FTP auf einen Server geht, eine Datei bearbeitet und auf Speichern drückt. Bei den meisten Projekten wird eine Kombination aus Versionskontrolle, Task-Runnern, CSS-Prozessoren, Dokumentations-Tools, Test-Suiten und Server-Automatisierung zum Einsatz kommen.

Das Ziel des Frontend-Architekten ist es, eine gut funktionierende Maschine zu entwerfen, die eine schnelle und problemlose Einrichtung ermöglicht, nützliches Feedback in Form von Linting, Tests und Dokumentation bietet und viele der menschlichen Fehler reduziert, die bei der Ausführung sich wiederholender Aufgaben auftreten.

Beaufsichtigung

Frontend-Architektur ist nie ein "Set it and forget it"-Ansatz. Kein Entwurf oder Plan ist jemals perfekt oder vollständig. Die Bedürfnisse der Kunden (und auch der Entwickler) werden sich im Laufe der Zeit ändern und weiterentwickeln, und ein Prozess, der in einer Phase des Projekts gut funktioniert hat, muss vielleicht später überarbeitet werden, um die Effizienz zu verbessern oder Fehler zu reduzieren.

Ein wichtiges Talent eines Frontend-Architekten ist die Fähigkeit, diese Anpassungen ständig vorzunehmen. Moderne Build-Tools machen es sehr einfach, Arbeitsabläufe zu ändern und diese Änderungen an alle Teammitglieder weiterzugeben.

Einige Leute haben gefragt, ob man als Frontend-Architekt eine Rolle im Management hat und nie wieder eine Codezeile schreiben muss. Ich kann persönlich bestätigen, dass ich als Architekt nicht nur mehr Code schreibe, sondern auch in einer größeren Vielfalt von Sprachen und für eine größere Anzahl von Tools. Es ist nicht so, dass ich weniger Code schreibe, sondern dass sich einfach die Zielgruppe meines Codes geändert hat. Die Zielgruppe eines Frontend-Entwicklers ist der Endnutzer, während die Zielgruppe eines Frontend-Architekten die Entwickler selbst sind.

Einen architektonischen Prozess einführen

Genau wie andere Disziplinen vor ihr musste auch die Frontend-Architektur einen Kampf der Prioritäten führen. Obwohl wir uns nicht vorstellen können, warum jemand mit dem Bau eines Wolkenkratzers beginnt, ohne vorher einen Architekten zu konsultieren, beginnen die meisten großen Webprojekte genau so.

Die Ausreden sind zahlreich: Wir haben nicht das Budget. Wir haben nicht die Zeit dazu. Wir treffen diese Entscheidungen, wenn alle Entwürfe fertig sind. Oder schlimmer noch, es gibt keine Ausrede: Du bekommst das Projekt erst Monate, nachdem das Design fertiggestellt wurde und die Entwicklung bereits in vollem Gange ist. Jetzt hast du nur noch ein paar Monate Zeit, um einen Haufen HTML in einen Stapel PSDs zu verwandeln, der dir an die Wand geworfen wurde. Das ist nicht der Weg, um erfolgreich eine skalierbare und nachhaltige Website zu entwickeln.

Als Frontend-Architekten glauben wir, dass es eine Reihe von wichtigen Frontend-Entscheidungen gibt, die zu Beginn eines Projekts getroffen werden müssen. Diese Entscheidungen sind entweder zu schwierig, um sie später in der Entwicklung umzusetzen, oder die Kosten einer falschen Entscheidung sind viel zu hoch. Sobald diese Entscheidungen getroffen sind, ist es unsere Aufgabe, das visuelle Design, die Entwicklung der Plattform und die Einrichtung der Infrastruktur so zu gestalten, dass sie den Anforderungen der geplanten Architektur am besten entsprechen.

Ohne den frühzeitigen Input eines Frontend-Architekten laufen Projekte Gefahr, dass sie sich zwischen der Überarbeitung des Designs, der Plattform oder der Infrastruktur und der Entscheidung für die Frontend-Entwickler entscheiden müssen. Aus Erfahrung kann ich dir sagen, dass es immer ein schlechtes Spiel ist, auf Ersteres zu setzen.

Wo ist der Haken?

Ich weiß, dass das keine leichte Aufgabe sein wird. Die Änderungen, die ich vorschlage, sind mit spürbaren Kosten verbunden, und jeder, der solche Entscheidungen treffen muss, muss immer die Risiken und die möglichen Vorteile abwägen . Für alle, die noch nicht mit einem Frontend-Architekten zusammengearbeitet haben, kann es schwierig sein, dieses Risiko einzugehen.

Das Huhn-oder-Ei-Dilemma besteht darin, dass viele Interessenvertreter/innen Beispiele dafür brauchen, wie dieser Ansatz in der Vergangenheit zum Erfolg von Projekten beigetragen hat, um die Einwände zu überwinden, Zeit und Geld für eine angemessene Frontend-Architektur auszugeben. Das setzt natürlich voraus, dass du in der Vergangenheit an einem solchen Projekt gearbeitet hast. Wie bekommst du die Gelegenheit, an einem solchen Projekt zu arbeiten, wenn du immer beweisen musst, dass der Ansatz funktioniert?

Zum Glück für mich und dieses Buch wurde ich kürzlich mit der Aufgabe betraut, ein neues Designsystem für eine große Website zu entwickeln. Ich bekam die Zeit, dieses neue System sorgfältig zu planen und neue Codierungsstandards, Werkzeuge und Arbeitsabläufe zu entwickeln. Als das Projekt Gestalt annahm, wusste ich, dass ich die einmalige Gelegenheit hatte, zu zeigen, wie skalierbar und nachhaltig ein gut durchdachtes Designsystem sein kann.