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 lieu de vente 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.Mise à jour du 17 janvier 2022 : en fait si c’est décidé, nous changeons de CMS, donc le projet FreeDatas2HTML va vraiment nous être utile.

Mais j’ai estimé qu’un script lisant un fichier CSV pour permettre d’afficher et filtrer des données pourrait ê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 ! » :)

Le résultat est 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 ». Plusieurs exemples d’utilisation sont présents dans le répertoire « public », mais il vous faudra lancer un serveur local pour le voir fonctionner. Pour vous simplifier la vie, vous pouvez visiter le site de démonstration.

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. Dans le cas de données JSON, c’est plus simple, car pris en charge nativement par JavaScript. Idem quand les données se trouvent dans la page HTML.
• Tous les champs de la source de données ne sont pas forcément affichées et l’ordre dans lequel ils sont affichés peut être différent de celui de la source de données.
• 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. En option, cette liste peut avoir l’attribut multiple pour filtrer les données correspondant à au moins une des valeurs sélectionnées dans la liste.
• Un moteur de recherche peut être ajouté pour permettre de filtrer les données d’une façon plus libre et sur plusieurs champs.
• Il faut évidemment ensuite recharger l’affichage des données suivant les options sélectionnées par l’utilisateur dans les listes ou sa saisie dans le moteur de recherche.
• 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.
• Enfin on peut 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 peu de temps avant de m’attaquer à ce projet 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’agit aussi de pouvoir recevoir des données dans d’autres formats que le CSV, par exemple en JSON. J’ai aussi ajouté la possibilité de paginer les résultats et choisir les champs à afficher et dans quel ordre. Mon principe a été de garder tout en option, le script de base se contentant de « bêtement » lister les données.

Cela m’a demandé 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.
Même si ce n’est pas sa vocation première, FreeDatas2HTML peut sans doute vous permettre de le faire côté serveur, si vous utilisez node.js.
Sinon il vous faut développer votre solution en PHP, Python… ou autre langage que vous utilisez. C’est ce que je compte faire pour le site de la monnaie locale à l’origine de ce projet.
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 sérieusement.

Pour finir, si vous avez besoin d’aide pour l’intégration de FreeDatas2HTML à votre projet, n’hésitez pas à me contacter pour obtenir un devis.

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