English English French French Spanish Spanish German German
Geekflare wird von unserem Publikum unterstützt. Wir können Affiliate-Provisionen durch den Kauf von Links auf dieser Website verdienen.
Teilen:

6 Tools zur Beschleunigung der UI-Entwicklung und -Dokumentation

Invicti Web Application Security Scanner – die einzige Lösung, die eine automatische Verifizierung von Schwachstellen mit Proof-Based Scanning™ bietet.

Die komponentengetriebene Entwicklung ist eine hervorragende Strategie, um die Entwicklung von Frontends und Benutzeroberflächen zu beschleunigen.

In kleinen Anwendungen können die Listen der verwendeten Komponenten einfach verwaltet werden – Sie benötigen kein spezielles Tool, um diese Listen außer Ihrem eigenen Speicher zu verwalten. Die Verwendung von Komponenten ermöglicht die Wiederverwendung und vereinfacht das Erstellen, Testen und Modularisieren von Anwendungen.

Aber wenn die Anzahl und Komplexität von Anwendungen und Entwicklungsteams wächst, nehmen auch die Anzahl und Komplexität der Komponenten zu, bis zu dem Punkt, an dem Sie eine Art Hilfe benötigen, um den Überblick über die Komponenten zu behalten und die Kohärenz in Ihren 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 diverse JavaScript-Frameworks für die UI-Entwicklung, wie Angular, Reagieren, 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 in der Benutzeroberfläche einer in der Entwicklung befindlichen App. Diese Leitfäden enthalten nicht nur Komponentenlisten, sondern auch funktionale, testbare Beispiele.

Sie bieten auch Codeausschnitte jeder Komponente an, die Entwickler kopieren und in ihren eigenen Code einfügen können. Typischerweise enthalten Styleguides allgemeine UI-Komponenten wie Schaltflächen, Symbole, Navigationsmenüs, Formulareingabeelemente und modale Overlays.

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

Storybook

Märchenbuch ist ein beliebtes Tool zum Entwickeln von Frontend- und UI-Komponenten, mit dem Sie arbeiten können, ohne sich Gedanken über anwendungsspezifische Abhängigkeiten machen zu müssen. Es bietet eine Sandbox, um die Benutzeroberfläche isoliert außerhalb der in Entwicklung befindlichen App zu erstellen.

YouTube-Video

Dies ermöglicht die Entwicklung schwer erreichbarer Zustände und Grenzfä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 Ökosystem von Add-Ons, das die Integration mit Entwicklungstools ermöglicht, die Anpassung des Workflows erleichtert und Tests und Dokumentation automatisiert. Beispielsweise ermöglicht das Docs-Addon das Schreiben von Markdown/MDX, um anpassbare Websites für Komponentenbibliotheken und Designsysteme zu generieren.

Styleguidist

Styleguide kann als lebendiger Styleguide-Generator klassifiziert werden, aber seine Funktionalität kommt der eines Entwicklungsumgebungsservers für UI-Komponenten nahe.

Die mit Styleguidist erstellten Styleguides zeigen Komponenteneigenschaften und zeigen bearbeitbare Verwendungsbeispiele basierend auf Markdown-Dateien (.md) an. 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 Wartung der UI-Dokumentationssite, die den UI-Komponentenkatalog enthält. Es ermöglicht auch das Erstellen von Markdown-Seiten und das Importieren von UI-Komponenten.

Durch die zentralisierte Dokumentation in Styleguidist lassen sich bei großen Projekten erhebliche Zeit- und Arbeitseinsparungen erzielen, jedoch 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.

Bit

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 unter der Methodik der komponentengesteuerten Entwicklung (CDD) 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 ganzen 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 kompatibel mit React, Vue und Angular-Bibliotheken. Es basiert auf einer Workspace-Philosophie, bei der Workspaces zum Entwickeln und Zusammenstellen von Komponenten verwendet werden.

Diese Arbeitsweise ermöglicht es Ihnen, Anwendungen auf verteilte Weise zu erstellen, jedoch mit einer monolithischen Erfahrung. Die Benutzeroberfläche der Arbeitsbereiche von Bit ermöglicht die einfache visuelle Entwicklung und Verwaltung von Komponenten.

