Introducing the Flitter Library

The Birth of Flitter

Data visualization has become an essential element in the modern web development environment. Transforming complex data sets into easy-to-understand formats presents a constant challenge for developers. Flitter was born to meet this challenge. While various data visualization libraries exist, developers often find it difficult to locate features that fully meet their needs among the available options. Even implementing simple charts or diagrams often requires a significant learning burden and time commitment.

Problems Solved by Flitter

Flitter's core goal is to enable developers to easily and quickly implement data visualizations such as charts and diagrams. To this end, Flitter provides two main features:

1. Declarative Code Writing Using Widgets: Flitter introduces a declarative programming model, allowing developers to express their intended visual elements in a simple and intuitive way. This approach applies a paradigm widely accepted 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, allowing developers to focus on more important logic development.

When You Need Flitter

Flitter is ideal for projects with demanding data visualization requirements or situations where quick implementation of simple charts or diagrams is necessary. It also provides a familiar grammar and structure for developers with Flutter experience, maximizing synergy between web and mobile platforms.

Key Updates and Improvements

New Features

• Enhanced SSR SupportVersion 1.0.0 significantly enhances SSR (Server-Side Rendering) support. While previous versions relied on specific Node.js dependencies, these dependencies have now been completely removed, enabling stable operation in various environments such as Vercel or Cloudflare. This allows developers to easily integrate Flitter into their projects without relying on specific frameworks.
• GuestureDetector Feature EnhancementFlitter now provides event bubbling effects corresponding to the widget tree. This allows for finer control over user interactions and provides developers with greater flexibility in 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, enabling developers to clearly control the vertical stacking priority of elements.

Performance Improvements

• Flitter significantly improves the initial rendering speed and interactive performance of diagrams. Performance optimization has been prioritized, including a reduction in rendering time for complex diagrams from 140ms to 30ms.
• Batch processing is implemented when state changes occur within one call stack, reducing the number of re-renders.

Major Bug Fixes

• Fixed an issue where re-rendering did not occur when calling setState within an event handler registered using addPostFrameCallback().
• Fixed an issue where height was set differently from the parent height when setting height to 100% in browser responsive implementation.

Usage Examples and Documentation

React

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

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

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

const App = () => {
  return(
    
  );

Detailed documentation and usage examples for getting started with Flitter can be found on the official documentation site. This site provides a wealth of information, ranging 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 allows for sharing ideas and experiences related to Flitter. All contributors play a crucial 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. Long-term goals include developing enhanced SSR experiences and additional features for data visualization. Flitter's ultimate vision is to revolutionize data visualization accessibility in the web development ecosystem by providing a comprehensive and extensible solution.