Article original : Frontend VS Backend – What's the Difference?
Au début de votre parcours de développement web, vous entendrez souvent parler des parties frontend et backend d'une application.
Mais que signifient exactement ces termes ?
Dans cet article, vous découvrirez les différences entre les deux en examinant le frontend et le backend séparément.
Voici ce que nous allons aborder :
Qu'est-ce que le Frontend ?
Le frontend est tout ce qu'un utilisateur voit et avec quoi il interagit lorsqu'il clique sur un lien ou tape une adresse web. L'adresse web est également connue sous le nom d'URL, ou Uniform Resource Locator, et elle indique quelle page web doit être chargée et apparaître dans votre navigateur.
C'est la partie client-side (côté client) d'une application web.
Par exemple, prenez cet article. Il y a une image de couverture associée, et vous êtes en train de lire le texte.
En haut de la page, vous pouvez également voir le logo de freeCodeCamp. Il y a une barre de navigation avec un lien vers le forum de freeCodeCamp et un bouton pour faire un don.
Il y a aussi un champ de recherche. Vous pouvez saisir un mot-clé pour rechercher un article sur un sujet qui vous intéresse.
Il y a un lien sur lequel cliquer, qui vous mènera à des leçons et des certifications qui vous aideront à apprendre à coder gratuitement.
Tout ce qui précède représente le frontend de la page web que vous consultez.
Quelles parties d'une application web sont considérées comme du frontend ?
Le frontend est tout ce qui est visuel et avec quoi un utilisateur entre en contact.
Ce sont toutes les parties avec lesquelles il interagit directement.
C'est l'ensemble du contenu et des styles.
Ce sont les boutons et les différents effets de survol (hover) avant qu'un utilisateur ne clique sur un lien.
Ce sont les formulaires de contact avec divers champs de saisie, les champs de recherche et les menus déroulants.
Les mises en page, le texte et les couleurs.
Ce sont les images et les vidéos.
Cependant, il ne s'agit pas seulement des styles.
C'est aussi la rapidité avec laquelle le site web se charge, la facilité avec laquelle on peut y naviguer et son accessibilité pour les personnes handicapées.
C'est son ergonomie et sa réactivité (responsivité) sur une variété d'appareils et de navigateurs différents.
Essentiellement, le frontend regroupe toutes les parties d'une application web qui créent son aspect et son ressenti (look and feel).
Pourquoi le frontend est-il important ?
Le frontend représente l'idée, la vision et le rêve d'une personne (ou d'une équipe) qui prend vie, disponible pour que le monde entier puisse le voir et en être témoin.
L'idée doit être représentée de la bonne manière et être visuellement attrayante. Ce sera le facteur déterminant de la façon dont les autres la percevront.
Une entreprise ou une organisation dont le site est difficile à utiliser et à parcourir, qui n'est pas beau et qui ne présente pas bien ses services, perdra des clients.
Les utilisateurs seront frustrés par le manque d'ergonomie, l'expérience utilisateur désagréable et l'absence d'un bon design. Ils finiront par chercher ailleurs ce qu'ils cherchaient et ne reviendront probablement plus sur ce site.
Quelles sont les tâches d'un développeur frontend ?
Les tâches qu'un développeur frontend accomplit au quotidien varient. Elles dépendront fortement de l'entreprise pour laquelle il travaille et de son rôle.
En tant que dev frontend, vous pouvez faire beaucoup de travail de design.
Cela pourrait être la création d'un guide de style pour instaurer des styles cohérents, l'identité de la marque, ainsi que son look et son image globale.
Cela inclut la typographie (polices) utilisée pour tout le texte, la palette de couleurs, le logo de l'entreprise et les mises en page, pour n'en citer que quelques-uns.
Vous pouvez travailler à la création d'interfaces utilisateur (UI) à l'aide d'outils de design pour vous assurer que le site web possède tous les éléments visuels nécessaires, affichés et organisés de manière agréable.
D'un autre côté, les développeurs frontend peuvent ne faire aucun travail de design.
Au lieu de cela, vous pourriez collaborer avec des chefs de projet, des graphistes et des designers UX/UI pour résoudre des problèmes.
You pourriez récupérer les visuels, les graphiques créés et les conclusions des recherches menées auprès des utilisateurs.
Vous connaîtriez déjà le public cible et la démographie, les problèmes courants des clients et les informations sur l'ergonomie du site pour les utilisateurs.
Ensuite, votre travail en tant que développeur frontend serait de traduire les prototypes et les designs visuels statiques en quelque chose de tangible, en un site web réel, pixel-perfect et fonctionnel avec lequel les utilisateurs peuvent facilement interagir.
En utilisant les technologies frontend, vous mettriez en œuvre les mises en page déjà conçues et construiriez tous les éléments visuels.
Une grande partie du travail d'un développeur frontend consiste à créer des sites web responsifs.
Vous devez vous assurer que les sites web ont une belle apparence, qu'ils s'affichent de manière optimale et qu'ils sont utilisables sur une variété d'appareils et de largeurs d'écran.
De nos jours, les utilisateurs n'utilisent plus seulement des ordinateurs de bureau, mais consultent les sites web principalement à partir d'appareils mobiles et de tablettes.
De plus, les développeurs frontend conçoivent et développent en gardant à l'esprit bon nombre des navigateurs les plus populaires et les plus utilisés.
Les sites web doivent être beaux et fonctionner de manière optimale sur tous les navigateurs.
C'est ici que la connaissance de votre public cible et de votre démographie entre en jeu et constitue une information vitale.
Selon votre service/produit et vos utilisateurs/clients, vous devrez peut-être développer en pensant à des navigateurs plus anciens ou plus modernes.
Une autre partie importante du travail d'un développeur frontend consiste à s'assurer que les sites web sont accessibles à tous les utilisateurs. Cela implique de créer des fonctions d'accessibilité web qui feraient de la navigation sur le web une expérience agréable pour tout le monde.
Les fonctionnalités d'accessibilité importantes qu'un développeur frontend peut mettre en œuvre sont :
- la synthèse vocale (text-to-speech)
- la navigation au clavier uniquement
- des combinaisons de couleurs accessibles avec un contraste suffisant
- de gros boutons
Les développeurs frontend travaillent également à l'amélioration des performances du site et du temps de chargement.
La majorité des utilisateurs s'impatientent et quittent le site si un site web met trop de temps à charger son contenu et ses images.
Améliorer le temps de chargement du site web, même de quelques secondes, fait une grande différence et permettra très probablement de fidéliser les utilisateurs.
Un autre aspect du rôle d'un développeur frontend est de concevoir et de créer des formulaires web utilisables.
Les formulaires web comblent le fossé de communication entre l'entreprise/organisation et les utilisateurs. Ils constituent un moyen facile pour les utilisateurs de poser des questions, de contacter le service client, de soumettre des données et de créer des comptes.
Un aperçu des outils et technologies frontend
En tant que développeur frontend, vous apprendrez constamment de nouvelles technologies, en fonction de ce qui est populaire à l'époque. Les technologies évoluent rapidement.
Cependant, les technologies frontend les plus fondamentales sont HTML, CSS et JavaScript.
Elles s'exécutent dans le navigateur de l'utilisateur et constituent la base de tous les sites web sur le World Wide Web.
Parlons un peu plus de ces technologies :
- HTML signifie HyperText Markup Language. Vous créez tout le contenu et la structure d'une page web à l'aide du HTML sémantique.
- CSS signifie Cascading Style Sheets. Le CSS stylise les éléments HTML. Il ajoute des couleurs, des polices, détermine la taille du texte et les mises en page des pages web.
- Vanilla JavaScript est la manière dont vous ajoutez de la fonctionnalité et de l'interactivité aux éléments. C'est ainsi que vous donnez aux pages web un comportement dynamique.
En plus de ces trois-là, il existe de nombreuses bibliothèques et frameworks frontend.
Ceux-ci aident à assurer la cohérence sur chaque page d'un site web et fournissent des fonctionnalités prêtes à l'emploi pour les tâches répétitives.
Certains des plus populaires sont :
- React
- Redux
- Vue
- Angular
Selon le rôle et la description du poste, vous pourriez avoir besoin de compétences en design.
Certains outils couramment utilisés pour le travail de design sont :
- Figma
- Sketch
- Adobe XD
- et Photoshop pour le traitement d'image
Le développement frontend est-il fait pour vous ?
Le développement frontend est une entreprise créative et artistique.
C'est un mélange d'art visuel et de programmation.
Une façon de décider si le développement frontend est fait pour vous est de vous demander si vous aimez voir les résultats visuels de votre dur labeur.
Il est possible de voir les résultats de votre création instantanément sur l'écran de votre ordinateur.
Une autre chose à considérer est de savoir si vous vous souciez profondément du fait que les utilisateurs bénéficient de la meilleure expérience utilisateur possible lorsqu'ils naviguent sur le web.
L'expérience utilisateur et la création de sites web utilisables constituent une grande partie du travail.
La seule façon de savoir si le développement frontend est la bonne voie pour vous est d'essayer.
Un excellent endroit pour commencer votre apprentissage est la Certification Responsive Web Design de freeCodeCamp, où vous apprendrez en construisant 20 projets et obtiendrez une certification à la fin.
Vous apprendrez le HTML et les techniques CSS modernes ainsi que les meilleures pratiques d'accessibilité. Vous apprendrez également à créer des pages web responsives qui s'adaptent à chaque taille d'écran.
Après la Certification Responsive Web Design, apprenez le langage de programmation JavaScript avec la Certification JavaScript Algorithms and Data Structures, où vous apprendrez comment rendre les pages web interactives.
Vous commencerez par les bases, en apprenant la syntaxe et les blocs de construction fondamentaux nécessaires qui vous permettront de progresser vers des sujets plus avancés tels que la programmation orientée objet (Object-Oriented Programming).
Qu'est-ce que le Backend ?
Le développement backend s'occupe des technologies responsables du stockage et de la manipulation sécurisée des données des utilisateurs.
C'est la partie associée à toute la logique cachée qui alimente les applications avec lesquelles les utilisateurs interagissent.
Le backend est considéré comme la partie server-side (côté serveur) d'une application.
Le backend regroupe tous les rouages cachés et les processus en coulisses d'une application web.
Il fait référence à tout ce qui se passe sous le capot et à tous les composants nécessaires qui permettent au frontend de fonctionner correctement et de manière fluide.
Il s'assure que tout fonctionne de manière optimale.
Essentiellement, le backend est ce à quoi les utilisateurs n'ont pas d'accès direct ou avec quoi ils n'interagissent pas directement, et dont ils ne sont probablement pas conscients lorsqu'ils utilisent une application.
Un aperçu du fonctionnement du backend pour les débutants
Le backend est responsable de la réception des requêtes d'un client.
Il traite la requête entrante et s'assure de récupérer les données appropriées associées au bon utilisateur.
Ensuite, il renvoie une réponse au client. Les données utilisateur nécessaires sont présentées visuellement de manière agréable, grâce au code frontend créé par un développeur frontend, au bon utilisateur qui y a accès.
Le backend se compose de :
- Le serveur, qui est un programme qui attend et écoute les requêtes entrantes du client. Il communique avec la base de données en soumettant des requêtes (queries). Lorsque la base de données répond avec des informations, le serveur récupère les données nécessaires correctes.
Il y parvient à l'aide d'une application s'exécutant sur le serveur qui contient la logique nécessaire pour rassembler les informations et les ressources demandées pour le bon utilisateur. Les scripts backend côté serveur, écrits dans un langage de programmation de script backend, sont responsables du traitement des requêtes.
Enfin, le serveur renvoie une réponse au client.
- La base de données, qui est comme le « cerveau » d'une application. Les bases de données sont des programmes utilisés pour organiser et stocker tous les actifs, le contenu et les informations d'une application de manière à ce qu'ils puissent être facilement consultés, récupérés, gérés et mis à jour.
Exemples de fonctionnalités backend
Prenons un exemple concret pour illustrer les différentes fonctionnalités backend disponibles sur les applications web modernes.
Supposons que vous soyez membre d'une plateforme d'abonnement payante à des séances d'entraînement.
Pour vous connecter :
- Vous devrez saisir votre adresse e-mail et votre mot de passe dans un champ de saisie utilisateur.
- Il y aurait des vérifications de validation de base à passer. Les validations garantissent que les champs de saisie requis ne sont pas vides et que l'adresse e-mail a le bon format.
- Ensuite, des vérifications sont effectuées pour voir si vous existez en tant qu'utilisateur dans la base de données en soumettant des requêtes (queries), afin de voir si votre adresse e-mail et votre mot de passe sont corrects. Il y aurait également des vérifications pour voir si l'adresse e-mail et le mot de passe que vous avez fournis correspondent à la combinaison e-mail et mot de passe stockée dans la base de données lors de la création de votre compte.
- Si l'e-mail et le mot de passe sont incorrects, vous verrez un message d'erreur indiquant que la combinaison n'existe pas.
- Si tout est correct, vous seriez dirigé vers votre page d'accueil, avec un indicateur visuel signalant votre connexion. Il pourrait s'agir d'un message de « Bienvenue » incluant votre nom ou votre nom d'utilisateur.
Pour choisir un entraînement :
- La base de données stocke toutes vos données brutes. Les entraînements déjà terminés sont stockés dans la base de données. Il en va de même pour ceux enregistrés dans une playlist que vous avez créée ou marqués comme favoris et que vous aimeriez revoir.
- Vous pouvez également consulter tous les entraînements disponibles et les filtrer pour n'afficher qu'une catégorie particulière. Par exemple, vous pourriez taper un mot-clé dans le champ de recherche tel que abdos, bras, bas du corps ou haut du corps. Une autre façon serait de choisir parmi l'une des catégories disponibles sur le site, telles que le yoga, les étirements, le HIIT ou la musculation. La base de données passera en revue chaque entraînement qui y est stocké, mais vous ne verrez que les résultats filtrés de la catégorie particulière que vous avez spécifiée dans votre recherche.
Pour payer l'abonnement :
- L'application serait capable d'accepter les informations de carte de crédit ou d'autres options de paiement et de stocker ces informations en toute sécurité dans la base de données.
- Elle mettrait également à jour le paiement au bon moment. Selon l'abonnement, il y aurait une mise à jour mensuelle ou annuelle récurrente, s'assurant que chaque fois elle retire le bon montant d'argent de votre carte.
Tout cela est géré par le backend d'une application.
Quelles sont les tâches d'un développeur backend ?
On peut dire sans risque que le rôle d'un développeur backend varie d'une entreprise à l'autre et d'un poste à l'autre.
L'objectif principal du travail d'un développeur backend est de créer et de maintenir des services et des programmes qui aident le frontend à fonctionner.
En général, voici quelques éléments sur lesquels un développeur backend travaillerait :
- Créer, gérer et maintenir le type de base de données que le produit/service utilise.
- Construire, interagir avec et maintenir des serveurs.
- Construire des fonctionnalités internes ou externes et des logiciels côté serveur à l'aide de technologies côté serveur et de frameworks web pour fournir des solutions aux problèmes.
- Travailler avec des API (Application Programming Interface). Concevoir, développer, mettre en œuvre, maintenir et gérer des API qui prennent en charge les opérations CRUD (Create Read Update Delete).
- Effectuer la validation des données pour s'assurer que les données ont le bon format avant d'être stockées dans la base de données.
- Les utilisateurs doivent interagir en toute sécurité avec leurs comptes. Les développeurs backend créent des systèmes qui sécurisent les données de chaque utilisateur - en particulier lorsqu'il s'agit de systèmes de traitement des paiements.
- Traiter avec des services tiers tels que l'authentification et les services de paiement externes, pour n'en citer que quelques-uns.
- Organiser la logique du système.
- Développer l'architecture du site.
Un aperçu des outils et technologies backend
Il existe différents outils et technologies que les développeurs backend utilisent au quotidien pour implémenter de la logique dans les applications web.
Un composant clé de la programmation backend est l'utilisation d'un langage de programmation de script côté serveur.
Certains des plus fréquemment utilisés sont :
- PHP
- Ruby
- Python
- Java
- JavaScript. Oui, le JavaScript est largement utilisé dans le développement frontend, mais ces dernières années, il est également utilisé pour le développement backend. Node.js (un runtime JavaScript) rend cela possible en fournissant des fonctionnalités backend.
En plus des langages de programmation backend, des frameworks et des bibliothèques backend sont utilisés pour fournir des fonctionnalités supplémentaires afin de créer des applications web.
Certains des plus populaires sont :
- Ruby on Rails
- Django
- Flask
- Express
Lorsque les développeurs font partie d'une équipe, ils utilisent Git - un système de contrôle de version qui suit les modifications dans les différents fichiers du projet.
C'est un outil de collaboration open-source pour les programmeurs.
L'interaction avec les bases de données constitue une grande partie du travail d'un développeur backend, la connaissance des bases de données est donc primordiale.
Les bases de données se divisent en deux catégories : relationnelles et non relationnelles.
Certains des plus fréquemment utilisés sont :
- MySQL
- PostgreSQL
- MongoDB
- Oracle
Lorsque vous travaillez avec des bases de données relationnelles (telles que MySQL, PostgreSQL et Oracle), vous utiliserez SQL.
SQL signifie Structured Query Language. Il est utilisé pour effectuer des requêtes de base de données. Le SQL communique avec les bases de données relationnelles pour manipuler les données.
Vous pouvez en apprendre davantage sur le SQL grâce à cette liste de ressources utile.
Le développement backend est-il fait pour vous ?
Les développeurs backend sont responsables de la logique derrière les applications web et du fonctionnement optimal du frontend.
Si vous aimez résoudre des problèmes en les décomposant en plus petits morceaux, en implémentant des algorithmes et en trouvant une solution optimale et la plus efficace, peut-être que le développement backend est fait pour vous.
Si vous vous considérez comme une personne analytique et méthodique, le développement backend implique de travailler avec, d'analyser et d'organiser de grandes quantités de données. Cela nécessite d'effectuer des manipulations et des calculs avec ces données.
Enfin, si vous ne vous considérez pas comme une personne particulièrement artistique et que vous êtes plus concerné par le côté logique des choses et par ce qui se passe sous le capot, vous êtes peut-être plus adapté au développement backend.
Cela dit, certains peuvent commencer par le frontend puis passer au backend. De cette façon, ils peuvent déterminer ce qu'ils préfèrent travailler le plus.
Si vous voulez commencer à apprendre le développement backend, apprenez avec le Cours sur les bases de données relationnelles (Relational Database) de freeCodeCamp.
Vous découvrirez les bases de données relationnelles à l'aide de SQL et PostgreSQL, le système de contrôle de version Git, pour n'en citer que quelques-uns. Ceux-ci vous permettront de prendre un excellent départ dans votre parcours backend.
Ensuite, vous pourrez progresser vers la Certification Back End Development and APIs.
Ici, vous apprendrez Node.js et construirez des applications web en utilisant le framework Express.
Conclusion
Nous espérons que vous avez maintenant un meilleur aperçu de ce qu'implique le développement frontend et backend et que vous pouvez faire la différence entre les deux.
En résumé, le frontend implique toutes les parties avec lesquelles un utilisateur interagit, tandis que le backend est la logique qui alimente les interactions frontend.
Merci de votre lecture !