Flitter 1.0.0 Released: An SVG Library to Replace D3

Introduction to the Flitter Library

Background of Flitter's Creation

In the modern web development environment, data visualization has become an essential element. Transforming complex datasets into easily understandable formats is a constant challenge for developers. Flitter was born to address this challenge. Despite the existence of various data visualization libraries, developers often found it difficult to find features that perfectly met their needs among the available options. Even implementing simple charts or diagrams often required a significant learning curve and time commitment.

Problems Flitter Solves

Flitter's core objective is to empower developers to implement data visualizations like charts and diagrams quickly and easily. To achieve this, Flitter provides two key features.

1. Declarative Code Writing Using Widgets: Flitter adopts a declarative programming model, allowing developers to express their desired visual elements in a simple and intuitive manner. This approach applies the paradigm widely adopted in modern web frameworks like React to data visualization.
2. Advanced Layout Calculation: Accurate layout and positioning calculations are crucial in data visualization. Flitter automates complex layout calculations, such as text width inference, enabling developers to focus on developing more critical logic.

When Do You Need Flitter?

Flitter is particularly ideal for projects with demanding data visualization requirements or situations where quick implementation of simple charts or diagrams is needed. It also offers a syntax and structure that is very familiar to developers with Flutter experience, maximizing synergy between web and mobile platforms.

Major Updates and Improvements

New Features

• Enhanced SSR SupportVersion 1.0.0 significantly enhanced SSR (Server-Side Rendering) support. While previous versions sometimes relied on Node.js-specific dependencies, these dependencies have now been completely removed, ensuring stable operation in various environments like Vercel and Cloudflare. This allows developers to integrate Flitter into their projects more easily without being tied to a specific framework.
• Enhanced GestureDetector FunctionalityFlitter now provides event bubbling effects corresponding to the widget tree. This enables finer control over user interactions, providing developers with greater flexibility when implementing complex interactions.
• Added ZIndex WidgetPreviously, SVG did not directly support the z-index property. Flitter 1.0.0 circumvents this limitation through the ZIndex widget, allowing developers to explicitly control the vertical layering priority of elements.

Performance Improvements

• Flitter significantly improved the initial rendering speed and interaction performance of diagrams. Performance optimization was a key focus, including reducing the rendering speed of complex diagrams from 140ms to 30ms.
• Batch processing was implemented when state changes occur within a single call stack, reducing the number of re-renders.

Major Bug Fixes

• Fixed an issue where calling setState within an event handler registered with addPostFrameCallback() did not trigger a re-render.
• Fixed an issue where setting height to 100% in browser responsive implementation resulted in the height being set differently from the parent's height.

Usage Examples and Documentation

React

To use Flitter in React, install the following two packages:

Importing the Widget from flitter-react allows you to easily use Flitter in a React environment.

Detailed documentation and usage examples to get started with Flitter are available on the official documentation site. This site provides a wealth of information, covering everything from basic usage to advanced features.

Community and Contribution Methods

The Flitter community actively communicates through GitHub and Discord. Developers can suggest features or report bugs directly on GitHub, and the Discord channel is a space to share ideas and experiences related to Flitter. All contributors play a vital role in the growth of the Flitter project.

Future Plans and Vision

In the short term, Flitter will focus on bug fixes and performance improvements. In the long term, the goal is to develop enhanced SSR experiences and additional features for better data visualization. Flitter's ultimate vision is to revolutionize data visualization accessibility within the web development ecosystem by providing a comprehensive and scalable solution.