react atomic design
1.0.0
Dies ist ein Boilerplate mit der Methodik Atomic Design, das ein paar coole Dinge verwendet, wie Storybook-, Flow- und CSS-Module. Fühlen Sie sich frei, alles zu testen, zu ändern und anzupassen.
Den vollständigen Artikel lesen
Atomic Design ist in der Designwelt weithin bekannt und hilft beim Aufbau konsistenter, solider und wiederverwendbarer Designsysteme. Außerdem wird Atomic Design in der Welt von React, Vue und Frameworks, die die Komponentisierung anregen, unbewusst eingesetzt; Aber wenn es richtig eingesetzt wird, wird es zu einem starken Verbündeten für Entwickler.
Der Name Atomic Design geht auf die Idee zurück, die Komponenten in Atome, Moleküle, Organismen, Vorlagen und Seiten zu unterteilen, wie im Bild oben. Aber was sind die Verantwortlichkeiten jedes einzelnen Teils?
Atome sind kleinstmögliche Komponenten wie Schaltflächen, Titel, Eingaben oder Ereignisfarbpaletten, Animationen und Schriftarten. Sie können auf jeden Kontext angewendet werden, global oder innerhalb anderer Komponenten und Vorlagen, und haben viele Zustände, wie zum Beispiel dieses Beispiel einer Schaltfläche: deaktiviert, schwebend, verschiedene Größen usw.
Sie sind die Zusammensetzung einer oder mehrerer Atomkomponenten. Hier beginnen wir, komplexe Komponenten zusammenzustellen und einige dieser Komponenten wiederzuverwenden. Moleküle können ihre eigenen Eigenschaften haben und mithilfe von Atomen Funktionalitäten schaffen, die selbst keine Funktion oder Wirkung haben.
Organismen sind die Kombination von Molekülen, die zusammenarbeiten, oder sogar mit Atomen, die komplexere Grenzflächen bilden. Auf dieser Ebene beginnen die Komponenten ihre endgültige Form anzunehmen, es wird jedoch weiterhin sichergestellt, dass sie unabhängig, tragbar und wiederverwendbar genug sind, um in jedem Inhalt wiederverwendet zu werden.
In diesem Zustand hören wir auf, Komponenten zu komponieren und beginnen, ihren Kontext festzulegen. Darüber hinaus stellen die Vorlagen durch Positionen, Platzierungen und Muster der Seiten Beziehungen zwischen den Organismen und anderen Komponenten her, es wird jedoch kein Stil, keine Farbe oder keine Komponente gerendert. Deshalb sieht es aus wie ein Drahtmodell.
Seiten sind die Navigationsteile der Anwendung und dort werden die Komponenten in einer bestimmten Vorlage verteilt. Die Komponenten erhalten echten Inhalt und werden mit der gesamten Anwendung verbunden. In dieser Phase können wir die Effizienz des Designsystems testen, um zu analysieren, ob alle Komponenten unabhängig genug sind oder ob wir sie in kleinere Teile aufteilen müssen.
Als wir anfingen, Atomic Design in React zu verwenden, mussten wir einige Regeln der Methodik anpassen, um sicherzustellen, dass Komponenten so oft wie möglich wiederverwendet werden, dass sie zustandslos sind, ohne Positionsstile und sehr spezifische Ränder, um Nebenwirkungen zu vermeiden Seiten der Bewerbung.
Deshalb haben wir uns bei jeder neuen Komponente gefragt: „Sind diese Komponenten generisch genug, um Spezifität und/oder wiederholten Code in jedem Kontext, in dem sie verwendet werden, zu vermeiden?“
So konnten wir ein paar Regeln schreiben:
| Skript | Beschr |
|---|---|
$ yarn start | Starten Sie einen einfachen Webpack-Server |
$ yarn dev | Erstellen Sie einen Server für die Entwicklung an Port 5000 |
$ yarn storybook | Starten Sie Storybook mit den importierten Geschichten |
$ yarn flow | Validieren Sie die Flow-Typen |
@danilowoz
@leitee
MIT
