Lorsqu'on se lance dans le vaste monde du développement web, on peut rapidement être submergé par une multitude de termes techniques, chacun ayant son propre rôle et sa propre importance dans la création d'un site web ou d'une application en ligne. Deux de ces termes essentiels sont "frontend" et "backend". Mais qu'est-ce que ces termes signifient réellement et en quoi sont-ils cruciaux pour le développement web ? Dans cet article, on explore en profondeur les concepts de frontend et backend, ainsi que leur rôle dans la création d'applications web modernes.
J’ai pris l’habitude d’expliquer ces termes dès le premier jour à mes élèves lorsqu'ils se lancent dans le domaine du développement web. Aujourd’hui, c’est à votre tour ! Je vous explique leur rôle, leurs fonctionnalités, et bien plus encore.
Il y a du frontend et du backend partout
Dans le domaine du développement informatique, on développe des “applications”.
Ces applications peuvent prendre la forme d’un site web (exemple : le site de la Wild Code School), d’une application web (le Google Drive), d’une application mobile (Waze).
Pour fonctionner, un site web ou une application mobile a très souvent besoin de ce que l'on appelle dans le jargon de la tech “une partie backend” (ou back-end) et “une partie frontend” (ou front-end). On peut lire sur différentes ressources, “le front, c'est ce que l'utilisateur final voit et avec lequel il interagit (également appelé "côté client") et le back (qu'on appelle aussi "côté serveur"), c'est ce que l'on ne voit pas”, mais qu'est-ce que cela veut dire ?
Frontend vs Backend : une définition simplifiée
Pour mieux comprendre ces deux notions, éloignons-nous des termes techniques pendant un instant et prenons un exemple de la vie de tous les jours : les services postaux.
Imaginons la situation suivante : je dois envoyer une lettre à une entreprise, et cette entreprise devra me faire un courrier en retour afin d’apporter une réponse à ma demande.
Dans cet exemple, la lettre que je dois envoyer représente ma recherche d’information sur un site internet (ou application web).
Nous allons maintenant décomposer les différentes actions qui découlent de l’envoi de ma lettre et toutes les étapes nécessaires depuis son envoi jusqu’à la réception de la réponse de l’entreprise à ma demande.
Plusieurs acteurs seront impliqués au fil des étapes :
- le facteur
- la boîte aux lettres
- le centre de tri
- le guichet
- les tiroirs dans lesquels sont rangés le courrier
- le courrier
Décomposons maintenant les étapes du processus :
Lorsque j’envoie ma lettre par la poste, toutes les interactions physiques que je vais avoir tant que le courrier est entre mes mains représentent la partie frontend de l’entreprise.
A contrario, toute la partie acheminement et traitement de mon courrier (dans laquelle je ne suis pas directement impliqué) représente la partie backend de l’entreprise.
Maintenant, vous devriez mieux comprendre la phrase que l’on citait plus haut : le front, c’est ce que l’on voit, et le back, c’est ce que l’on ne voit pas. Je vois mon courrier lorsque je le poste, je vois la boîte aux lettres, je vois le facteur, cela représente la partie frontend, mais lorsque mon courrier est trié, stocké, en phase d’acheminement, etc… et bien je ne le vois pas, cela représente la partie backend de l’organisation.
Où trouver le frontend et le backend sur une application ou un site web ?
Les mêmes concepts se retrouvent dans le cycle de vie d’un site web ou d’une application :
La partie frontend d’un site web
Lorsque l’on atterrit sur la page d’un site et/ou d’une application web, on peut directement interagir avec ce que l’on appelle "l’interface utilisateur” (ndlr : ensemble des mécanismes, matériels ou logiciels, qui permettent à un utilisateur d'interagir avec un système informatique) : on va pouvoir cliquer sur des liens, scroller la page de haut en bas, remplir des formulaires, naviguer entre les onglets... Toutes ces actions effectuées par l’utilisateur représentent une interaction directe de l’homme à la machine. Et toute cette partie visuelle, c’est le frontend.
La partie backend d’un site web : les coulisses de l'application
Une fois que l’on a cliqué quelque part, cette action de “clic” est perçue comme une demande par le site ou l’application, qui va donc travailler en autonomie : la “demande” envoyée par l’utilisateur est reçue par le site ou l’application, qui va chercher l’information demandée, et va la renvoyer à l’utilisateur. Et ça, c’est le backend.
Par exemple, un utilisateur veut s’abonner à la newsletter d’un site. Pour se faire, il se dirige sur l’onglet “Newsletter” et clique dessus. Cette action de “clic” va alors soumettre la demande suivante : “rediriger l’utilisateur vers la page newsletter du site”. Une fois reçue et analysée par le site, ce dernier va renvoyer à l’utilisateur la réponse attendue - qui est ici : aller sur la page newsletter.
En résumé, le backend, c’est toute la partie que l’utilisateur ne voit pas, mais qui lui permet de réaliser des actions sur un site ou une application.
Et une fois que le backend a renvoyé l’information, je peux de nouveau la consulter et interagir avec, je suis de nouveau sur le frontend. Et si tout s’est bien déroulé, j’ai donc témoigné d’une expérience utilisateur réussie !
POUR EN APPRENDRE PLUS SUR L'EXPÉRIENCE UTILISATEUR
➡️ Le guide du débutant : quelles différences entre UX/UI ?
Et pour aller encore plus loin dans la comparaison…
Si on voulait aller encore plus loin, on pourrait parler de sécurisation ou de performance.
De la même façon que La Poste dispose de différents services pour accompagner l’envoi de ma lettre (recommandé, colissimo en 24h, etc…) qui représentent des cheminements un peu différents sur la partie “back” du processus; sur mon site web, je peux varier les performances et la sécurisation de mes actions via une programmation un peu différente.
Dans une application par exemple, vous avez bien souvent la possibilité de vous enregistrer sur le site en saisissant une adresse e-mail et un mot de passe, pour ensuite accéder à un espace privé et personnalisé. D’un côté, le remplissage du formulaire représente le frontend : vous visualisez l’action. De l’autre côté, la sécurisation de votre compte représente la partie back : vous ne pouvez pas percevoir, visuellement, que votre compte est protégé. Et pourtant, c’est bien le cas. Tout se fait en backend.
LES RESPONSABILITÉS du backend
Les responsabilités du backend sont variées et cruciales pour le bon fonctionnement d'une application. Voici quelques-unes de ses principales tâches :
- Gestion de la base de données
Le backend est responsable du stockage et de la récupération des données à partir de la base de données. Cela inclut la création, la modification et la suppression des données selon les besoins de l'application. - Gestion des utilisateurs et de l'authentification
Le backend gère l'authentification des utilisateurs, ce qui garantit que seules les personnes autorisées peuvent accéder à certaines parties de l'application. Il gère également les sessions utilisateur, les mots de passe chiffrés et d'autres aspects liés à la sécurité. - Logique métier
Toute la logique métier de l'application est gérée par le backend. Cela inclut les calculs, les opérations complexes et les règles spécifiques à l'application. - Traitement des requêtes
Le backend reçoit et traite les requêtes provenant du frontend. Il détermine comment répondre à ces requêtes et renvoie les données nécessaires au frontend pour affichage. - Gestion des performances et de la scalabilité
Le backend doit être optimisé pour garantir des performances élevées, même lorsque de nombreux utilisateurs accèdent simultanément à l'application. Cela peut impliquer des stratégies de mise en cache, d'optimisation de la base de données et de gestion des ressources serveur.
Frontend et Backend : Une Collaboration Essentielle
On se rend bien compte ici que ces deux facettes d’un site web ou d’une application mobile sont essentielles (au même titre que le centre de tri et le facteur dans les services postaux). L’un ne peut aller sans l’autre et, comme dans les services postaux, ce n’est pas la même personne qui distribue le courrier et qui trie ce dernier.
De la même façon, lorsque l’on lance un projet qui nécessite le développement d’une application ou d’un site, nous avons besoin d’un développeur “front” et d’un développeur “back”, ou alors d’un développeur fullstack (c’est un développeur qui a des compétences frontend et backend, et qui justifie donc d’une certaine expertise dans le domaine du développement).
et les langages de programmation dans tout ça ?
L’entreprise La Poste vous permet d’envoyer vos courriers, mais vous pourriez également choisir une autre entreprise (DHL, Fedex, etc…). Chacun possède ses propres services, ses méthodes en front et en back.
Et bien dans le développement, c’est pareil ! Mais on appellera cela des langages.
Par exemple, pour développer en backend, vous pouvez utiliser PHP, Java, Ruby, etc… En revanche, pour développer la partie frontend, on se dirigera essentiellement sur du JavaScript, HTML ou CSS.
Pour plus de détails, je vous invite à visionner le replay de notre Wild Talk dédié "Frontend vs Backend".
Pour aller plus loin…
Cet article vous a plu et a éveillé votre curiosité tech ?
➡️ Vous vous questionnez sur le travail effectué par un développeur ? Consultez notre fiche métier Développeur web.
➡️ Vous souhaitez découvrir ce que sont les frameworks ? Rendez-vous sur notre article dédié.
➡️ Vous vous demandez quelle est la différence entre Java et Javascript ? On vous a concocté un article sur-mesure.
➡️ Vous voulez rejoindre une de nos formations en développement web ? Découvrez notre formation Développeur web en bootcamp ou en alternance.
