💡 Cet article est la suite de l’introduction au développement web frontend. Si vous ne l’avez pas encore lu, je vous le recommande vivement ! ☝🏾

Le Backend ou côté serveur d’une application Web est l’entité qui en coulisse alimente le fonctionnement de l’application.

Quand j’ai commencé à apprendre le développement web, j’étais très hésitant à travailler sur le backend. Des mots comme: serveurs, points de terminaison et schémas m’effrayaient. Comment les temps ont changé. 😎

Représentation précise du frontend par rapport au backend

En tirant des enseignements de mes expériences passées, je vais essayer de présenter et d’expliquer des concepts importants et des technologies que j’ai appris pour devenir un développeur backend. À la fin de cet article, vous devrez avoir une bonne compréhension de la façon dont le backend d’une application est fait et quels mécanismes et outils sont disponibles pour aider votre carrière de développeur backend à décoller.

HTTP & REST

L’HyperText Transfer Protocol (HTTP) est le protocole qui nous permet d’envoyer des documents sur le Web. Dans ce protocole, il existe deux rôles: client et serveur. Le client demande une ressource au serveur et le serveur répond avec la ressource. (un peu comme dans un restaurant 👨🏾‍🍳)

Le framework REST, construit au dessus du protocole HTTP, nous permet d’organiser les interactions entre systèmes indépendants (comme client-serveur). Le client transmet au serveur qu’il souhaite effectuer une action en envoyant des requêtes. Les demandes suivent un modèle défini (pattern); ils sont constitués d’un verbe: les headers décrivant le message, le corps et une URL permettant d’identifier la ressource. Chaque verbe HTTP transmet au serveur ce qu’il faut faire avec les données identifiées par l’URL :

  • GET pour récupérer une ressource
  • POST pour créer une ressource
  • PUT pour mettre à jour une ressource
  • DELETE pour supprimer une ressource

Par exemple, lorsqu’un utilisateur veut visiter http://thegalsengeek.com, son navigateur envoie une requête GET demandant la ressource (la page Web). Le serveur répond en envoyant le code HTML de cette page au navigateur. Dans ce scénario, le navigateur agit en tant que client et le site Web agit en tant que serveur. De même, chaque interaction de l’utilisateur comme un clic sur le bouton de connexion ou l’utilisation de la barre de recherche pour rechercher une expression particulière peut déclencher une requête au serveur et le serveur répond de manière appropriée. Les données renvoyées au client ne doivent pas être limitées au HTML – ce pourrait aussi être JSON. Voici un excellent tutoriel pour en savoir plus sur REST et le protocole HTTP.

Notre bon vieux diagramme client-serveur et requête-réponse

Les langages backend

Maintenant que nous avons une bonne compréhension du «cycle demande-réponse», nous passons du côté serveur. Nous devons programmer le serveur pour qu’il puisse gérer les requêtes envoyées par le client. En supposant que vous ayez une bonne compréhension du développement de frontend, un bon langage backend pour commencer est Node.js. Node.js permet à JavaScript d’être utilisé pour les scripts côté serveur, ce qui nous permet de contrôler dynamiquement le contenu de nos applications Web.

L’environnement de Node implique l’utilisation de packages — des morceaux de code qui exécutent une fonction spécifique. npm est le gestionnaire de paquets le plus populaire pour JavaScript. Dans l’article précédent, j’ai brièvement présenté le concept de framework. Et si vous ne l’aviez pas déjà deviné, il existe un framework d’application web pour Node.js appelé Express. Il est minimal, possède une excellente documentation et constitue un framework de référence pour le développement d’applications Web.

Place à la pratique. Nous sommes prêts à coder notre premier projet backend! Assurez-vous que Node et NPM sont installés. Vous pouvez vérifier en tapant node -v et npm -v dans votre terminal et en vous assurant qu’un numéro de version est imprimé. Ensuite, exécutez les commandes suivantes dans le terminal:

  • mkdir first-node-project  pour créer un nouveau dossier suivi de cd first-node-project pour changer dans le répertoire que nous venons de créer
  • npm init pour initialiser un nouveau projet Node. Vous rencontrerez une série de questions, répondez-les comme bon vous semble ou ignorez-les si vous n’êtes pas sûr.🤷🏾‍♂️
  • npm install express pour installer le package Express
  • Créez un nouveau fichier appelé index.js dans lequel vous mettrez le code suivant:
const express = require('express');

const PORT = 3000;
var app = express();

app.use(express.static('public'));