React Cosmos

Kosmos reagieren ist eine Entwicklungsumgebung zur Erstellung skalierbarer, qualitativ 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 oder 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 Arbeit zu erledigen, fügt sich React Cosmos in Ihre Build-Pipeline ein, damit es Ihren Quellcode verstehen kann.

Das bedeutet, dass Sie das Tool verwenden können, egal 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 Developer Tools

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.

Reagieren Sie auf Entwicklertools ermöglicht Ihnen, den Zustand und die Eigenschaften einer Komponente zu überprüfen und zu 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 mit dem Namen Komponenten und die andere mit dem Namen Profiler. Die erste zeigt Ihnen die Root-React-Komponenten, die auf der Seite gerendert wurden, sowie die von ihnen gerenderten Unterkomponenten.

Indem Sie eine der Komponenten in der Baumstruktur auswählen, können Sie ihre Eigenschaften und ihren Status im rechten Bereich prüfen und bearbeiten. Mithilfe der Breadcrumbs können Sie die Vorfahren der ausgewählten Komponente überprüfen. Die Registerkarte „Profiler“ wird zum Aufzeichnen von Leistungsinformationen verwendet.

Docz

Der Prozess des Dokumentierens von Code ist wahrscheinlich derjenige, den Programmierer am meisten hassen. Vielleicht sogar mehr als das Lesen der Fehlerberichte, 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 zwar jedes Mal mit unterschiedlichen Funktionen.

Dok zielt darauf ab, den Prozess der Dokumentation und Aktualisierung von Dokumentationsseiten so weit wie möglich zu vereinfachen, damit Entwickler keine Zeit verschwenden, die sie verwenden könnten, um Anwendungen schneller fertigzustellen.

Mit Docz können Sie ganz einfach eine interaktive Dokumentation Ihres Codes schreiben und veröffentlichen und MDX-Dateien erstellen, die seine Vorzüge zeigen. Als Ergebnis erhalten Sie eine produktionsbereite Website mit Live-Neuladen, die bei jeder Änderung einer Datei vollständig aktualisiert wird.

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

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 z. B. Carte Blanche, Atellier, Bluekit und andere.

Viele von ihnen befinden sich noch in der Beta-Phase, während andere nicht gewartete Projekte sind, aber es lohnt sich, sie zu kennen und auf dem Radar zu halten, da sie Qualitäten bieten können, die die Softwareentwicklungszeiten erheblich verkürzen können.

Viele große moderne Unternehmen – darunter Shopify, Atlassian, IBM, Spotify und AirBNB – führen 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 einzuführen. Am besten beginnen Sie damit, sie zu verwenden, wenn Sie nur einen minimalen Katalog von Komponenten warten 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, sie zu organisieren.

Danke an unsere Sponsoren
Weitere großartige Lektüre zum Thema Entwicklung
Macht Ihr Geschäft
Einige der Tools und Dienste, die Ihr Unternehmen beim Wachstum unterstützen.
  • Invicti verwendet das Proof-Based Scanning™, um die identifizierten Schwachstellen automatisch zu verifizieren und innerhalb weniger Stunden umsetzbare Ergebnisse zu generieren.
    Versuchen Sie es mit Invicti
  • Web-Scraping, Wohn-Proxy, Proxy-Manager, Web-Unlocker, Suchmaschinen-Crawler und alles, was Sie zum Sammeln von Webdaten benötigen.
    Versuchen Sie es mit Brightdata
  • Semrush ist eine All-in-One-Lösung für digitales Marketing mit mehr als 50 Tools in den Bereichen SEO, Social Media und Content-Marketing.
    Versuchen Sie es mit Semrush
  • Intruder ist ein Online-Schwachstellenscanner, der Cyber-Sicherheitslücken in Ihrer Infrastruktur findet, um kostspielige Datenschutzverletzungen zu vermeiden.
    MIT DER INTELLIGENTEN SCHADENKALKULATION VON Intruder