It’s #FrontendFriday – Atomic Design in der Angular Entwicklung
Vor einigen Monaten haben wir bei doubleSlash mit der Entwicklung eines Living Styleguides begonnen und dabei überlegt, wie wir diesen am besten strukturieren. Ziel war ein logischer und nachvollziehbarer Aufbau. Das Atomic Design sah hierfür am vielversprechendsten aus und hat sich bewährt. [1] Was Atomic Design ist und ob dies auch für Angular Architekturen anwendbar ist, erfahrt ihr in diesem Blogpost.
Begriffserklärung
Das Atomic Design wurde von Brad Frost entwickelt und ermöglicht uns, komplexe Designs und Benutzeroberfläche zu vereinfachen und zu strukturieren. Die Benutzeroberfläche wird dabei in wiederverwendbare Komponenten zerlegt und in verschiedenen Abstraktionsebenen organisiert. [2]
Die fünf Ebenen sind:
- Atoms: Grundlegendste Elemente, die nicht weiter in Einzelteile zerlegt werden können, wie Buttons, Inputs oder Textelemente wie Links.
- Molecules: Gruppen von Atomen, die zusammen eine funktionale Einheit bilden.
- Organisms: Komplexe Komponenten bestehend aus Molekülen, Atomen oder anderen Organismen.
- Templates: Rahmen für Content-Platzierung, definieren die Struktur einer Seite.
- Pages: Spezifische Instanzen von Templates mit realem Content, zeigen das endgültige Design.
Ist Atomic Design für Angular Anwendungen geeignet?
Kurz und knapp: Ja. Angular ist ein komponentenbasiertes Framework und unterstützt die Wiederverwendbarkeit von Komponenten. Das Atomic Design kann dabei helfen, UI-Komponenten in Angular weiter zu strukturieren und zu ordnen.
Atome und Moleküle in Angular könnten als wiederverwendbare Komponenten und Direktiven implementiert werden. Hierunter fallen beispielsweise Suchfelder, Buttons, Textareas oder Dropdowns.
Organismen könnten komplexere Komponenten oder Komponentengruppen darstellen, die mehrere Moleküle kombinieren. Beispiele hierfür wären Cookie Banner, Dialoge oder Navigationsleisten.
Templates und Pages würden sich als Komponentenlayouts und routbare Ansichten manifestieren, die spezifische Inhalte anzeigen. [2] [3]
Kann Atomic Design die offizielle Angular-Architektur ersetzen?
Die offizielle Angular Architektur empfiehlt eine Unterteilung in verschiedene Kategorien wie Core, Shared, und Feature. Dabei macht es keinen Unterschied ob Module verwendet werden oder bereits „Standalone Components“ (verfügbar ab Angular 14).
Core: Enthält sämtliche Kernelemente einer Anwendung, welche nur einmalig existieren.
Shared: Enthält wiederverwendbare Komponenten, Pipes und Direktiven, die in verschiedenen Teilen der Anwendung genutzt werden können.
Features: Beinhalten alle Komponenten, Services und andere Elemente, die für ein spezifisches Feature notwendig sind.
Atomic Design kann diese Struktur ergänzen, indem es diese weiter unterteilt und organisiert. Das Shared Module kann beispielsweise weiter in Atome und Moleküle unterteilt werden und weiterhin sämtliche Elemente wie Buttons, Inputfelder etc. bereitstellen.
Eine eindeutige Zuordnung ist jedoch nicht immer möglich. Organismen wie beispielsweise ein Footer sollte dem Core zugeordnet werden. Wohingegen Dialoge, welche von verschiedenen Features verwendet werden klar in die Kategorie Shared gehören.
Dennoch bietet Atomic Design eine wertvolle Ergänzung. [4]
∇ app
∇ core
∇ guards
auth.guard.ts // Überprüft die Authentifizierung des Benutzers
∇ interceptor
token.interceptor.ts // Fügt das JWT zum Header der Anfragen hinzu
error.interceptor.ts // Zentralisierte Fehlerbehandlung für HTTP-Anfragen
∇ services
auth.service.ts // Handhabt Authentifizierung und Benutzerdaten
api.service.ts // Zentralisiert die Verwaltung von API-Anfragen
∇ components
∇ navbar // Navbar, ein Organismus
navbar.component.html
navbar.component.scss
navbar.component.ts
∇ footer // Footer, ein weiterer Organismus
footer.component.html
footer.component.scss
footer.component.ts
∇ page-not-found
page-not-found.component.html
page-not-found.component.scss
page-not-found.component.ts
∇ constants
app-config.ts // Allgemeine Konfigurationswerte
api-endpoints.ts // Zentralisierte API-Endpoints
∇ enums
role.enum.ts // Enum für Benutzerrollen
status.enum.ts // Enum für Statuscodes
∇ models
user.model.ts // Benutzermodell
product.model.ts // Produktmodell
∇ features
∇ product-listing // Feature Modul für Produktlisten
∇ components
∇ product-item // Organismus: Einzelnes Produkt
product-item.component.html
product-item.component.scss
product-item.component.ts
∇ product-grid // Template: Anordnung der Produkt-Items
product-grid.component.html
product-grid.component.scss
product-grid.component.ts
∇ pages
∇ product-list-page // Seite: Nutzt das Product Grid Template
product-list-page.component.html
product-list-page.component.scss
product-list-page.component.ts
∇ product-detail-page // Seite: Detailansicht eines Produkts
product-detail-page.component.html
product-detail-page.component.scss
product-detail-page.component.ts
∇ models
product.model.ts // Spezifisches Modell für Produkte
∇ services
product.service.ts // Service für produktbezogene Daten
feature-a-routing.module.ts // Routing für dieses Feature
feature-a.component.ts // Root-Komponente des Features, falls benötigt
∇ shared
∇ components
∇ button // Atom: Allgemeiner Button
button.component.html
button.component.scss
button.component.ts
∇ input-field // Atom: Texteingabefeld
input-field.component.html
input-field.component.scss
input-field.component.ts
∇ form-field // Molekül: Kombiniert Label und Input-Field
form-field.component.html
form-field.component.scss
form-field.component.ts
∇ directives
tooltip.directive.ts // Direktive für Tooltips
∇ pipes
translate.pipe.ts // Pipe für Währungsformatierung
shared.module.ts // Definiert das Shared Modul
styles.scss
▽ styles
variables.scss
▽ assets
▽ i18n
en.json
de.json
▽ images
logo.svg
banner.svg
Wie steht Atomic Design in Verbindung mit dem Component-based Development?
Atomic Design und Component-based Development sind eng miteinander verbunden. Beide Konzepte legen den Fokus auf die Entwicklung von wiederverwendbaren Komponenten. In Angular, einem Framework, das auf der Komponentenarchitektur basiert, ermöglicht Atomic Design eine systematische Herangehensweise an die Entwicklung der Komponenten. Durch die Zerlegung von Benutzeroberflächen in Atome, Moleküle, Organismen und so weiter, können Entwickler eine klare Struktur und Hierarchie für ihre Komponenten schaffen. Dies fördert die Wiederverwendbarkeit und Wartbarkeit der Komponenten, was wiederum die Effizienz der Entwicklung und Wartung von Angular-Anwendungen verbessert. [3]
Schlussfolgerung
Atomic Design bietet eine nützliche Methode zur Organisation und Strukturierung von Komponenten in Angular-Anwendungen. Es ersetzt nicht die existierende Angular-Architektur, sondern kann diese sinnvoll ergänzen, um Effizienz, Konsistenz und Wiederverwendbarkeit innerhalb einer Anwendung zu verbessern. [2]
Quellen:
[1] doubleSlash Living Styleguide [2] Atomic Design [3] aubergine – How to Use Angular and Atomic Design to Create Web Applications: A Guide for New Developers [4] Medium – Atomic design in Angular project
