Quel backend choisir pour les projets React que vous construisez ?
Il y a tellement d’options différentes parmi lesquelles choisir, comment savoir si le backend que vous choisissez est le bon ?
Dans ce guide, vous apprendrez à choisir le backend approprié pour le type d’application React que vous réalisez de la manière la plus simple et la moins coûteuse possible.
C’est parti !
Vous voulez connaître le meilleur moyen de créer de superbes applications React ? Créez 4 applications React prêtes pour la production en partant de zéro avec le React Bootcamp
.
Mon application a-t-elle besoin d’un backend ?
En tant que développeurs React, la construction de notre projet se concentre largement sur ce que l’utilisateur voit, ce que l’on appelle le frontend.
Dans chaque projet React, nous gérons les données sur le client à travers l’état et les interactions de l’utilisateur. Cependant, de nombreuses apps ne sont pas possibles sans les données qui proviennent du backend.
Le backend se charge d’obtenir ou de mettre à jour les données dans notre application et il est caché à l’utilisateur.
La plupart des backends se composent de deux parties :
- Un endroit pour stocker nos données (souvent une base de données)
- Une méthode pour récupérer les données (souvent une API)
Mais voici la bonne nouvelle : en fonction du type d’application que vous réalisez, vous n’aurez peut-être besoin d’aucune des deux.
Étape 1 : Pas de backend
Si vous créez une application dont les données changent très rarement, vous n’avez probablement pas besoin d’une base de données ou d’une API.
Par exemple, si vous créez un blog personnel que vous mettez à jour au mieux quelques fois par semaine et qui est construit comme un site statique à l’aide de Next.js ou Gatsby, vous n’avez pas besoin de backend.
Au lieu de cela, vous pouvez simplement écrire vos articles de blog sous forme de fichiers markdown, qui sont stockés et suivis (à l’aide de Git) dans un dossier de projet.
Si vous avez une application de commerce électronique où les données sur les produits changent rarement, vous pouvez stocker toutes les données de l’application dans des fichiers JSON que vous importez et utilisez simplement dans votre application React.
Si la mise à jour manuelle des fichiers et le redéploiement de votre projet vous conviennent, c’est peut-être tout ce dont vous avez besoin.
Le type de backend que vous choisissez dépend de certaines caractéristiques clés de vos données que vous devez vous demander :
- Mes données changent-elles souvent ?
- Est-ce que je peux gérer mes données comme des fichiers et des dossiers locaux ?
- Les données ou les fichiers de mon application peuvent-ils être suivis dans le contrôle de version (Git) ?
- D’autres personnes vont-elles mettre à jour les données ?
- Mon application nécessitera-t-elle une authentification ?
En fonction de vos réponses à ces questions, vous pourrez peut-être vous en sortir en utilisant des fichiers statiques comme source de données.
En choisissant cette voie, vous économiserez beaucoup d’argent sur les coûts de base de données et d’hébergement, puisque les sites statiques peuvent être hébergés sur un niveau gratuit de nombreux fournisseurs d’hébergement.
Étape 2 : Systèmes de gestion de contenu
Si vous avez besoin de plus de fonctionnalités que celles offertes par les fichiers statiques, les systèmes de gestion de contenu constituent l’étape suivante
Lessystèmes de gestion de contenu ou (CMS) nous donnent des outils pour gérer plus facilement notre contenu. Ils nous donnent souvent des applications dédiées avec des éditeurs intégrés pour visualiser, mettre à jour et structurer plus facilement nos données.
Ce dont nous avons spécifiquement besoin pour notre application React est un CMS sans tête.
Un CMS sans tête n’a pas d’interface visible, puisque React servira d’interface utilisateur pour notre application.
Un CMS est idéal pour votre application si vous avez simplement trop de données à gérer sous forme de fichiers séparés ou si vous souhaitez que d’autres utilisateurs potentiellement non techniques puissent modifier ou ajouter du contenu à votre application.
Parmi les CMS les plus simples, on trouve des feuilles de type Excel comme Google Sheets et Airtable, ainsi que des applications de prise de notes comme Notion.
L’avantage de ces solutions est qu’elles sont faciles à utiliser, qu’elles ont un généreux niveau de gratuité et qu’elles disposent de leur propre API intégrée pour récupérer des données.
Il existe d’autres CMS qui offrent des fonctionnalités conviviales pour les développeurs, telles que la gestion des images et des ressources multimédias, ainsi que des fonctionnalités API plus étendues.
Voici quelques-uns des CMS les plus conviviaux pour les développeurs :
Et si vous recherchez les systèmes de gestion de contenu les plus puissants, avec des fonctionnalités comme l’authentification intégrée et la mise à jour des données depuis votre client React, consultez :
Étape 3 : Backend as a Service
La limite des systèmes de gestion de contenu est qu’ils sont excellents pour gérer et accéder aux données.
Cependant, lorsque vous devez ajouter des fonctionnalités plus complexes et personnalisées, telles que la mise à jour des données à partir de votre client React, l’authentification des utilisateurs, la protection du contenu et les données en temps réel, un CMS standard est insuffisant.
Gérer une base de données et construire une API complète pour interagir avec cette base de données est un défi de taille, surtout si vous n’avez travaillé que sur le frontend.
Si c’est le cas pour vous, il peut être intéressant d’envisager un backend as a service (BaaS). Vous bénéficierez ainsi de toute la puissance d’un backend personnalisé, sans les connaissances spécifiques au domaine.
Le BaaS le plus populaire est Firebase, et pour une bonne raison. Il vous offre une tonne de fonctionnalités que vous ne pourriez tout simplement pas construire vous-même, notamment des dizaines de stratégies d’authentification, des bases de données NoSQL en temps réel, un stockage en nuage, des outils d’apprentissage automatique, et bien plus encore.
Il existe de nombreux autres BaaS qui vous offrent la productivité de Firebase, avec peu ou pas de code requis :
Mise en garde: la vitesse de développement de tous les services peut vous aider à construire et à expédier vos applications plus rapidement. Mais sachez qu’ils ont tous leurs propres coûts associés, comme le stockage en nuage que vous utilisez et le nombre d’opérations de base de données que vous effectuez (lectures/écritures).
Étape 4 : Créez votre propre backend
Avant d’envisager cette étape, vous devez examiner attentivement si vous pouvez potentiellement utiliser les options 1 à 3.
Il s’agit de l’option la plus avancée à choisir en tant que développeur React, car elle nécessite le plus de connaissances, de temps et de compétences de codage.
Ceci étant dit, c’est aussi la plus personnalisable, car vous pouvez construire exactement ce dont vous avez besoin pour alimenter votre application.
Des livres entiers ont été écrits sur des parties seulement de la construction de votre propre backend, mais voici ce que je recommanderais en tant que personne qui a construit de nombreuses applications de production en utilisant un backend personnalisé.
Je recommande d’utiliser une base de données SQL telle que Postgres ou MySQL. Des services tels que Heroku, Render.com et PlanetScale proposent des bases de données hébergées (souvent avec des sauvegardes quotidiennes gratuites) à des prix intéressants.
À moins que vous ne soyez très à l’aise et confiant dans l’écriture d’instructions SQL brutes et que vous connaissiez toutes les précautions de sécurité à prendre pour éviter des choses désagréables comme l’injection SQL, utilisez un mappeur objet relationnel (un ORM) pour créer un schéma de base de données et interagir avec lui.
Je vous recommande vivement d’utiliser Prisma comme ORM. Il génère tout le code nécessaire pour effectuer chaque type d’opération sur votre base de données ainsi que les types pour chacune d’entre elles.
Bien que vous puissiez certainement construire un backend Node personnalisé en utilisant votre bibliothèque ou framework Node préféré (Express, Fastify, Nest.js), je vous conseille de commencer petit et d’utiliser une fonctionnalité comme les routes API de Next.js.
Des outils comme les routes API de Next vous permettent de construire rapidement votre API sans avoir besoin d’exécuter et de gérer votre code serveur dans un dépôt séparé.
Vous voulez créer des applications React étonnantes ?
Si vous recherchez un guide complet pour créer vos propres projets React prêts à être mis en production, consultez l’article suivant Bootcamp React.
Il vous donnera toute la formation dont vous avez besoin pour :
- Passez du statut de débutant absolu à celui de professionnel de React en seulement 30 minutes par jour
- Créez 4 projets React complets, du début jusqu’au déploiement
- Apprenez un ensemble de technologies puissantes pour créer n’importe quelle application, notamment Hasura, Apollo et Material UI
Cliquez pour rejoindre le React Bootcamp
