Interaktive Dashboards erstellen: Warum React-Grid-Layout die beste Wahl für uns war

Nachdem wir die erste Version des ilert-Dashboards mit einem statischen Layout veröffentlicht hatten, war uns schnell klar, dass wir noch einen Schritt weitergehen wollten: die Nutzer sollten Widgets frei anpassen und anordnen können. Wir wollten ein wirklich interaktives Nutzererlebnis schaffen. Daher suchten wir nach einer Programmbibliothek, die Drag-and-Drop sowie Resizing unterstützt und sich gleichzeitig nahtlos in unser bestehendes Tech-Stack integriert.

‍

In diesem Beitrag erkläre ich Schritt für Schritt unseren Auswahlprozess, die wesentlichen Funktionen, die wir priorisiert hatten, und warum wir uns letztendlich für React-Grid-Layout als die beste Lösung für unsere Anforderungen entschieden haben.

Diese Kernfunktionen benötigten wir für das ilert-Dashboard 

Bevor wir uns mit spezifischen Libraries beschäftigten, definierten wir die wichtigsten Anforderungen für die Entwicklung eines benutzerfreundlichen und flexiblen Dashboards. Dies waren unsere Prioritäten:

‍

• Unterstützung von React und TypeScript: Um eine nahtlose Integration mit unserem Tech-Stack zu gewährleisten, brauchten wir eine Bibliothek, die sowohl React als auch TypeScript unterstützt. Dies sollte für eine starke Typsicherheit und effiziente Entwicklung sorgen.
• Grid-Layout mit Drag-and-Drop: Dies war für ein dynamisches und individuell anpassbares Dashboard-Feature unerlässlich. Nutzer sollten Widgets problemlos verschieben, neu anordnen und in ihrer Größe ändern können.
• Responsive Design: Da unser Dashboard auf einer Vielzahl von Geräten und Bildschirmgrößen verwendet wird, musste es vollständig responsiv sein und sich an unterschiedliche Layouts anpassen.

Aktive Weiterentwicklung und Updates: Da die Bibliothek für kritische Funktionen verwendet wird, waren eine starke, unterstützende Community und regelmäßige Updates entscheidend, um langfristige Zuverlässigkeit und Sicherheit zu gewährleisten.

Bewertung von Grid- und Drag-and-Drop-Bibliotheken für das ilert-Dashboard

Wir haben mehrere bekannte Bibliotheken geprüft, um die beste Option zu finden. Jede hatte ihre eigenen Stärken und Schwächen, daher bewerteten wir sie nach Integrationsfähigkeit, Funktionalität und Anpassungsmöglichkeiten. Hier ist eine Zusammenfassung der wichtigsten Optionen, die wir in Betracht gezogen haben:

1. React-Grid-Layout

Vorteile:

• Speziell für React entwickelt, wodurch die Integration einfach ist.
• Umfassende, sofort verwendbare Unterstützung für Drag-and-Drop sowie Resizing.
• Responsives Design, das sich an verschiedene Bildschirmgrößen anpasst.
• Starke Community, regelmäßige Updates und TypeScript-Kompatibilität.

‍

Nachteile:

• Begrenzte Flexibilität für unkonventionelle Layouts, die über Standard-Grids hinausgehen.
• Potenzielle Performance-Probleme bei sehr komplexen oder datenintensiven Dashboards.

2. dnd-kit

Vorteile:

• Schlank und modular, ideal für maßgeschneiderte Drag-and-Drop-Anwendungen.
• Hohe Zugänglichkeit, inklusive Unterstützung ausschließlicher Tastaturnavigation.
• Starke Performance bei individuellen Interaktionen.

‍

Nachteile:

• Keine integrierte Grid-Layout-Funktionalität, erfordert manuelle Einrichtung.
• Keine Unterstützung für die Größenänderung von Widgets, was die Implementierung erschwert.

3. Packery

Vorteile:

• Ideal für Masonry-Layouts.
• Unterstützt das Verschieben von Objekten durch Drag-and-Drop.

‍

Nachteile:

• Letztes größeres Update war 2018, daher veraltet.
• Eingeschränkte Kompatibilität mit React und TypeScript, was die Integration erschwert.

4. Gridster.js

Vorteile:

• Grundlegende Drag-and-Drop- und Resizing-Funktionen sind vorhanden.

‍

Nachteile:

• Veraltet und mit minimaler Unterstützung von React, wenig Updates.
• Bekannte Bugs und begrenzte Community-Unterstützung, was die Wartung erschwert.

‍

Nach sorgfältiger Bewertung entschied sich unser Team für React-Grid-Layout als die umfassendste und effizienteste Lösung. Die integrierte Drag-and-Drop-Funktionalität, die nahtlose React-Integration, die aktive Weiterentwicklung und die effiziente Grid-Unterstützung halfen uns, Zeit zu sparen und die Komplexität zu reduzieren. Die Performance und Stabilität erfüllten unsere Anforderungen an interaktive, datenintensive Dashboards mit minimalem Optimierungsaufwand.

Die Implementierung des React-Grid-Layout in das ilert-Dashboard

Um die Effektivität von React-Grid-Layout zu demonstrieren, hier ein kurzer Überblick, wie wir seine Kernfunktionen in unser Dashboard integriert haben:

‍

• Drag-and-Drop-Konfiguration: Mit der API von React-Grid-Layout konnten wir Widgets so konfigurieren, dass sie über Grid-Zellen hinweg verschoben werden können. Dies bietet unseren Nutzern eine flüssige und responsive Benutzererfahrung.
• Widget-Resizing: Die Implementierung der Resizing-Funktion von React-Grid-Layout war unkompliziert. Sie ermöglicht es unseren Nutzern, Widgets zu vergrößern oder zu verkleinern. Dies war entscheidend für die Flexibilität unserer Dashboards.
• Responsive Anpassung: Durch die integrierten Responsive-Optionen der Bibliothek wird das Dashboard-Layout automatisch an verschiedene Geräte angepasst und bietet eine einheitliche Nutzererfahrung auf Desktops und mobilen Geräten.

‍

Dank dieser Funktionen konnten wir eine flexible und intuitive Nutzung unserer Dashboards bieten, was die Benutzerfreundlichkeit von ilert erheblich verbessert.

‍

In diesem Video können Sie sehen, wie die interaktiven Dashboards von ilert funktionieren:

Eine kurze Gegenüberstellung: React-Grid-Layout vs. Alternativen für den ilert Use Case