Zur goldenen Türklinke

Schlagwort: Javascript

  • Storybook – 📘 unser Frontend Entwicklungstool

    Storybook ist ein leistungsstarkes Frontend-Entwicklungstool, das Entwicklern hilft, Benutzeroberflächen (UI) auf isolierte Weise zu erstellen und zu testen. Ursprünglich wurde es für React entwickelt, aber es unterstützt auch andere Frontend-Frameworks wie Vue, Angular, Svelte und mehr.

    Was ist Storybook?

    Storybook ist ein Entwicklungsumgebung-Tool zur Erstellung von UI-Komponenten. Es ermöglicht es Entwicklern, Komponenten unabhängig voneinander zu erstellen und zu testen, was eine effizientere Entwicklung und Wartung ermöglicht. In Storybook wird jede Komponente als eigenständige „Story“ betrachtet, was bedeutet, dass sie unabhängig von der gesamten Anwendung erstellt und getestet werden kann.

    Was kann Storybook?

    Storybook bietet eine Vielzahl von Funktionen, die die Entwicklung von UI-Komponenten erleichtern:

    • Isolierte Entwicklung: Mit Storybook können Sie Komponenten einzeln entwickeln, ohne dass Sie sich Gedanken über die Abhängigkeiten und den Kontext der gesamten Anwendung machen müssen.
    • Interaktive Dokumentation: Storybook erzeugt interaktive Dokumentationen für Ihre Komponenten. Es ermöglicht Ihnen, verschiedene Zustände Ihrer Komponenten zu demonstrieren und zu kontrollieren.
    • Visuelles Testing: Mit Storybook können Sie visuelle Tests durchführen, um sicherzustellen, dass Ihre Komponenten wie erwartet aussehen und sich so verhalten.
    • Add-Ons: Storybook verfügt über eine Reihe von Add-Ons, die zusätzliche Funktionen und Anpassungen ermöglichen.

    Warum sollte man Storybook lernen?

    Es gibt mehrere Gründe, warum das Erlernen von Storybook für React und andere Frameworks nützlich ist:

    1. Fördert wiederverwendbare Komponenten: Storybook fördert die Erstellung wiederverwendbarer und eigenständiger Komponenten, was die Konsistenz und Wartbarkeit von Code verbessert.
    2. Erleichtert die Zusammenarbeit: Da Storybook eine visuelle Dokumentation Ihrer Komponenten erstellt, ist es einfacher, Komponenten zwischen Teammitgliedern auszutauschen und das Verständnis der Komponenten-Funktionalität zu erleichtern.
    3. Erhöht die Qualität: Durch das Isolieren von Komponenten können Entwickler einfacher Tests schreiben und Fehler erkennen.
    4. Entwicklungs-Effizienz: Es ermöglicht es den Entwicklern, das Verhalten von Komponenten in verschiedenen Zuständen schnell zu visualisieren, was den Entwicklungsprozess beschleunigt.

    Im Großen und Ganzen ist Storybook ein sehr mächtiges Tool, das sowohl die Qualität des Codes verbessert als auch die Effizienz des Entwicklungsprozesses steigert, denn wir können Frontend-Komponenten gezielt und unabhängig von dem Gesamtkonstrukt bauen. Das bietet im Kontext des UI-Code mehrere weitere Vorteile:

    • Keine Komplexität und Abhängigkeiten, die mit der Einrichtung von Entwicklungs-Umgebungen verbunden sind
    • Möglichkeit, schnell reale Produktszenarien zu erstellen, ohne diese Funktionalität tatsächlich aufbauen zu müssen
    • Keine Stolperfallen durch anwendungsspezifischen Code
    • Mehr Zugänglichkeit für Nicht-Entwickler
    • Förderung des Design-System-Denkens, da eine klare Trennung zwischen dem UI-Design-System und den spezifischen Anwendungen besteht

    Die Storybook Tutorials sind in diesem Fall ein wirklich guter Einstiegspunkt

  • Computational Notebooks

    Einen interessanten Gedanken hat Maggie Appleton da, der mich ein bisschen an Storybooks erinnert, eine Methode, die wir im Palasthotel ebenfalls einsetzen.

    Schon einmal erlebt, wie mühsam es ist, eine lokale Entwicklungsumgebung einzurichten? Oder wie schwer es sein kann, eure Arbeit mit anderen zu teilen, ohne sie mit Installationen und Kommandozeilen-Kram zu belästigen? Hier kommt die Lösung!

    Computational Notebooks sind online Dokumente, die traditionellen Texteditoren wie Word oder Google Docs ähneln. Statt freien Text zu tippen, sind sie jedoch strukturierter und bestehen aus „Zellen“ mit Eingabe und Ausgabe. Gebt einfach euren Code ein und führt die Zelle aus, um das Ergebnis direkt zu sehen. Das Schöne daran: Zellen können sowohl Code als auch normalen Text enthalten, was es ermöglicht, den Code direkt zu erklären und zu kommentieren – ideal für Tutorials oder Anleitungen!

    Eine interessante Randnotiz: Eine Philosophie namens plädiert dafür, dass Code immer in solchen linearen, verständlichen Dokumenten geschrieben werden sollte – selbst-dokumentierender Code!

    Natürlich könnt ihr Variablen und Funktionen aus anderen Zellen verwenden, um eure Programmierung zu koordinieren. Die Handhabung von Variablen in Zellen kann variieren, abhängig vom jeweiligen Notebook. Ihr könnt Zellen auch per Drag-and-Drop neu anordnen – ähnlich wie in blockbasierten Editoren.

    Die meisten Computational Notebooks sind für Data Science und maschinelles Lernen konzipiert und unterstützen Sprachen wie Python und R. Eine Ausnahme bildet , welches JavaScript verwendet und sich an Datenvisualisierungs-Designer richtet.

    Das Beste daran: Diese Notebooks laufen komplett im Browser, wodurch sie einfach über einen Link geteilt werden können! Dadurch wird eine bisher unmögliche Shareability erreicht. Andere können den Code ausprobieren, indem sie euer Notebook forken, und manche Notebooks bieten sogar Multiplayer-Unterstützung für gemeinsame Echtzeit-Arbeit.

    Insgesamt sind Computational Notebooks eine faszinierende Lösung für ein leidiges Problem: unteilbaren, unerklärlichen Code in umständlichen lokalen Entwicklungsumgebungen. Probiert sie aus und erlebt, wie viel einfacher das Programmieren und Teilen von Code sein kann!