(Ré-)apprendre les bases du backend

Dans cet article, nous allons (ré)apprendre les bases du développement backend en construisant un serveur web minimaliste qui affiche le contenu d’une base de données minimaliste dans le navigateur en utilisant NodeJS, KnexJS et SQLite3.

Je suis développeuse frontend depuis un certain temps. Depuis presque une décennie, pour être précise. Et quand je dis frontend, c’est frontend. Au cours de ma carrière, j’ai acquis des connaissances utiles sur les tâches CI, les pipelines de déploiement et autres outils de ce genre. Mais deux jours avant d’écrire ces lignes, la dernière fois que j’avais vu une ligne de SQL remontait à mes études, il y a une douzaine d’années. Et soyons clairs : je ne suis pas la développeuse le plus passionnée de la planète, je ne code pas le dimanche, donc les situations et problèmes que je rencontre se limitent généralement à ce à quoi mon travail me confronte. Pourtant, j’ai des idées de projets et, parfois, j’ai envie de les concrétiser. L’un de ces projets m’a amenée à (ré)apprendre les bases du développement backend : gérer une petite base de données et construire une API pour mon frontend. J’ai écrit cet article pour partager le résultat de mon exploration et mes astuces.

Prérequis #

Pour tirer pleinement profit de cet article, il vous faut :

• Avoir une connaissance basique de l’architecture des applications.

• Être à l’aise avec l’outil de ligne de commande (terminal) de votre système d’exploitation.

• Avoir des notions de base en SQL (Ne pas en avoir écrit une ligne en 10 ans ne pose pas de problème, tant que vous vous souvenez de ce que c’est).

• Avoir des notions de base en JavaScript.

Définition des “bases” #

Aussi différentes les unes des autres que soient les applications web, et aussi variées soient les services qu’elles proposent, les blocs fonctionnels principaux restent les mêmes :

• La base de données est l’ensemble des fichiers contenant les données liées aux ressources de votre application. Par exemple, la liste de tous vos utilisateurs et leurs données de profil.

• Pour accéder et modifier la base de données, vous devez utiliser un serveur de base de données ou un moteur de base de données, et lui envoyer des requêtes en SQL.

• Le serveur web (ou serveur backend) est le serveur qui reçoit et traite les requêtes du frontend. C’est une application backend, qui peut être complexe, organisée, testée, avoir des dépendances, etc.

• Le constructeur de requêtes est une dépendance du serveur web. Il fournit une API pour communiquer avec le serveur de base de données. Vous devez choisir un constructeur de requêtes compatible avec votre serveur web. Par exemple, si vous utilisez NodeJS, votre backend sera une application JavaScript, donc vous devrez choisir un constructeur de requêtes JavaScript.

Une fois tous ces blocs en place dans votre environnement local, vous disposez d’une application web minimaliste qui stocke et récupère vos données de test.

C’est ce que nous allons faire dans les sections suivantes. Nous allons afficher le contenu d’une table de base de données dans le navigateur. Avant de passer à la pratique, voyons le point difficile qui m’a encouragé à écrire un article à ce sujet.

Les docs sont ok, mais lier les docs entre elles, c’est dur #

Les bibliothèques et outils open source sont généralement documentés (le but de créer une bibliothèque est d’encourager les gens à l’utiliser), et c’est une bonne chose. Le problème se pose plutôt lorsqu’on doit lier ces documentations entre elles. Comme les bibliothèques sont souvent intégrables dans diverses stacks technologiques, leur documentation se concentre généralement sur leur fonction spécifique, sans fournir beaucoup de détails sur le contexte. Ça se comprend, mais ça rend aussi la vie plus difficile lorsqu’on essaye de réaliser quelque chose en dehors de son domaine d’expertise.

Prenons par exemple la documentation de KnexJS.

KnexJS est un constructeur de requêtes JavaScript. Voici les options de configuration : https://knexjs.org/guide/#configuration-options. D’accord, donc pour commencer à utiliser KnexJS, vous devez probablement écrire ces options quelque part. Voici la documentation pour envoyer une requête de sélection au moteur de base de données : https://KnexJSjs.org/guide/query-builder.html#KnexJS. Donc, si vous voulez sélectionner le contenu d’une table de base de données, vous devez probablement écrire ce genre de ligne quelque part. Mais la question est…

