Tablein - un front-end React sur un back-end Drupal
React est fantastique pour créer des applications frontend extrêmement rapides et élégantes. Il est idéal pour construire des interfaces utilisateur pour des backends complexes et intensifs en données. Dans cet article, je vais montrer comment nous avons utilisé React pour développer une application moderne pour un système Drupal 7.
TableIn est un système de gestion des réservations de restaurants utilisé par des clients dans le monde entier. Le système central a été construit sur Drupal 7 et sert les clients avec un grand succès. Initialement, TableIn est venu à nous pour notre service de support Drupal. Très vite, il s'est avéré qu'ils avaient des exigences supplémentaires. En plus d'étendre l'application de réservation, nous avons été chargés de créer un portail séparé pour les clients finaux - les visiteurs des restaurants utilisant TableIn. Le portail a été conçu pour permettre aux gens de trouver des restaurants et de réserver des tables en ligne sans avoir besoin de contacter le restaurant par téléphone.
Nous savions immédiatement qu'utiliser Drupal développement seul ne nous permettrait pas de construire le type d'application avec laquelle les utilisateurs tomberaient amoureux. Étant un CMS rendu par le serveur, Drupal ne permet pas une interface utilisateur rapide et élégante qu'une application de réservation moderne nécessite. Les gens réservent souvent des restaurants sur leur téléphone, donc une application frontend en JavaScript est beaucoup plus adaptée pour cela qu'une application rendue en backend.
Nous avons proposé d'utiliser React, l'équipe TableIn a dit "oui".
Nous avons choisi React pour le travail. React a été notre choix parce qu'il est vraiment génial pour construire des applications frontend rapides. Il est particulièrement rapide pour gérer de grandes listes, ce qui était le cas ici, où nous avons beaucoup de restaurants à gérer.
Ayant travaillé avec TableIn depuis un certain temps maintenant, nous savions également que la première phase ne serait qu'un début. Le portail devait être construit de manière à permettre une croissance future en termes de taille et de nouvelles fonctionnalités. L'approche basée sur les composants de React convient parfaitement à cet objectif.
Créer un frontend Drupal découplé sur React avec communication REST
Pour permettre à Drupal et React de communiquer, nous avons dû créer des points de terminaison API sur Drupal qui renverraient
- des données sur les restaurants - photos, noms, descriptions, tags et catégories
- les horaires d'ouverture et la disponibilité des tables.
D'autre part, l'API devait également nous permettre de sauvegarder les réservations des utilisateurs effectuées dans le navigateur de retour dans le système.
Le support des API REST dans Drupal est vraiment solide et REST est vraiment léger et populaire. C'est pourquoi nous l'avons choisi. Drupal nous a permis de construire des APIs REST pour tout ce que nous voulions et cette partie du travail s'est déroulée assez facilement.
Les problèmes sont apparus là où ils surviennent généralement avec un grand système Drupal - les performances.
API Drupal et cache
Nous savons tous que Drupal est excellent pour servir du contenu mis en cache. Malheureusement, dans le secteur des réservations de restaurants, des données précises et opportunes sont essentielles. Nous devons garder la disponibilité vraiment à jour. Dans les périodes de pointe, comme le vendredi soir ou la Saint-Valentin, les restaurants très fréquentés peuvent recevoir de nombreuses réservations par minute. Si nous montraitons des données obsolètes avec des tables "disponibles" qui en réalité sont déjà réservées, cela serait un véritable frein pour les utilisateurs.
Puis, il y a la taille de l'application et le volume des réservations passant par l'application. Drupal n'est pas conçu pour servir des données non mises en cache. De telles requêtes causent beaucoup de requêtes à la base de données. Lorsque vous multipliez cela par des milliers de réservations et de recherches effectuées par les utilisateurs, le problème devient évident.
Il nous a fallu un certain temps pour développer une stratégie correcte de mise en cache, d'indexation et de requêtes qui permettrait des réponses suffisamment rapides pour que l'application de réservation soit utilisable tout en gardant les données actuelles. À mesure que le système et le nombre d'utilisateurs grandissent, nous continuons également à améliorer les performances, éliminant les goulots d'étranglement pour permettre une belle expérience utilisateur.
Application React multilingue et multi-pays
Lorsque les APIs étaient prêtes, nous avons commencé à créer le portail lui-même. Notre équipe technique a mis en œuvre les magnifiques designs fournis par l'équipe toujours talentueuse de TableIn.
La phase initiale était de créer simplement une page de recherche avec des résultats, mais nous avons vraiment rapidement ajouté la page d'accueil.
TableIn est une entreprise vraiment agile, travaillant de manière très agile. Ce n'est qu'une fois que les pages ci-dessus se sont avérées réussies qu'elles ont conçu et demandé que nous développions les pages spécifiques aux restaurants avec des galeries d'images et des avis.
Les résultats jusqu'à présent sont impressionnants. Le portail reçoit beaucoup de trafic et le nombre de réservations augmente de jour en jour. Des fonctionnalités supplémentaires et des plans sont déjà en cours. Grâce à une bonne planification et à l'utilisation de React, nous sommes certains que nous serons en mesure de diriger le portail dans toutes les directions que l'équipe de TableIn souhaite.
