SVG et data binding

Cet article s'adresse à un public de développeurs.

Les frameworks et librairies qui traitent de la visualisation de la donnée pour les applications Web sont légions. Par exemple, si votre objectif est de produire des graphiques standards et propres de manière très productive une librairie comme chart.js peut être d'une grande aide. Si vous souhaitez produire une visualisation de donnée très riche, personnalisée et autonome, l'écosystème d3.js sera la boite à outil idéale.

Dans cet article nous parlerons d'une voie que nous explorons dans nos développements pour Koumoul. Elle n'a rien de révolutionnaire, mais est souvent délaissée. Il s'agit simplement d'utiliser le format svg directement comme partie intégrante de votre application de manière aussi peu différente que possible de vos contenus HTML dynamiques.

Une démonstration minimaliste de cette approche est disponible ici.

Pour qui ?

Cette voie peut vous intéresser si:

• La simplicité du livrable est une priorité. Attention à ne pas confondre simplicité et facilité, pour les courageux cette conférence sur le sujet est intéressante. Dans ce contexte par simplicité j'entends :
  • Faible volume du livrable
  • Maîtrise des dépendances
  • Uniformité des conventions de code
• Vos pratiques ou frameworks de développement vous permettent déjà de traiter le dynamisme dans vos applications Web de manière saine : Votre framework permet un data binding expressif et performant ? Vous êtes adepte des patterns modernes de flux de données unidirectionnels ?
• Vous voulez faire des choses qui soient parfaitement intégrées dans l'expérience utilisateur.
• Vous souhaitez minimiser les contraintes en perspective de l'amélioration continue de votre application.

Avec Vue.js

Si vous ne connaissez pas Vue.js mais que vous êtes familier d'autres frameworks de développement Web : imaginez les meilleurs éléments syntaxiques de Angular.js avec la puissance des concepts de l'écosystème React. Le tout très léger et cohérent. Nous sommes fans !

À sa manière ce framework traîte les mêmes questions que les autres outils récents de ce type:

• Clarté des flux des données et des événements dans l'application
• Découpage en composants aux contrats clairs
• Création de vues réactives et performantes

Toutes choses qu'il fera aussi bien pour des vues HTML que SVG.

Avec une boite à outils

Ne pas adopter de framework dédié à l'animation ne signifie pas tout faire à la main. Il s'agit de construire une boite à outil la plus légère possible et adaptée à vos besoins. Quelques exemples:

• TWEEN.js est un beau petit moteur pour modifier des valeurs dans le temps en suivant des fonctions de transition standards.
• color peut vous aider à gérer proprement la représentation colorée des données, dégradés, contrastes, etc.
• d3js est découpé finement en modules aux fonctionnalités propres. En particulier d3-scale est très pratique pour gérer les échelles de données, échantilloner, etc. Plus votre besoin est avancé plus vous adopterez une part grandissante de l'écosystème d3.