Où ? La documentation de KnexJS documente KnexJS. Vous n’avez aucune idée de l’endroit où vous devez écrire ces lignes, ça dépend de l’architecture de l’application backend.

En tant que développeuse, un des points les plus difficiles que j’ai rencontré dans ma carrière avec l’utilisation de la documentation a été de ne pas avoir de documentation sur la manière de lier les documentations entre elles. La documentation d’intégration existe, mais la plupart du temps, elle concerne des outils largement utilisés et payants. Par exemple, dans le guide Sentry : https://docs.sentry.io/platforms/javascript/, vous trouverez une série de “guides connexes” détaillant l’intégration de Sentry dans les principaux frameworks frontend.

Et c’est là que cet article devient (je l’espère) utile. Nous allons utiliser un serveur web (NodeJS), un constructeur de requêtes (KnexJS) et un moteur de base de données (SQLite3) pour créer un projet minimaliste et revenir aux bases du backend.

Commencez par les extrémités #

C’est sûrement l’un des meilleurs conseils que je vous donnerai jamais. Essayez de visualiser les blocs, dessinez le schéma d’architecture comme celui introduit quelques paragraphes plus haut, puis commencez par les extrémités. Si vous n’êtes pas familier avec l’exécution d’un serveur web localement, le constructeur de requêtes est déjà une étape trop loin. Si vous voulez comprendre l’API du constructeur de requêtes, commencez d’abord par comprendre comment travailler avec le moteur de base de données.

Pour préparer les étapes suivantes, créez un dossier de travail mon-premier-serveur et accédez-y via le terminal.

SQLite3 : le moteur de base de données #

Voici la documentation du moteur de base de données SQLite3 : https://www.sqlite.org/index.html. Très rétro. La raison pour laquelle je suggère SQLite3 pour un démarrage rapide est que votre base de données locale va être un simple fichier dans votre dossier de travail.

Téléchargez SQLite3. L’installation via Homebrew est disponible sur macOS : brew install sqlite3.

Pour faire les choses simplement, je vous suggère de consulter la page cli.html qui explique comment utiliser SQLite3 dans le terminal : https://sqlite.org/cli.html.

Suivez l’exemple, mais adaptez-le à l’application finale que vous avez en tête :

• ex1 est le nom du fichier de base de données qui sera créé dans votre dossier de travail. (J’ai appelé le mien reliuredb car “Reliure” est le nom de l’application sur laquelle je travaille.)

• Au lieu de tbl1(one text, two int), vous pourriez avoir quelque chose de plus significatif comme users(login text, name text).

• Et au lieu de values('hello!',10), vous pourriez avoir values('belette@gmail.com', 'Super Belette').

Ça me rappelle mes études en programmation.

En gros, lorsque vous utiliserez un constructeur de requêtes dans votre application backend, l’API correspondra au type de requêtes SQL que vous pouvez effectuer en utilisant le terminal.

NodeJS : le serveur web #

Concentrons-nous sur l’autre extrémité, le serveur. Un serveur s’exécute à un certain emplacement, identifié par une adresse (par exemple 127.0.0.1) et un port (par exemple 3000) :

Lorsque le serveur s’exécute localement, entrez l’adresse dans la barre d’URL de votre navigateur pour afficher les réponses du serveur dans le navigateur. En d’autres termes, vous n’avez même pas besoin de configurer une application frontend pour revenir aux bases du backend : vous pouvez tester la chaîne “serveur web backed <-> constructeur de requêtes <-> serveur de base de données <-> base de données” simplement en exécutant le serveur web backend :

Voici la page officielle de NodeJS : https://nodejs.org/fr/. Nous allons utiliser Node car c’est une solution simple si vous êtes dev frontend (et c’est ce que je suis).

Téléchargez NodeJS. L’installation via Homebrew est disponible sur macOS : brew install node.

