zum Hauptinhalt springen.
UX/UI Design, Entwicklung & TYPO3 in Karlsruhe Karlsruhe | seit 2006

Gardenjs - unsere schnelle, einfache Storybook-Alternative

16.07.2024, geschätzte Lesedauer: Minute(n). #entwicklung #javascript #stakeholder #svelte

UI-Komponenten Explorer erleichtern die tägliche Arbeit beim Erstellen, Testen, Betrachten und Dokumentieren von UI-Komponenten und Layouts. Bei der Entwicklung mit Javascript Frameworks bietet sich ein integriertes Tool an. Jetzt haben wir mit Gardenjs unsere schnelle, leichtgewichtige Alternative zu Storybook veröffentlicht.

Entwickeln, testen, dokumentieren und kollaborieren

Bei der Entwicklung von Anwendungen werden Benutzeroberflächen aus wiederverwendbaren Komponenten erstellt, die zusammen eine Komponentenbibliothek bilden. Es gibt verschiedene Ansätze, wie man diese Komponenten organisiert. In der Frontend-Entwicklung mit JavaScript-Frameworks und -Bibliotheken wie Vue, Svelte und React haben sich insbesondere UI-Komponenten-Explorer wie Storybook bewährt. Diese Tools zeigen UI-Komponenten isoliert, demonstrieren verschiedene Zustände und Varianten, zeigen Änderungen unmittelbar an und ermöglichen Tests. Sie erleichtern die Entwicklung erheblich, helfen dabei, den Überblick zu behalten, und unterstützen Teams bei der Zusammenarbeit.

Der UI-Komponenten Explorer Gardenjs

Frontend Entwicklung ist gewissermaßen wie Gartenarbeit: Pflanzen, pflegen, ernten. Na ja, irgendwie so etwa ... . Unseren UI-Komponenten Explorer haben wir jedenfalls Gardenjs genannt. Zunächst war Gardenjs eine Spielwiese, um das JS Framework Svelte besser zu verstehen. Zudem fanden wir Storybook für unsere Projekte als überfrachtet und vor allem sehr langsam. Gardenjs entstand also ursprünglich als ein Nebenprodukt. Das Rad haben wir natürlich nicht neu erfunden. Es ging uns darum, die wesentlichen Anforderungen an einen UI-Komponenten Explorer zusammenzutragen und insbesondere ein sehr schnelles Tool zur Verfügung zu haben. Gardenjs macht einige Dinge besser als die Alternativen und auch wenn wir spät dran sind, wäre es schade, Gardenjs nicht für alle verfügbar zu machen. Daher haben wir Gardenjs jetzt unter der MIT Lizenz veröffentlicht.

Kompatibel mit React, Vue, Svelte sowie mit Multiframework Projekten

Gardenjs ist also mit dem JS Framework Svelte erstellt und funktioniert aktuell mit HTML, Svelte, Vue und React. Die Kompatibilität wird durch ein entsprechendes Plugin ermöglicht. Bei Interesse fügen wir zukünftig auch noch weitere Frameworks hinzu. Durch die Erstellung eines Renderer Plugins können weitere JS Frameworks jedoch auch autark hinzugefügt werden. Wie man ein solches Plugin für Gardenjs erstellt, erklären wir in der Dokumentation.

In einigen wenigen Projekten wird auch mehr als nur ein Framework gleichzeitig verwendet. In diesen Fällen ist Gardenjs der Explorer der Wahl, denn Storybook kann nicht mit Multiframework Projekten umgehen.

Wie funktioniert Gardenjs?

Gardenjs wird als NPM Modul installiert. Bei der Installation wird im Projekt-Root eine Konfigurationsdatei hinterlegt, die flexibel angepasst werden kann. Anpassungsmöglichkeiten sind darin exemplarisch angelegt und werden auch in der Doku aufgezeigt. Gardenjs ist bezüglich der projektspezifischen Struktur flexibel. Damit Komponenten nun im Explorer ausgegeben werden, muss im Projektverzeichnis neben jeder Komponente eine "foo.das.js" angelegt werden. Wird jetzt eine Komponente geändert, wird die Änderung in Lichtgeschwindigkeit in Gardenjs ausgegeben. Die Größe des Projekts spielt dabei keine Rolle.

