Présentation de freeDatas2HTML

Présentation de freeDatas2HTML, projet permettant d’afficher, filtrer, paginer… des données sur une page HTML, directement en JavaScript côté client. Si vous souhaitez accéder au code, il vous suffit de cliquer ici pour vous rendre sur le dépôt Git.

Un tableu de données (SCAD, CC BY-SA 4.0, via Wikimedia Commons)

Le problème à l’origine de cette « solution »

J’ai créé il y a plusieurs années le site de la monnaie locale du Pays de Lorient en utilisant le CMS Drupal. C’est un CMS assez flexible, mais pas forcément très simple à prendre en main. En discutant avec un autre développeur qui s’occupe de maintenir ce site, nous avons pensé nous réorienter vers une solution plus simple. Peut-être PluXML que j’utilise pour ce blog. Cependant, une fonctionnalité importante pour un site de monnaie locale est de pouvoir trouver la liste des entreprises acceptant ce moyen de paiement, idéalement en pouvant filtrer la liste par ville et/ou domaine d’activités. Nous avons parlé de la possibilité d’une simple page HTML qui recevrait les données déjà présentes dans une feuille de calcul servant à gérer l’association. Il suffirait de l’exporter dans un fichier CSV pour pouvoir l’« attaquer » plus facilement en JavaScript, qu’on s’est dit.

Aucune décision n’a été prise à ce jour, car migrer d’un CMS à un autre demande toujours un certain travail. Mais j'ai estimé qu’un script lisant un fichier CSV pour permettre d’afficher et filtrer des données pourraient être utile dans d’autres projets. Par ailleurs, après vCarousel, je cherchais un nouveau projet pour mettre en pratique mes connaissances récentes en TypeScript, ainsi que les tests automatisés via karma.js et jasmine.js.

Parser et afficher un fichier CSV avec TypeScript/JavaScript

Je me suis donc attaqué à ce projet qui s’est révélé effectivement très didactique. Le mode strict de TypeScript et les tests en asynchrones m’ont donné du fil à retordre, mais comme dit le proverbe : « Hacker veillant, rien d’impossible ! » :)

Une première version « jouable » est dors-et-déjà disponible sur le dépôt GIT du projet. Le répertoire « src » contient le code source en TypeScript, une version compilée en JavaScript étant présente dans le sous-répertoire « build ». Il y a aussi un exemple simple d’utilisation dans le répertoire « public », mais il vous faudra lancer un serveur local pour le voir fonctionner. Pour vous simplifier la vie, vous pouvez voir le résultat ici.

Dans ses grandes lignes, le script est assez simple :

  • Il commence par vérifier les données que vous lui fournissez, notamment l’existence des éléments HTML où il devra afficher les données et les éventuelles listes permettant de les filtrer.
  • Ensuite, il faut évidemment tenter de se connecter au fichier CSV et si tout se passe bien, parser ses données. Pour ce point, j’ai utilisé Papa Parse, qui semble bien faire le job.
  • Ensuite, si des filtres sont demandés, il faut vérifier si les numéros de colonnes fournis existent vraiment dans le fichier de données. Si oui, on liste les valeurs distinctes présentes dans la colonne et les classe pour ordre alphabétique. Une liste de type « select » est créée dans la page pour chacune des colonnes demandées.
  • Il faut évidemment ensuite recharger l’affichage des données suivant les options sélectionnées par l’utilisateur dans les listes.
  • Il est également possible de proposer de classer les données via certaines colonnes fournies en option. Pour un classement plus naturel, j'ai installé natural-orderby qui fait très bien le job :) Il est possible de fournir ses propres fonctions de classement.
  • Il est également possible de paginer les résultats en proposant éventuellement différentes valeurs de pagination à l'utilisateur final.

Élargissement du projet initial

Il se trouve que j’ai découvert il y a peu l’outil Datatable.net qui est un plugin de jQuery proposant des fonctionnalités très proches, si ce n’est que par défaut il se base sur des données déjà présentes dans la page.

Cela m’a donné envie d’élargir mon projet initial pour permettre d’utiliser des données présentes dans la page HTML ou encore localement dans le script. Il s’agira aussi de pouvoir recevoir des données dans d’autres formats que le CSV, par exemple en JSON. Je pense aussi reprendre la possibilité de paginer les résultats et peut-être d’autres fonctionnalités. Mon principe sera de garder tout en option, le script de base se contentant de « bêtement » lister les données.

Cela va me demander de remanier mon code, en créant des classes séparées pour les diverses fonctionnalités. Ce sont des bonnes pratiques habituelles de développement, mais par forcément à respecter pour un mini-projet comme celui de départ.

Mais pourquoi réinventer la roue ?

Puisque Datatable.net existe déjà et que je ne prétends par faire quelque chose d’aussi complet, on pourrait se demander pourquoi je réinvente la roue ?
Au-delà de l’aspect didactique pour moi, je pense ne pas être le seul à ne pas être un fan de jQuery… et les goûts et les couleurs, cela ne se discute pas ! :)
De plus, le résultat de mon développement sera forcément différent et pourra mieux convenir au besoin d’autres personnes.

Non négligeable, le projet se nomme freeDatas2HTML et non openDatas2HTML, qui signale que je propose le logiciel sous licence libre (GPL) et non « open source ». C’est une chose à prendre en compte, si vous souhaitez l’utiliser. Les droits et surtout les « devoirs » ne sont pas les mêmes.

Ici, on fait travailler le client !

Si jQuery ne convient pas à tous, le JavaScript, notamment côté client, à aussi ses détracteurs, même quand le code est libre.
Pour des raisons d’accessibilité, ou même plus égoïstement de référencement naturel, il semble nécessaire de lister directement les données « en dur » dans la page, sans attendre le chargement en JavaScript.
Dans l’avenir freeDatas2HTML vous permettra sans doute de le faire côté serveur, si vous utilisez node.js.
Sinon il vous faudra développer votre solution en PHP, Python… ou autre langage que vous utilisez.
Il reste aussi possible de copier manuellement un tableau dans votre page HTML, notamment si vous optez pour un site 100 % statique.

Au passage, le fait d’utiliser du code client pour gérer le filtre, la pagination, etc. présente l’avantage d’éviter d’appeler régulièrement le serveur de votre site.
Cela peut être intéressant si vous avez de nombreux visiteurs et peu de ressources derrière… car c’est le « client » qui fait tout le boulot ! C’est pas beau, ça ? :)
En évitant les accès serveur intempestifs, cela peut aussi être une bonne pratique d’écoconception logicielle (« green code », qu’on dit), encore qu’il faudrait mesurer cela plus sérieusement.

Affaire à suivre…

Il reste beaucoup de chose à faire et ce projet s’annonce plus ambitieux que la bidouille prévue initialement.
Je viendrai régulièrement mettre à jour cet article.
Vous pouvez aussi vous inscrire sur Gitea pour suivre le projet.

Illustration article : SCAD, CC BY-SA 4.0, via Wikimedia Commons.