Consultez le guide de démarrage : https://nodejs.org/fr/docs/guides/getting-started-guide/, qui est assez simple. Dans votre dossier de travail, faites exactement ceci : copiez-collez l’exemple dans un fichier app.js, exécutez node app.js dans votre outil en ligne de commande et visitez l’adresse dans votre navigateur pour voir le “Hello World”. Cet exemple basique enseigne quelques trucs :

• Le server créé avec http.createServer() est l’objet principal qui recevra une requête et retournera une réponse.

• Ce que le navigateur affiche est la réponse contenue dans res.end(). Donc, si nous voulons afficher le contenu de notre table de base de données dans le navigateur, nous devons le passer à cette fonction end().

• L’utilisation de console.log (comme dans server.listen()) imprime des messages dans le terminal (utile pour le débogage).

Et voilà. Nous avons un serveur backend minimaliste “Hello world” en cours d’exécution. L’étape suivante consiste à créer le lien entre ce serveur et le fichier de base de données que nous avons créé avec SQLite3. C’est le rôle du constructeur de requêtes. Mais pour importer un constructeur de requêtes, nous devons d’abord rendre notre application backend capable d’installer des dépendances externes. Pour l’instant, notre dossier de travail mon-premier-serveur contient uniquement le fichier de base de données et app.js. Transformons ce dossier en un véritable package géré par un gestionnaire de paquets. Dans cet exemple, utilisons npm :

npm init

Lorsque vous exécutez cette commande, on vous pose quelques questions pour configurer le package. À la fin du processus, un beau fichier package.json apparaît dans le dossier de travail. Maintenant, ça commence à ressembler à une vraie application ;)

KnexJS : le constructeur de requêtes #

Retournez à la documentation de KnexJS : https://knexjs.org/guide/, qui a été mentionnée dans les premières sections.

Comme notre application backend repose désormais sur un gestionnaire de paquets, nous pouvons suivre la documentation d’installation pour Node : https://knexjs.org/guide/. Dans notre cas, vous exécuterez :

npm install knex --save
npm install sqlite3

Puis suivez la documentation sur les options de configuration : https://knexjs.org/guide/#configuration-options. Essayez par vous-même et comparez votre résultat avec la solution ci-dessous :

// app.js

const http = require('http');

const knex = require('knex')({
  client: 'sqlite3',
  connection: {
    filename: 'reliuredb'
  },
  useNullAsDefault: true
});

// ...

const server = http.createServer(async (req, res) => {
  // ...
});

// ...

• knex est une constante que vous importez au début du fichier app.js.

• Le client est sqlite3 et connection.filename est le nom que vous avez choisi pour le fichier de base de données.

• useNullAsDefault: true est un flag qui permet d’éviter un avertissement lors de l’utilisation de l’API KnexJS pour accéder à notre base de données minimaliste.

L’étape suivante consiste à utiliser l’API KnexJS pour sélectionner la table de la base de données et afficher son contenu dans le navigateur. Une fois de plus, je vous encourage à essayer de le faire par vous-même. Voici une solution valide :

// app.js

// ...

const server = http.createServer(async (req, res) => {
  let users = await knex.select().from('users');
  console.log(users);

  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(JSON.stringify(users, null, 2));
});

// ...

• Un point peu clair (à mon avis) de la documentation de KnexJS est le fait que les fonctions sont asynchrones. En lisant plus loin, on voit dans la documentation des références à then(), ce qui donne une idée. Donc, dans l’exemple ci-dessus, j’ai défini le paramètre de la fonction comme async et utilisé le mot-clé await pour attendre les données de la table users.

• JSON.stringify me permet d’avoir un affichage indenté et lisible dans le navigateur : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify.

Relancez le serveur avec node app.js. Si tout se passe bien, vous devriez voir vos propres données de table dans le navigateur !

Mot de la fin #

Et voilà ! Nous avons construit un serveur web minimaliste capable d’accéder à une base de données, les bases mêmes du développement backend. Mon espoir est qu’avec ce petit projet en tête, la documentation des bibliothèques backend paraisse un peu moins obscure et que vous puissiez continuer à apprendre et à complexifier votre code par-dessus. C’est en tout cas ce que je me souhaite à moi-même =D