TradFood — Étude de cas

TradFood est une plateforme en ligne, qui permet de découvrir ou de redécouvrir les recettes les plus emblématiques du terroir bordelais. Le site propose un panel de recettes traditionnelles qui font la richesse gastronomique de la région de Bordeaux.

Cet article est directement lié à la page concernant ce projet, disponible sur mon portfolio : https://bastienrobert.fr/tradfood.

Problématiques

Durant le développement, j’ai été confronté à plusieurs problématiques :

  • Quelles sont les meilleures technologies pour rendre la navigation plus fluide et plus rapide ?
  • Comment rendre le site plus ergonomique, accessible et cohérent ?

Fonctionnalités

  • API : TradFood dispose d’une API REST qui permet de récupérer : la liste des villes, une ville et ses recettes ou simplement une recette
  • Recherche filtrée : il est possible pour le visiteur de trier les recettes par niveau de difficulté ou de type de plat
  • Print : bien entendu, il est possible d’imprimer une recette grâce au CSS adapté au print

Au niveau des technos

TradFood est découpé en 2 applications :

  • la première, réalisée en Ruby on Rails, chargée de la partie back-end
  • la seconde est réalisée avec le boilerplate VueJS « Bourgeon » (écrit par Ray Franco)

L’API construite avec Rails permet de récupérer et de traiter les informations pour les injecter dans le DOM de l’application VueJS. Le fait de charger le contenu en asynchrone améliore les performances et réduit la durée d’affichage de la page.

L’avantage de VueJS ?

L’avantage est conséquent quant à la durée de chargement du site. Alors que sur l’ancienne version réalisée intégralement avec Ruby on Rails, le chargement prenait près de 3 secondes, il dure aujourd’hui 1 seconde grâce au passage à VueJS.

L’ancienne version — Pur rails
La nouvelle version — VueJS + Rails API

Voici par exemple ce qui est retourné par l’API (générée par Rails avec JBuilder) lorsque la recette de l’emblématique cannelé est sélectionnée :

Vous noterez la présence de caractères étranges : des \r\n, des tirets… Il s’agit en fait de markdown mais nous y reviendrons plus tard.

VueJS, à travers la librairie Vue-Resource, récupère tout ce tableau JSON puis l’injecte dans une variable d’instance qui sera ensuite exploitable à l’intérieur de notre composant :

Et voilà ! Notre variable d’instance recipe contient désormais notre objet qui stocke la recette du cannelé. Il est désormais possible de récupérer les caractéristiques de la recette dans notre composant VueJS : son nom (recipe.name) ou les ingrédients qui la composent (recipe.ingredients).

Le traitement du Markdown

Le principal problème dans l’écriture de cette application à été de choisir la manière de stocker certaines informations, pour rendre la mise en page plus simple. J’ai choisi d’écrire les ingrédients et la recette intégralement en markdown afin de rendre la mise en page plus simple.

J’ai donc dû développer un filtre, spécifique à VueJS, qui est en réalité une “fonction de mise en forme” :

Cette fonction permet de convertir en HTML une chaîne de caractères écrite en markdown.

Trier des recettes

La possibilité de sélectionner les recettes par type de plat ou par niveau de difficulté est une fonctionnalité incontournable d’une application comme TradFood.

Le code suivant permet de répondre à ce besoin :

La méthode sort mappe l’ensemble des recettes et les envoie à la méthode filter qui :

  • vérifie que les paramètres de la recette correspondent bien à ceux de la recherche
  • retourne un booléen indiquant si la recette doit être retenue

Si le booléen est valorisé à “true”, la recette est stockée dans le tableau qui sera ensuite envoyé vers le DOM pour affichage.

Les recettes de la page d’accueil

Les recettes de la page d’accueil sont sélectionnées de deux manières :

  • dans la section des “Tendances”, les recettes sont mappées par le même procédé que lors du tri, mais seules les recettes “highlight” sont conservées. Deux d’entre elles sont ensuite choisies au hasard pour être affichées.
  • dans la section “Recettes à l’affiche”, six recettes sont choisies aléatoirement parmi toutes celles qui sont stockées dans le tableau des recettes.

Pour choisir aléatoirement les recettes, j’ai écrit la méthode suivante :

Conclusion

Différents défis techniques se sont posés pendant le développement de la seconde version de TradFood. L’utilisation de VueJS et d’une API REST créée sur la base de l’ancienne version de l’application a permis d’accélérer la navigation de TradFood de 300% tout en la rendant plus agréable pour le visiteur.

Grâce à ce projet j’ai :

  • Appris à créer une API REST
  • Amélioré mes compétences en VueJS
  • Appris à utiliser Vue Resource pour communiquer avec l’API
  • Appris à utiliser Stylus et Rupture