app.get('/', (request, response) => {
  response.render('index.html');
});

app.listen(PORT);

Parcourons le code ligne par ligne:

  • Ligne 1: Nous incluons d’abord le paquet express en utilisant require('express'), ce qui nous permet d’utiliser les fonctionnalités fournies par Express.
  • Ligne 3: Nous spécifions un numéro de port pour notre serveur à écouter.
  • Ligne 4: Nous créons une application en invoquant la fonction express().
  • Ligne 6: Nous disons à Express que nos fichiers statiques sont stockés dans le répertoire public.
  • Lignes 8-10: Ce bloc de code peut sembler confus au début mais devient plus facile une fois que nous l’avons décomposé. Nous disons à notre serveur d’écouter sur le port 3000 pour les demandes et si nous recevons une requête GET /, nous programmons le serveur pour envoyer le fichier index.html comme réponse. Votre structure de dossiers devrait ressembler à ceci:
first-node-project
|-- node_modules
|-- package.json
|-- index.js
|-- public
    |-- index.html
  • Pour que votre premier serveur Web prenne vie, exécutez: node index.js dans votre terminal dans le même répertoire et visitez http://localhost:3000 dans votre navigateur. Félicitations, vous venez de créer votre première application web Node! 🎉🎊

Les bases de données

Une base de données est une collection organisée de données et forme le composant de stockage de notre application Web. Le domaine des bases de données est si intense qu’il nécessiterait ses propres articles juste pour brosser la surface. Dans l’intérêt de garder cet article court et vous donner une image plus saine, je vais passer les détails et vous laisser explorer plus sur les bases de données. Le cours gratuit Introduction aux bases de données de Stanford est un excellent point de départ pour les débutants. Pour l’instant, gardons cette idée à l’esprit — Les bases de données nous permettent de stocker et de récupérer des informations.

Voyons comment les bases de données peuvent être utilisées dans le monde réel. Imaginez que nous construisons un réseau social similaire à Facebook. Nous pouvons utiliser des bases de données pour stocker les informations de chaque utilisateur. Lorsque nous visitons le profil d’un ami, le serveur Web demande au serveur de base de données les détails de votre ami. Si la demande est autorisée, le serveur de base de données répond avec les données appropriées qui sont ensuite transmises au frontend et affichées en conséquence.

Pour les projets secondaires sur lesquels je travaille, je commence à utiliser MongoDB, une base de données NoSQL qui stocke des données sous la forme de documents de type JSON. J’utilise Mongoose.js comme tampon autour de MongoDB; afin de n’utiliser que du JavasScript. Si vous préférez utiliser des interfaces graphiques pour la ligne de commande, checkez Robo 3T (anciennement Robomongo), une interface graphique pour MongoDB.

Infos utiles

Le cours The Complete Node.js Developer d’Andrew Mead (2e édition) est un excellent cours pour en apprendre davantage sur Node, les bases de données et les composants supplémentaires comme les tests et la sécurité. Voici quelques outils utiles pour les développeurs plus expérimentés —

  • Git: Git est un système de contrôle de version qui vous permet de mettre en œuvre un développement continu. Ceci est particulièrement utile lorsque vous travaillez en équipe et que vous souhaitez suivre les modifications apportées au code. Suivez ce tutoriel pour en savoir plus sur Git.
    GitHub est l’application web la plus populaire pour gérer les dépôts Git.
    Astuce Pro: Si vous êtes un étudiant, inscrivez-vous au pack développeur étudiant GitHub et recevez des tonnes de produits.
  • Postman: Postman est une chaîne d’outils à interface graphique qui facilite le développement d’API. C’est un excellent outil de test et dispose d’un large éventail de fonctionnalités.
  • Heroku: Heroku est une plateforme SAS qui vous permet de déployer vos applications Web sur le cloud pour que le monde puisse les utiliser. Ils ont une formule gratuite et je vous recommande fortement de lire la documentation afin de vous familiariser avec le produit.

Feuille de route du développeur backend

Si vous observez la feuille de route, vous auriez remarqué qu’il y a quelques domaines dont je n’ai pas parlé simplement à cause de l’étendue du champ! Il est très facile de se perdre en essayant de naviguer dans ce domaine et c’est pourquoi je recommande fortement de renforcer les bases avant de passer à un nouveau concept. Je publierai bientôt des articles sur la sécurité Web (attaques, mesures d’atténuation et meilleures pratiques de sécurité). Restez à l’écoute !

#TheGalsenGeek🇸🇳👨🏾‍💻

Partagez cet article: