chart
d3
svg
frontend
react
svelte
flutter

Flitter 1.0.0 released! - Beyond d3 in svg library

Moon

Introduction to the Flitter Library

The Birth of Flitter

In today's web development environment, data visualization has become an essential element. Transforming complex data sets into easily understandable forms is a continuous challenge for developers. Flitter was born to address this challenge. Despite the existence of various data visualization libraries, developers often find it difficult to find features that perfectly meet their requirements between the provided options. Even creating simple charts or diagrams can require a significant learning curve and time investment.

Problems Flitter Solves

The primary goal of Flitter is to enable developers to easily and quickly implement data visualizations such as charts and diagrams. To achieve this, Flitter offers two main functionalities:

1
Declarative Code Writing with Widgets: Flitter introduces a declarative programming model, allowing developers to express the visual elements they intend in a simple and intuitive manner. This approach applies the paradigm widely accepted in modern web frameworks like React to data visualization.

2
Advanced Layout Calculation: Precise layout and positioning calculations are crucial in data visualization. Flitter automates complex layout calculations, such as text width inference, enabling developers to focus more on critical logic development.

When You Need Flitter

Flitter is ideal for projects with demanding data visualization requirements or when quick implementation of simple charts and diagrams is needed. Additionally, it offers syntax and structures very familiar to developers with Flutter experience, maximizing synergy between web and mobile platforms.

Major Updates and Improvements

New Features

•
Enhanced SSR Support: Version 1.0.0 significantly boosts SSR (Server-Side Rendering) support. Previous versions relied on Node.js-specific dependencies, but now, all such dependencies have been removed, ensuring stable operation across various environments like Vercel and Cloudflare. This allows developers to integrate Flitter into their projects more easily, without framework constraints.

•
Enhanced GuestureDetector Functionality: Flitter now offers event bubbling effects corresponding to the widget tree, providing developers greater flexibility in creating complex interactions and more refined control over user interactions.

•
Addition of ZIndex Widget: Previously, SVG did not directly support the z-index property. Flitter 1.0.0 circumvents this limitation through the ZIndex widget, allowing developers to clearly control the vertical stacking order of elements.

Performance Improvements

•
Flitter has significantly enhanced the rendering speed and interaction performance of diagrams. The rendering speed of complex diagrams has been reduced from 140ms to 30ms, focusing on performance optimization.

•
When state changes occur within a single call stack, batch processing reduces the number of re-renders.

Major Bug Fixes

•
Fixed an issue where calling setState within an event handler registered with addPostFrameCallback() did not trigger re-rendering.

•
Addressed an issue in responsive browser implementations where setting height to 100% resulted in a height different from the parent's height.

Usage Examples and Documentation

React

To use with React, install the following two packages:

Shell

bashCopy code
npm i @meursyphus/flitter @meursyphus/flitter-react

You can easily use flitter within a React environment by importing Widget from flitter-react:

Javascript

jsxCopy code
import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
import Widget from '@meursyphus/flitter-react';

const App = () => {
  return(
    <Widget
      width="600px"
      height="300px"
      widget={Container({
        alignment: Alignment.center,
        color: 'lightblue',
        child: Text("Hello, Flitter!", style: TextStyle({ fontSize: 30, weight: 'bold' }))
      })}
    />
  );
}

For detailed documentation and usage examples of Flitter, visit the official documentation site. It provides a wide range of information from basic usage to advanced features of Flitter.

Community and How to Contribute

The Flitter community actively communicates through GitHub and Discord. Developers can propose new features or report bugs on GitHub and share ideas or experiences in the Discord channel for Flitter. All contributors play a crucial role in the growth of the Flitter project.

Future Plans and Vision

In the short term, Flitter focuses on bug fixes and performance improvements. Long-term goals include providing a better SSR experience and developing additional features for data visualization. The ultimate vision of Flitter is to offer an integrated and scalable solution for data visualization, innovating accessibility in the web development ecosystem.