Article original : Front End Developer vs Back End Developer – Definition and Meaning In Practice

Les sites web et les applications sont complexes ! Les boutons et les images ne sont que la partie émergée de l'iceberg. Avec ce niveau de complexité, il faut des personnes pour le gérer, mais quelles parties sont de la responsabilité des développeurs front end et des développeurs back end ?

Les nombreuses couches du développement

Que vous travailliez sur un site web ou une application native iOS, tous les environnements de développement partagent un thème commun — il y a un front end et un back end à une application.

Cette ligne peut devenir floue, surtout avec l'essor de JavaScript et du monde serverless. Avec les outils se fusionnant quelque peu, nous pouvons parfois nous demander si nous sommes un développeur full stack.

Mais nous ne sommes pas tous full stack

Autant nous pourrions tous vouloir l'être, nous ne sommes pas tous des développeurs full stack. Personnellement, je me trouve capable d'être productif dans le back end d'une application, mais ce n'est pas mon point fort et je préfère de loin être concentré sur la construction d'interfaces utilisateur.

Et certaines personnes sont l'inverse, où elles sont les plus à l'aise pour construire des APIs dans le back end d'une application et, bien qu'elles puissent construire une interface utilisateur, cela pourrait être plus une expérience de type prototype qu'une application complète.

Quelle est donc la différence entre le Développement Front End et le Développement Back End ?

Même si vous êtes un développeur full stack, cela ne signifie pas qu'il n'y a pas de division des responsabilités.

Image Ingénieur Front End vs Ingénieur Back End

À quoi ressemblent donc ces responsabilités ?

Qu'est-ce que le Développement Front End ?

Le front end d'une application fait généralement référence à la couche qui représente l'interface utilisateur (UI). Cela peut inclure tout, d'un site statique avec HTML et CSS à une application React complète qui alimente l'interface utilisateur.

À quoi ressemblait traditionnellement le Développement Front End ?

JavaScript domine actuellement le front end web, mais ce n'était pas toujours le cas. Bien qu'il ait pu être utilisé pour ajouter de petites interactions à un site, les front ends étaient traditionnellement rendus à l'aide de langages de templating côté serveur comme PHP et Template Toolkit (Perl).

Cela est devenu super populaire en pratique avec des frameworks maison ou des outils comme Wordpress qui utilisaient PHP pour alimenter une massive communauté de développeurs qui construisaient leurs sites web avec ces outils.

Le fonctionnement était le suivant : le langage de templating pouvait obtenir ses données directement du serveur au moment du rendu. Lorsqu'un navigateur demandait la page directement de l'origine (le serveur lui-même), les données dont le template avait besoin étaient fournies par la logique de l'application à ce moment-là.

Certains des outils front end plus traditionnels incluent :

Mais avec le temps, JavaScript est devenu de plus en plus mature en tant que langage et les navigateurs de plus en plus puissants, ce qui a conduit à l'idée que nous pouvions déplacer plus de ce travail vers le navigateur pour construire des expériences plus rapides et plus interactives.

À quoi ressemble le Développement Front End maintenant ?

Il est maintenant courant de voir des sites web et des applications riches en JavaScript construits à l'aide de frameworks UI comme React, Vue, et Angular. Ces outils fournissent des abstractions qui permettent aux développeurs de construire des interfaces utilisateur complexes avec des motifs réutilisables comme les composants.

Lorsque le navigateur charge la page, la page reçoit un document HTML initial qui inclut également la balise script pour le JavaScript (comme toujours). Mais une fois que ce JavaScript est chargé, il atteint les APIs en utilisant des requêtes navigateur qui, une fois complétées, mettent à jour la page pour remplir tout type de données dynamiques que vous obtiendriez typiquement avec ce premier document HTML.

Image C'est comme construire un site web... avec plus d'étapes

Bien que cela semble être plus d'étapes, cela fournit généralement un chargement et un rendu de page initiaux plus rapides, sans compter qu'il offre une excellente expérience développeur. En livrant moins sur cette première requête et en priorisant ce qui se charge après, cela se traduit généralement par une meilleure expérience utilisateur.

Certains des outils front end qui sont plus courants et gagnent en popularité incluent :

Mais ces APIs, qu'elles soient payantes ou créées par nous-mêmes, doivent être construites quelque part. C'est là que le back end entre en jeu.

Qu'est-ce que le Développement Back End ?

La couche back end est généralement là où se trouve la logique métier. Cela peut être super complexe comme les règles qui déterminent les revenus pour une entreprise de commerce électronique ou quelque chose de plus courant comme un profil utilisateur.

À quoi ressemblait traditionnellement le Développement Back End ?

Les back ends des applications étaient historiquement construits en utilisant des langages côté serveur comme PHP ou Ruby. L'idée est que vous avez un serveur qui doit effectuer des opérations complexes, donc la façon de le faire est avec un langage que le serveur comprendrait.

À chaque requête vers le serveur, le back end effectuait la pile complète des opérations, y compris le rendu du front end. En utilisant des frameworks ou des architectures DIY, le back end acceptait la requête, déterminait ce qu'il devait faire avec cette requête, exécutait toute logique métier nécessaire avec la requête, et fournissait au front end les données dont il avait besoin pour afficher une réponse à cette requête.

Image Back end donnant au front end une erreur 500 Internal Server Error

Certains des outils back end plus traditionnels incluent :

  • Serveurs sur site ou gérés à distance comme Rackspace
  • Serveurs HTTP utilisant Apache
  • Bases de données comme MySQL
  • Langages côté serveur comme PHP ou Perl
  • Frameworks d'application comme Ruby on Rails

À quoi ressemble le Développement Back End maintenant ?

Les stacks back end ressemblent quelque peu à ce qu'elles étaient avant, à part les nouveaux motifs de code, sauf que plus souvent vous verrez les back ends fournir des données via des requêtes HTTP au lieu de directement aux templates sur lesquels l'équipe front end travaille.

Bien que la fondation ne soit pas super différente, elle devient en réalité de plus en plus complexe car vous devez gérer différentes implications de sécurité qui pourraient compromettre votre système si elles ne sont pas correctement configurées, comme laisser une API ouverte au public qui retourne des données utilisateur sensibles.

Mais aussi, la façon dont le serveur fonctionne peut être complètement différente. Alors qu'auparavant, nous pouvions exécuter notre Python sur notre propre serveur géré (nous pouvons toujours le faire), nous pouvons maintenant utiliser des fonctions serverless avec des outils comme AWS Lambda qui simplifient la façon dont nous gérons le code.

Bien que "serverless" ne signifie pas nécessairement qu'il n'y a littéralement aucun serveur, cela signifie qu'en tant que service, le développeur n'a pas à se soucier de la maintenance de ce serveur et peut se concentrer uniquement sur le code qu'il doit exécuter.

Certains des outils back end qui sont plus courants et gagnent en popularité incluent :

Là où les choses deviennent floues

Une partie du twist avec les back ends est que vous pouvez maintenant écrire votre back end avec JavaScript. Avec l'avènement de Node.js, les développeurs ont eu la possibilité d'utiliser leur langage de navigateur préféré pour faire la plupart des mêmes choses auxquelles ils étaient habitués et familiers, mais maintenant sur un serveur.

Image Nous ne nous sommes jamais arrêtés pour penser si nous devrions écrire du JS sur un serveur

Bien que tout le monde ne soit pas fan d'exécuter JavaScript en tant que langage côté serveur, il est devenu un peu plus facile d'utiliser le même langage pour écrire la pile complète d'une application. Cela a changé un peu la donne en ce qui concerne les front ends et les back ends.

Mais cela a aussi commencé à faire un cercle complet où vous voyez maintenant des systèmes qui construisent des APIs juste à côté du front end similaire à ce que vous pourriez voir dans une stack traditionnelle.

Front End vs Back End

Quelle que soit la stack, il y aura toujours une séparation des préoccupations. L'interface utilisateur et toutes les interactions, qu'elles soient rendues sur le serveur ou dans le navigateur, sont ce qui fait que le front end est le front end et les données et la logique métier, qu'elles proviennent du serveur dans le placard de votre entreprise ou d'une fonction gérée, sont ce qui fait que le back end est le back end.

Que vous préfériez travailler sur les fonctionnalités orientées utilisateur ou construire la logique qui leur permet de faire des choses, il y a beaucoup de ressources pour commencer.

Ressources pour apprendre

Front End

Back End

Tout ce qui précède