Lors de l’optimisation de vos sites et de vos applications Web afin d’en améliorer les performances, une des premières choses que vous devriez faire est de “déplacer” la charge de traitement des données côté serveur vers le client.
Vous trouverez un certain nombre de moyens simples pour y parvenir, par exemple, vous pouvez le faire en JavaScript à l’aide de simple framework tel que Backbone.js où encore Spine.js.
Non seulement ils fournissent un grand nombre de fonctionnalités, mais ils sont aussi compacts (respectivement 3.9kb et 2K, lors de la compression). Pour l’installation, c’est juste une question de copier les sources Javascript. Il n’est donc pas nécessaire d’installer un logiciel de script côté serveur ou quoique ce soit d’autres.
Autre optimisation possible lorsque vous devez manipuler des données CSV est d’essayer csonv.js et voir comment cette petite bibliothèque JavaScript peut récupérer les données relationnelles au format CSV côté client et les transformer en JSON.
Depuis qu’il a été inventé, rendu lisible par l’homme, et soutenu par de nombreux acteurs du Web, JSON est la nouvelle pépite des nouveaux formats pour le transport des données. Malheureusement, de nombreux systèmes n’exposent pas une API JSON. Le format CSV est souvent privilégié lors de la représentation de données relationnelles.
C’est ainsi que Paul Engel a introduit csonv.js rendant ainsi un format côté client beaucoup convivial pour nous, développeur.
Pour vous prouvez de son efficacité je vous propose l’exemple ci-après. La première étape est d’inclure csonv.js :
<script src="path/to/csonv.js" type="text/javascript"></script>
[/sourcecode]
Ensuite, nous allons héberger le fichier CSV suivant sur le serveur :
id;title;author;publication;edition
integer;strings;strings;strings;string
1;Stratégie de contenu web;Erin Kissane;juillet 2011;Eyrolles
2;Google Panda Comprendre analyser agir;Olivier Andrieu;juillet 2011;Eyrolles
3;Sécurité informatique;Laurent Bloch, Christophe Wolfhugel;juin 2011;Eyrolles
4;Ajax,jQuery et PHP;Jean-Marie Defrance;juin 2011;Eyrolles
[/sourcecode]
Note : Votre fichier CSV doit satisfaire quelques conditions. Pour cela, reportez-vous à la documentation de la bibliothèque.
L’utilisation de csonv.js permet de transformer cette source relationnelle en JSON. Deux séparateurs sont utilisés dans la librairie :
-
Csonv.separators.column(par défaut : “;”) : Utilisé pour séparer les colonnes -
Csonv.separators.array(par défaut : “,”) : Utilisé pour séparer les valeurs du tableau
Note : Bien entendu vous pouvez changer les séparateurs en les assignant en JavaScript.
Afin de récupérer les données CSV en tant qu’objets, utilisez la commande suivante :
<script>
var books = Csonv.fetch("books.csv");
</script>
[/sourcecode]
Une fois les séparateurs initialisés et ayant récupéré les données CSV en tant qu’objets, exécutez la méthode JSON.stringify(books, null, 2). Vous devriez obtenir la chaîne JSON suivante :
[
{
"id": 1,
"title": [
"Stratégie de contenu web"
],
"author": [
"Erin Kissane"
],
"publication": [
"juillet 2011"
],
"edition": "Eyrolles"
},
{
"id": 2,
"title": [
"Google Panda Comprendre analyser agir"
],
"author": [
"Olivier Andrieu"
],
"publication": [
"juillet 2011"
],
"edition": "Eyrolles"
},
{
"id": 3,
"title": [
"Sécurité informatique"
],
"author": [
"Laurent Bloch",
" Christophe Wolfhugel"
],
"publication": [
"juin 2011"
],
"edition": "Eyrolles"
},
{
"id": 4,
"title": [
"Ajax",
"jQuery et PHP"
],
"author": [
"Jean-Marie Defrance"
],
"publication": [
"juin 2011"
],
"edition": "Eyrolles"
}
]
[/sourcecode]
C’est simple non ?
Je vous propose de compléter la découverte du projets sur GitHub et ainsi obtenir la liste complète des fonctionnalités et des informations d’utilisation de la librairie.
Qu’en pensez-vous ? Allez-vous l’utiliser dans vos propres projets ?