Stories machen Storybook zu einem mächtigen Tool. Auch in Garden können verschiedene Varianten und Zustände unkompliziert in der Komponententdatei foo.das.js registriert werden. Eine zusätzliche Navigation im Panel ermöglicht die Ausgabe dieser "Stories", wir nennen Stories einfach Examples. Das Panel erlaubt es in Garden jedoch nicht, eigene Werte zu setzen, wie z.B. das Ändern einer Button Beschriftung - für solche Optionen hatten wir bislang keine Notwendigkeit.

Für die Teamarbeit benötigt ein UI-Komponenten Explorer unserer Meinung nach keine komplexen Feature: Im Projekt wird ohnehin eine Versionsverwaltung sowie ein Bare-Repository wie GitHub oder GitLab verwendet, sodass Teams perfekt zusammenarbeiten können. Größere Teams arbeite zudem mit einem Projektmanagement Tool. Wer möchte, kann Notizen in Garden anzeigen: Anmerkungen können in der Datei "foo.das.js" im Bereich "description" als Text, HTML oder Markdown hinterlegt werden - oder durch einen Pfad auf eine Markdown Datei. Diese Inhalte werden im Panel unterhalb der Komponente ausgegeben und es könnte so auch sehr ausführlich dokumentiert werden.

Im Panel wird zudem in einem weiteren Tab der Komponenten Code angezeigt. Benötigt wird das vermutlich eher selten, sollte der Komonentenexplorer jedoch veröffentlicht werden, lässt sich so der Code auch ohne ein verfügbares Repository anzeigen.

Als schlanke und schnelle Alternative verfügt Gardenjs zwar über deutlich weniger Feature als der Platzhirsch Storybook, dennoch sind zahlreiche nützliche Optionen enthalten, hier eine Auswahl: 

  • Eine Konfigurationsdatei zur einfachen Verwaltung projektspezifischer Einstellungen.
  • Umschalten zwischen Darkmode und Lightmode.
  • Auswahl projektspezifischer Modes.
  • Anzeige der Bühnengröße in Pixeln.
  • Umschalten zwischen vor definierten Bühnengrößen.
  • Ausgabe in neuem Browserfenster.
  • Filterfunktion des Seitenbaum.

Neben der projektspezifischen Komponentenbibliothek könnte auch externe lokale Komponentenbibliotheken angezeigt werden, zum Beispiel eine Bibliothek mit Basis Komponenten. Auch hier könnte die Multiframework Kompatibilität ein Vorteil gegenüber Storybook sein.

Was kommt jetzt?

Gardenjs ist jetzt veröffentlicht, aber das wird nicht das Ende sein. Wir setzen Gardenjs in unseren eigenen Projekten ein und werden das Tool auch zukünftig pflegen. Zudem haben wir auch eine lange Liste mit Ideen für weitere coole Feature, die wir in der Dokumentation zusammengefasst haben. Die Roadmap wird umsetzen, sofern wir weitere Feature selber benötigen oder falls Gardenjs da draußen gut angenommen wird. Alternativ entwickeln wir auch auf Anfrage neue Feature.

Natürlich freuen wir uns auf Feedback, GitHub Stars und natürlich im Besonderen über Unterstützung. Bugs bitte gerne auf GitHub melden.

Weitere Inforamtionen:

GitHub: https://github.com/gardenjs/gardenjs 

Dokumentation: https://gardenjs.org/

Gardenjs Demo: https://demo.gardenjs.org/

GitHub der Dokumentation: https://github.com/gardenjs/docs

 

Gardenjs wurde gemeinsam mit Robin Danzinger entwickelt.

 

Skyline Karlsruhe