6 Tools zur Beschleunigung der UI-Entwicklung und -Dokumentation

Komponentengetriebene Entwicklung ist eine hervorragende Strategie, um die Entwicklung von Frontends und Benutzeroberflächen zu beschleunigen. Die Verwendung von Komponenten ermöglicht die Wiederverwendung und vereinfacht das Erstellen, Testen und Modularisieren von Anwendungen.

In kleinen Anwendungen können die Listen der verwendeten Komponenten einfach verwaltet werden – Sie benötigen kein spezielles Werkzeug, um diese Listen außer Ihrem eigenen Speicher zu verwalten. Wenn die Anzahl und Komplexität von Anwendungen und Entwicklungsteams jedoch zunimmt, nehmen auch die Anzahl und Komplexität der Komponenten zu, bis Sie eine Hilfe benötigen, um den Überblick über die Komponenten zu behalten und die Kohärenz Ihrer Benutzeroberflächen zu wahren.

Um die komponentengesteuerte Entwicklung für mittlere bis große Projekte zu übernehmen, benötigen Sie ein Tool, das in der Lage ist, Komponentenbibliotheken zu verwalten, zu dokumentieren, zu präsentieren und ihre Entwicklung unabhängig von den Anwendungen zu ermöglichen, die sie verwenden.

Dieser Bedarf an Komponentenverwaltung und Katalogisierung wird glücklicherweise durch eine neue Klasse von Werkzeugen gelöst, die direkt darauf abzielen, die Entwicklung und Dokumentation von Benutzeroberflächen und Frontends zu beschleunigen. Diese Tools bieten Unterstützung für verschiedene Bibliotheken, verschiedene JavaScript-Dialekte und verschiedene JavaScript-Frameworks für die UI-Entwicklung, wie Angular, React und Vue.

Darüber hinaus dienen einige der Komponentenverwaltungstools auch der Generierung von Frontend-Styleguides.

Was sind Styleguides im Bereich der Frontend-Entwicklung?

Sie sind Live-Sammlungen aller Elemente der Benutzeroberfläche einer in Entwicklung befindlichen App. Diese Leitfäden enthalten nicht nur Komponentenlisten, sondern enthalten auch funktionale, testbare Beispiele. Sie bieten auch Code-Snippets jeder Komponente, die Entwickler kopieren und in ihren eigenen Code einfügen können. In der Regel enthalten Styleguides gängige UI-Komponenten wie Schaltflächen, Symbole, Navigationsmenüs, Formulareingabeelemente und modale Überlagerungen.

Unten finden Sie Bewertungen der Tools, die sich im Segment der UI-Komponentenentwicklung und Dokumentationstools als führend herauskristallisieren.

Märchenbuch

Storybook ist ein beliebtes Tool zum Entwickeln von Front-End- und UI-Komponenten, mit dem Sie arbeiten können, ohne sich um anwendungsspezifische Abhängigkeiten kümmern zu müssen. Es bietet eine Sandbox, um die Benutzeroberfläche isoliert außerhalb der in Entwicklung befindlichen App zu erstellen. Dies ermöglicht die Entwicklung schwer erreichbarer Zustände und Randfälle, was zu erheblichen Verbesserungen der Wiederverwendbarkeit, Testbarkeit und Entwicklungsgeschwindigkeit von Komponenten führt.

Es erleichtert auch die Interaktion mit UX-Designern und vereinfacht die Aufgabe, vorhandene Komponenten anzuzeigen und diejenigen zu identifizieren, die erstellt werden müssen.

Storybook unterstützt eine Vielzahl von JavaScript-Frameworks, darunter React, Angular, Vue, Svelte, Web Components und mehr als ein Dutzend andere. In Storybook erstellte Anwendungsfälle können als Storys in einfachem JavaScript gespeichert werden, um sie während der Entwicklung, des Testens und der QA zu überprüfen.

Das Tool verfügt über ein umfangreiches Add-On-Ökosystem, das die Integration mit Entwicklungstools ermöglicht, die Workflow-Anpassung erleichtert und Tests und Dokumentation automatisiert. Das Docs-Addon ermöglicht beispielsweise das Schreiben von Markdown/MDX, um anpassbare Sites für Komponentenbibliotheken und Designsysteme zu generieren.

Styleguide

