Flitter est une librairie SVG conçue pour simplifier et accélérer la mise en œuvre de la visualisation de données dans le développement web. Elle offre une écriture de code déclarative et des fonctionnalités avancées de calcul de mise en page.
La version 1.0.0 apporte de nombreuses mises à jour, telles que l'amélioration de la prise en charge du SSR, l'optimisation des fonctionnalités de détection des gestes, l'ajout du widget ZIndex et des améliorations de performances, rendant ainsi Flitter plus puissant et convivial.
React, GitHub et la communauté Discord facilitent l'utilisation et la participation au développement de Flitter. Nous prévoyons de continuer à améliorer le SSR et d'ajouter de nouvelles fonctionnalités de visualisation de données afin de contribuer à l'écosystème du développement web.
Présentation de la bibliothèque Flitter
Contexte de la création de Flitter
Dans l'environnement de développement Web moderne, la visualisation de données est devenue un élément essentiel. Transformer des ensembles de données complexes en une forme compréhensible représente un défi constant pour les développeurs. Flitter est né pour relever ce défi. Bien que de nombreuses bibliothèques de visualisation de données existantes soient disponibles, les développeurs ont souvent du mal à trouver parmi les options offertes une fonctionnalité qui réponde parfaitement à leurs besoins. La mise en œuvre de graphiques ou de diagrammes simples peut souvent s'avérer fastidieuse et chronophage, nécessitant un apprentissage important.
Problèmes résolus par Flitter
L'objectif principal de Flitter est de permettre aux développeurs de mettre en œuvre facilement et rapidement des visualisations de données telles que des graphiques et des diagrammes. Pour ce faire, Flitter propose deux fonctionnalités principales.
1. Écriture de code déclaratif à l'aide de widgets : Flitter adopte un modèle de programmation déclaratif, permettant aux développeurs d'exprimer les éléments visuels souhaités de manière simple et intuitive. Cette approche applique à la visualisation de données un paradigme largement accepté dans les frameworks Web modernes tels que React. 2. Calcul de mise en page avancé : Dans la visualisation de données, un calcul précis de la mise en page et du positionnement est crucial. Flitter automatise des calculs de mise en page complexes, tels que la déduction de la largeur du texte, permettant aux développeurs de se concentrer sur le développement de logiques plus importantes.
Quand Flitter est-il nécessaire ?
Flitter est particulièrement adapté aux projets où les exigences de visualisation de données sont complexes ou lorsqu'il est nécessaire de mettre en œuvre rapidement des graphiques ou des diagrammes simples. De plus, il offre une syntaxe et une structure très familières aux développeurs ayant une expérience de Flutter, ce qui permet de maximiser les synergies entre les plateformes Web et mobiles.
Principales mises à jour et améliorations
Nouvelles fonctionnalités
Amélioration de la prise en charge de SSRLa version 1.0.0 a considérablement amélioré la prise en charge de SSR (Server-Side Rendering). Les versions précédentes dépendaient parfois de dépendances Node.js spécifiques, mais ces dépendances ont été supprimées, ce qui permet à Flitter de fonctionner de manière stable dans divers environnements tels que Vercel ou Cloudflare. Les développeurs peuvent ainsi intégrer plus facilement Flitter à leurs projets, sans être liés à un framework particulier.
Fonctionnalité GuestureDetector amélioréeFlitter offre désormais un effet de propagation des événements correspondant à l'arborescence des widgets. Cela permet un contrôle plus précis des interactions utilisateur et offre aux développeurs une plus grande flexibilité dans la mise en œuvre d'interactions complexes.
Ajout du widget ZIndexJusqu'à présent, SVG ne prenait pas en charge directement l'attribut z-index. Flitter 1.0.0 contourne cette limitation grâce au widget ZIndex, permettant aux développeurs de contrôler clairement la priorité des couches verticales des éléments.
Améliorations des performances
Flitter a considérablement amélioré la vitesse du premier rendu des diagrammes et les performances d'interaction. L'accent a été mis sur l'optimisation des performances, notamment en réduisant la vitesse de rendu des diagrammes complexes de 140 ms à 30 ms.
Lorsqu'une modification d'état se produit dans une même pile d'appels, elle est traitée par lots afin de réduire le nombre de re-rendus.
Corrections de bogues majeures
Correction d'un problème qui empêchait le re-rendu lors de l'appel de setState à l'intérieur d'un gestionnaire d'événements enregistré avec addPostFrameCallback().
Correction d'un problème qui entraînait une hauteur différente de celle du parent lors de la définition de la hauteur à 100% dans l'implémentation de la réactivité du navigateur.
Exemples d'utilisation et documentation
React
Pour utiliser Flitter avec React, veuillez installer les deux packages suivants :
L'importation de Widget depuis flitter-react permet d'utiliser facilement Flitter dans un environnement React.
Vous trouverez une documentation détaillée et des exemples d'utilisation pour démarrer avec Flitter sur le site officiel de documentation. Vous y trouverez diverses informations, allant des bases d'utilisation de Flitter aux fonctionnalités avancées.
Communauté et contribution
La communauté Flitter communique activement via GitHub et Discord. Les développeurs peuvent proposer des fonctionnalités ou signaler des bogues directement sur GitHub, et le canal Discord permet de partager des idées et des expériences concernant Flitter. Tous les contributeurs jouent un rôle essentiel dans la croissance du projet Flitter.
Projets futurs et vision
À court terme, Flitter se concentrera sur la correction des bogues et l'amélioration des performances. À long terme, l'objectif est de développer une meilleure expérience SSR et des fonctionnalités supplémentaires pour la visualisation de données. La vision ultime de Flitter est de révolutionner l'accessibilité de la visualisation de données dans l'écosystème du développement Web en fournissant une solution intégrée et évolutive.