Lorsque l’on parle de programmation informatique, de code ou de développement web, on n’est pas toujours très familier avec le jargon technique. Pourtant, certaines expressions reviennent régulièrement : “frontend” et “backend” en font partie. On entend de plus en plus ces deux termes, mais finalement… Qu'est-ce que c'est ? Qu'est-ce que ça représente et à quoi ça sert ?
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 (vous) voit, et le back, 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”* : on va pouvoir cliquer sur des liens, faire défiler la page de haut en bas avec notre souris, 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.
*Selon Futura Sciences, l’interface utilisateur représente l'ensemble des mécanismes, matériels ou logiciels, qui permettent à un utilisateur d'interagir avec un système informatique.
La partie backend d’un site web
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’utilsateur 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 design d’une page web et le travail UX/UI derrière un site ou une application web, consultez notre article : Le guide du débutant : quelles différences entre UX/UI ?
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 internet, 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 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 de mon backend.
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.
Nous pourrions faire le même parallèle avec les envois chronopost 24h et les performances de traitement d’un site par exemple.
Frontend, Backend : 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.
On s’arrête là pour aujourd’hui, vous avez déjà compris beaucoup de choses. Pour plus de détails, je vous invite à visionner le replay de notre Wild Talk dédié "Frontend vs Backend".
Je reviendrai plus en détail sur les langages dans mon prochain article. 😉
À très vite !
Pour aller plus loin…
Cet article vous a plu et a éveillé votre curiosité tech ? On vous propose des ressources gratuites qui correspondent à vos situations et profils respectifs :
➡️ Vous avez envie de plonger dans l’univers du développement web ? Suivez notre cours prépa Développeur web 100% en ligne et totalement gratuit.
➡️ 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é : Qu’est-ce qu’un framework ?
➡️ 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 ?
- Formation développeur fullstack
- Formation développeur front-end
- Formation développeur web et mobile avancé en alternance