Styleguidist kann als lebender Styleguide-Generator klassifiziert werden, aber seine Funktionalität ist der eines Entwicklungsumgebungsservers für UI-Komponenten nahe. Die mit Styleguidist erstellten Styleguides zeigen Komponenteneigenschaften und bearbeitbare Verwendungsbeispiele basierend auf Markdown-Dateien (.md). Das Tool ist mit JavaScript-Dialekten wie ES6, Flow und TypeScript kompatibel.

Durch die automatisch generierten Dokumente fungiert Styleguidist als Dokumentationsportal für alle Komponenten, das dem gesamten Entwicklungsteam zur Verfügung steht. Es vereinfacht auch die Erstellung und Pflege der UI-Dokumentationssite, die den UI-Komponentenkatalog enthält. Es ermöglicht auch das Erstellen von Markdown-Seiten und das Importieren von UI-Komponenten.

Die zentralisierte Dokumentation in Styleguidist führt bei großen Projekten zu erheblichen Zeit- und Arbeitseinsparungen, aber es müssen Ressourcen zugewiesen werden, um die Dokumentation auf dem neuesten Stand zu halten. Andernfalls können Sie in ein Problem namens Styleguide-Sterblichkeit geraten, das auftritt, wenn die Dokumentation veraltet ist, Entwickler sie nicht mehr verwenden und die Nützlichkeit von Styleguides einfach verloren geht.

Es ist üblich, dass Styleguidist zusammen mit Storybook verwendet wird, da sich ihre Stärken ergänzen: Storybook kann verwendet werden, um Komponenten zu bauen und Geschichten zu schreiben, um Änderungen daran zu verfolgen, während Styleguidist verwendet werden kann, um Komponenten mit Markdown zu dokumentieren.

Bisschen

Bit ist ein verteiltes und erweiterbares Framework/Repository – auch bekannt als Monorepo oder Multi-Package-Repository – von UI-Komponenten, das als Infrastruktur zum Erstellen von Anwendungen nach der Component Driven Development (CDD)-Methodik verwendet werden kann. Mit dieser Methodik zielt Bit darauf ab, die Build-, Test- und Wartungsprozesse zu beschleunigen, die Anwendungsentwicklungszyklen erheblich zu verkürzen und die Anwendungsqualität zu verbessern.

Anstatt die Komponenten als Teil der Anwendung zu erstellen, ermöglicht Bit, dass sie außerhalb der App entwickelt und dann verwendet werden, um die Anwendungen von Grund auf zu erstellen. Die Komponenten wiederum können in vielen verschiedenen Anwendungen wiederverwendet werden, wodurch eine Art Marktplatz für Komponenten entsteht, der einem gesamten Entwicklungsteam zur Verfügung steht. Als Ergebnis erhalten Sie erweiterbare Anwendungen, deren Funktionalität durch einfaches Hinzufügen oder Entfernen von Komponenten geändert werden kann.

Bit ist mit React-, Vue- und Angular-Bibliotheken kompatibel. Es basiert auf einer Workspace-Philosophie, bei der Workspaces zum Entwickeln und Zusammenstellen von Komponenten verwendet werden. Diese Arbeitsweise ermöglicht es Ihnen, Anwendungen verteilt zu erstellen, jedoch mit einer monolithischen Erfahrung. Die Benutzeroberfläche der Arbeitsbereiche von Bit ermöglicht die einfache visuelle Entwicklung und Verwaltung von Komponenten.

Kosmos reagieren

React Cosmos ist eine Entwicklungsumgebung zur Erstellung skalierbarer, hochwertiger Benutzeroberflächen. Es ermöglicht Ihnen, React-Komponenten isoliert zu entwickeln und Bibliotheken von UI-Komponenten zu erstellen. Es kann verwendet werden, um die Entwicklungszeiten drastisch zu verkürzen, entweder durch sofortige visuelle Regressionstests oder durch Integrationen, die an Ihre Bedürfnisse angepasst werden können.

React Cosmos verwendet eine auf Komponenten-Fixtures basierende Philosophie, die es Ihnen ermöglicht, Ihre Zustände mit einem Lesezeichen zu versehen, indem Sie Beispieleingaben definieren. Durch das Gruppieren von Komponenten-Fixtures können Sie eine Bibliothek daraus erstellen, die React Cosmos unter einer eleganten Benutzeroberfläche bereitstellt, die speziell entwickelt wurde, um Ihre Zeit produktiver zu gestalten.

