C'est quoi la différence entre le frontend et le backend ?

Cet article est l'épisode 3 de la mini-série "Comment fonctionne une web-application".

Tu n'as pas lu les premiers articles ?

• Comment on communique sur le web
• C'est quoi le frontend ?

Si tu n'es pas à l'aise avec les concepts, je te conseille de lire les épisodes dans l'ordre 😊.

Et sinon,

let's goooo ! 💥

Une app c'est comme un restaurant

On va prendre l'image d'un restaurant histoire d'illustrer les choses bien concrètement.

Disons que dans ce restaurant Corse, 'A cucina', il y a Sébastien au service, et Laura à la cuisine. Détail important: tu ne peux  jamais communiquer directement avec la cuisine.

Quand tu vas chez 'A cucina', tu peux:

• lire le menu sur la carte
• passer commande auprès de Sébastien
• puis Sébastien transmet la commande à Laura

Ensuite en cuisine:

• Laura reçoit ta commande
• Elle réunit les ingrédients et prépare ton plat
• Elle pose le plat terminé sur la desserte

Et Sébastien peut alors t'amener ton plat !

Quand on transpose à la technique c'est exactement ce qui se passe. Sébastien c'est le frontend, et Laura c'est le backend.

En résumé:

En tant que user tu interagis toujours avec le frontend, jamais directement avec le backend.

Le frontend c'est l'interface qui te permet:

• d'afficher des informations ( page web, images, fiche produit, message d'erreur en provenance du serveur...)
• d'envoyer des informations au backend ( s'inscrire à une newsletter, créer un compte, commander un produit, envoyer un message ... )

Le backend c'est ce qui fait le travail derrière:

• t'envoyer un email, une notification
• enregistrer ta commande, ton compte, tes messages.

Pourquoi on a besoin du frontend:

Pour comprendre la différence entre le frontend et le backend il faut se rappeler qu'en tant qu'humains on ne peux pas communiquer directement avec une machine.

Les humains parlent un langage, les machines parlent un autre. Donc faut se mettre d'accord sur un moyen de communiquer sinon on va pas avancer.

Le moyen de mettre en place la communication entre l'humain et la machine c'est ce qu'on appelle une interface. Son petit nom technique pas inclusif c'est "interface homme - machine". On l'appelle aussi interface utilisateur, ou user interface ( UI ).

La user interface est donc compréhensible à la fois par l'humain et par la machine.

Cette user interface c'est le frontend, qui te permet de communiquer avec le backend.

Une autre différence majeure entre le frontend et le backend, c'est le lieu d'éxécution du code.

Le code du frontend est exécuté sur ta machine

Et, oui on l'a vu dans le dernier article sur le frontend, quand on va sur une page web on télécharge du code javascript, grâce au navigateur.

Et le code du frontend est exécuté sur notre "device", on dit "en local", grâce au navigateur.

Par exemple lorsque tu vas sur Linkedin et que tu es déjà connecté, cela signifie que le frontend de Linkedin a enregistré sur ton ordinateur des informations de connection, pour pas que tu aies à les réécrire dans le formulaire de login.

Le code du backend est exécuté sur le serveur du site

A l'inverse, le code du backend tu ne le télécharges jamais sur ton ordinateur. Il est exécuté sur le serveur du site. On reviendra dessus en détail dans les articles qui suivent !

Article suivant:

C’est quoi une API ?

Cet article est le 4ème de la mini-série “Comment fonctionne une application web”. Tu n’as pas lu les premiers articles ? * Comment on communique sur le web * C’est quoi le frontend * La différence entre le frontend et le backend Si tu n’es pas à l’aise avec les concepts, je te conseille

Decode - by TancrèdeTancrède Simonin