Frontend vs. backend pour les non-techniciens

Comme dans de nombreuses branches, il existe dans le développement web des termes techniques qui ne sont pas immédiatement compréhensibles pour les personnes extérieures. Lorsque vous entendez front-end/back-end, vous ne savez pas ce qu’est exactement l’avant ou l’arrière ? En bref, le frontend et le backend sont les deux faces d’une application. On peut se représenter cela comme une visite au restaurant. Le frontend est la salle de restaurant, il s’occupe de la présentation (donc de tout ce que l’utilisateur voit). Le backend est la cuisine, il s’occupe du fonctionnement en arrière-plan (donc du traitement et du stockage des données).

Frontend – tout ce que l'utilisateur voit et avec lequel il interagit

L’œil mange aussi : dans notre métaphore du restaurant, il englobe toute l’expérience d’une visite au restaurant pour le client. Non seulement la nourriture (que l’on espère délicieuse), mais aussi la manière dont elle est présentée, l’ambiance dans la salle de restaurant, de la couleur des murs au confort de la chaise en passant par la présentation du menu.

Lorsque vous vous trouvez sur un site web ou une application, que vous cliquez sur des boutons, remplissez des formulaires ou aimez des images : tout ce que vous voyez ou avec lequel vous interagissez constitue le frontend.

Le terme frontend se réfère donc à la présentation des contenus, à l’interface utilisateur d’un site web/d’une application. C’est l’équilibre entre créativité et logique, une combinaison de design et de programmation, qui donne vie au site en question. Il ne s’agit pas seulement d’habiller le tout d’une jolie robe ou d’assurer uniquement un fonctionnement techniquement irréprochable, l’interaction est décisive. La mise en page doit s’adapter aux différentes tailles d’écran (responsive layout, elle doit être conviviale et intuitive, informative, réactive et bien plus encore).

Backend – tout ce qui se passe en arrière-plan

Dans un restaurant, suivons le menu jusqu’à sa source : la cuisine.
Le backend reste invisible pour l’utilisateur, comme la cuisine du restaurant, mais il joue un rôle important, tout tourne autour de la fonction. Il se compose généralement de trois parties : Le serveur, l’application et la base de données. Un serveur n’est en principe rien de plus qu’un ordinateur qui stocke et traite des données. On peut s’imaginer une base de données comme un tableau Excel qui trie et stocke les données en fonction de certaines caractéristiques telles que le nom, l’e-mail, etc. Alors que les utilisateurs interagissent avec le front-end du site web, l’application assure la communication avec la base de données via Internet.

Tout comme la cuisine d’un restaurant prépare tous les plats du menu, le backend met à disposition toutes les fonctions nécessaires à votre site web. Une telle fonction peut être, par exemple, l’enregistrement des données de connexion ou l’intégration d’une API (Application Programming Interface). Une API permet à différents composants logiciels de communiquer entre eux. Ainsi, l’API de Google Maps permet par exemple de demander des descriptions d’itinéraires et de les intégrer sur son propre site web.

Interaction entre le front-end et le back-end

Au final, dans un restaurant, ni la cuisine ni la salle de restaurant ne fonctionnent seules, il faut une interaction. Le développement du front-end et du back-end travaillent main dans la main. Le front-end reprend les données fournies par le back-end et les présente de manière conviviale. Inversement, le backend traite et enregistre les actions effectuées par l’utilisateur sur le front-end. Un exemple concret d’une telle action serait par exemple une recherche d’adresse. L’utilisateur tape un nom dans un champ de recherche, les adresses correspondantes sont généralement affichées en dessous comme résultat de recherche. La logique (recherche d’adresses dans la base de données, renvoi des résultats possibles) relève de la compétence du backend, la présentation de la mise en page (aspect/emplacement du champ de recherche et des résultats de recherche) de celle du front-end.

Retour