Um seine Aufgabe zu erfüllen, fügt sich React Cosmos in Ihre Build-Pipeline ein, damit es Ihren Quellcode verstehen kann. Dies bedeutet, dass Sie das Tool unabhängig davon verwenden können, in welchem ​​JS-Dialekt Sie Ihren Code schreiben – sei es Flow, TypeScript oder andere. Es bedeutet auch, dass Sie manchmal einige Optionen in einer Konfiguration hinzufügen müssen, damit die Integration funktioniert.

Wie der Name schon sagt, arbeitet React Cosmos ausschließlich mit React zusammen und konzentriert sich auf einige Aspekte der UI-Entwicklung, jedoch mit höchster Detailgenauigkeit.

React-Entwicklertools

Dieses von Facebook angebotene Tool funktioniert als Chrome-Plug-In, mit dem Sie die Hierarchien der React-Komponenten innerhalb der Entwicklungstools von Chrome überprüfen können. Es ist auch als Add-On für den Firefox-Browser verfügbar.

Mit den React Developer Tools können Sie den Zustand und die Eigenschaften einer Komponente überprüfen und bearbeiten, während Sie durch die Komponentenhierarchiestruktur Ihrer App navigieren. Diese interaktive Form der Entwicklung gibt Ihnen die Möglichkeit zu sehen, wie sich Änderungen an einer Komponente auf die anderen auswirken, sodass Sie Ihre UI-Komponentenstruktur korrekt zusammenstellen und eine angemessene Trennung zwischen ihnen erzielen können.

Wenn Sie React Developer Tools in Ihrem Browser installieren, erhalten Sie zwei neue Registerkarten, eine namens Komponenten und die andere namens Profiler. Der erste zeigt Ihnen die Root-React-Komponenten, die auf der Seite gerendert wurden, sowie die von ihnen gerenderten Unterkomponenten. Durch Auswahl einer der Komponenten in der Baumstruktur können Sie ihre Eigenschaften und ihren Status im rechten Fensterbereich überprüfen und bearbeiten. Mithilfe der Breadcrumbs können Sie die Vorfahren der ausgewählten Komponente überprüfen. Die Registerkarte Profiler wird verwendet, um Leistungsinformationen aufzuzeichnen.

Docz

Der Prozess der Codedokumentation ist wahrscheinlich der Prozess, den Programmierer am meisten hassen. Vielleicht sogar mehr, als die Fehlerberichte zu lesen, die sie von den Testern erhalten. Eine ständig aktualisierte Dokumentationsseite ist jedoch unerlässlich, um die Entwicklungszeit zu verkürzen, da sie verhindert, dass dieselben Komponenten immer wieder neu geschrieben werden und jedes Mal mit anderen Funktionen.

Docz zielt darauf ab, den Prozess der Dokumentation und Aktualisierung von Dokumentationsseiten so weit wie möglich zu vereinfachen, damit Entwickler keine Zeit verschwenden, um Anwendungen schneller fertigzustellen. Mit Docz können Sie auf einfache Weise eine interaktive Dokumentation Ihres Codes schreiben und veröffentlichen und MDX-Dateien erstellen, die seine Vorzüge demonstrieren. Als Ergebnis erhalten Sie eine produktionsbereite Site mit Live-Reloading, die bei jeder Dateiänderung vollständig aktualisiert wird.

Wenn Sie sich für API interessieren, können Sie diese Tools erkunden, um eine schöne API-Dokumentation zu erstellen.

Das fängt gerade erst an

Neben den hier vorgestellten Tools gibt es viele weitere Projekte für Tools zum Katalogisieren, Verwalten und Dokumentieren von Komponenten, wie unter anderem Carte Blanche, Atellier, Bluekit. Viele von ihnen befinden sich noch in der Beta-Phase, andere sind nicht gewartete Projekte, aber es lohnt sich, sie zu kennen und auf dem Radar zu halten, da sie Eigenschaften bieten, die die Softwareentwicklungszeiten erheblich verkürzen können.

Viele große moderne Unternehmen – darunter Shopify, Atlassian, IBM, Spotify und AirBNB – setzen werkzeuggestützte Designsysteme ein, die die Entwicklung und Dokumentation von UI-Komponenten beschleunigen. Sie müssen jedoch nicht warten, bis Sie ein großes Unternehmen sind, um diese Tools zu übernehmen. Es ist am besten, sie zu verwenden, wenn Sie nur einen minimalen Katalog von Komponenten verwalten müssen. Sie können sich mit ihnen vertraut machen, damit Sie nicht überrascht werden, wenn Ihre Komponentenliste wächst und es zu teuer wird, mit der Organisation zu beginnen.