Flitter 1.0.0 veröffentlicht: SVG-Bibliothek als D3-Alternative

Einführung in die Flitter-Bibliothek

Der Hintergrund der Entstehung von Flitter

In der heutigen Webentwicklungsumgebung ist die Datenvisualisierung ein unverzichtbarer Bestandteil. Die Umwandlung komplexer Datensätze in leicht verständliche Formen stellt Entwickler vor eine ständige Herausforderung. Flitter wurde als Antwort auf diese Herausforderung geschaffen. Obwohl bereits eine Vielzahl von Bibliotheken für die Datenvisualisierung existiert, hatten Entwickler oft Schwierigkeiten, unter den angebotenen Optionen eine zu finden, die ihre Anforderungen vollständig erfüllt. Oftmals war es mit einem hohen Lernaufwand und Zeitaufwand verbunden, selbst einfache Diagramme oder Grafiken zu implementieren.

Probleme, die Flitter löst

Das Hauptziel von Flitter ist es, Entwicklern die einfache und schnelle Implementierung von Datenvisualisierungen wie Diagrammen und Grafiken zu ermöglichen. Zu diesem Zweck bietet Flitter zwei Hauptfunktionen an.

1. Deklaratives Schreiben von Code mit Widgets: Flitter verwendet ein deklaratives Programmiermodell, das es Entwicklern ermöglicht, die gewünschten visuellen Elemente einfach und intuitiv darzustellen. Dieser Ansatz wendet ein Paradigma an, das in modernen Webframeworks wie React weit verbreitet ist, auf die Datenvisualisierung an.
2. Komplexe Layoutberechnungen: Bei der Datenvisualisierung sind präzise Layout- und Positionsberechnungen entscheidend. Flitter automatisiert komplexe Layoutberechnungen, wie z. B. die Inferenz der Textbreite, sodass sich Entwickler auf die Entwicklung wichtigerer Logik konzentrieren können.

Wann ist Flitter erforderlich?

Flitter ist besonders für Projekte geeignet, bei denen die Anforderungen an die Datenvisualisierung komplex sind oder wenn einfache Diagramme und Grafiken schnell implementiert werden müssen. Darüber hinaus bietet es Entwicklern mit Flutter-Erfahrung eine sehr vertraute Syntax und Struktur, wodurch die Synergie zwischen Web- und Mobile-Plattformen maximiert werden kann.

Wichtige Aktualisierungen und Verbesserungen

Neue Funktionen

• Verbesserte SSR-UnterstützungVersion 1.0.0 hat die Unterstützung für SSR (Server-Side Rendering) deutlich verbessert. In früheren Versionen gab es manchmal Abhängigkeiten von bestimmten Node.js-Abhängigkeiten, aber diese wurden nun vollständig entfernt, sodass Flitter in verschiedenen Umgebungen wie Vercel oder Cloudflare stabil funktioniert. Dadurch können Entwickler Flitter einfacher in ihre Projekte integrieren, ohne an ein bestimmtes Framework gebunden zu sein.
• Verbesserte GestureDetector-FunktionalitätFlitter bietet jetzt einen Event-Bubbling-Effekt, der auf die Widget-Struktur reagiert. Dies ermöglicht eine präzisere Steuerung von Benutzerinteraktionen und gibt Entwicklern mehr Flexibilität bei der Implementierung komplexer Interaktionen.
• ZIndex-Widget hinzugefügtBisher unterstützte SVG das z-index-Attribut nicht direkt. Mit Flitter 1.0.0 wird diese Einschränkung durch das ZIndex-Widget umgangen, sodass Entwickler die vertikale Priorität von Elementen klar steuern können.

Leistungsverbesserungen

• Flitter hat die Geschwindigkeit des ersten Renderings von Diagrammen und die Interaktionsleistung deutlich verbessert. Es wurde ein Schwerpunkt auf die Leistungsoptimierung gelegt, z. B. die Verkürzung der Renderzeit komplexer Diagramme von 140 ms auf 30 ms.
• Wenn Zustandsänderungen in einem Call Stack auftreten, werden diese in Batches verarbeitet, um die Anzahl der Neuzeichnungen zu reduzieren.

Wichtige Fehlerbehebungen

• Es wurde ein Problem behoben, bei dem setState innerhalb eines mit addPostFrameCallback() registrierten Ereignishandlers aufgerufen wurde und keine Neuzeichnung erfolgte.
• Es wurde ein Problem behoben, bei dem die Höhe bei der Implementierung von Browser-Responsiveness nicht mit der Höhe des übergeordneten Elements übereinstimmte, wenn die Höhe auf 100 % festgelegt war.

Beispielanwendungen und Dokumentation

React

Um Flitter in React zu verwenden, installieren Sie bitte die folgenden beiden Pakete.

Durch das Importieren von Widgets aus flitter-react kann Flitter einfach in der React-Umgebung verwendet werden.

Ausführliche Dokumentationen und Anwendungsbeispiele zum Einstieg in Flitter finden Sie auf der offiziellen Dokumentationsseite. Dort finden Sie verschiedene Informationen, von den Grundlagen der Verwendung von Flitter bis hin zu fortgeschrittenen Funktionen.

Community und Mitwirkung

Die Flitter-Community kommuniziert aktiv über GitHub und Discord. Entwickler können auf GitHub direkt Funktionen vorschlagen oder Fehler melden, und im Discord-Kanal können sie Ideen oder Erfahrungen zu Flitter austauschen. Jeder Beitrag ist ein wichtiger Bestandteil des Wachstums des Flitter-Projekts.

Zukunftspläne und Vision

Flitter konzentriert sich kurzfristig auf Fehlerbehebungen und Leistungsverbesserungen und hat langfristig das Ziel, ein besseres SSR-Erlebnis und zusätzliche Funktionen für die Datenvisualisierung zu entwickeln. Die letztendliche Vision von Flitter ist es, eine integrierte und skalierbare Lösung für die Datenvisualisierung bereitzustellen und so die Zugänglichkeit von Datenvisualisierung im Ökosystem der Webentwicklung zu revolutionieren.