Chapitre 4
Front-end et Back-end

L’informatique, plus particulièrement le web, est un domaine en perpétuelle évolution. Il ne se passe pas 1 mois sans qu’une nouvelle technologie n’apparaisse ou ne soit mise à jour. Les tech, comprendre ici “ceux qui travaillent dans la direction technique”, se forment quotidiennement pour garder une vision d’ensemble et comprendre au minimum les bases de chaque sujet.

Avec des technologies de plus en plus poussées, des besoins métiers de plus en plus pointus et des organisations qui poussent à la livraison rapide, c’est presque impossible pour un tech de rester à niveau sur toute la chaine de production. Il se spécialise donc sur des domaines technologiques, voire métiers. On a ainsi des experts Android, cloud, publicité, envoi d’email, traitement de données, streaming…

Pour ma part, ça fait maintenant 11 ans que je travaille dans l'e-commerce sur les parcours de paiement et la gestion des abonnements. 🚀

Cette segmentation est d’autant plus visible que l’entreprise est grosse. Les petites structures sont à l’inverse composées de touche-à-tout qu’on appelle “fullstack”. Elles font appel à des consultants spécialistes pour des besoins ponctuels.

Quelle que soit leur taille, la majorité des directions techniques distinguent les profils front-end et back-end.

Le front-end

Le front-end, c’est tout le code qui est exécuté par l’appareil de l’utilisateur : navigateur web, application mobile, TV connectée, montre... C’est lui qui assure la navigation de l’utilisateur dans ton produit.

C’est la partie graphique quoi !

Pas seulement. D’ailleurs le monde du front est divisé en plusieurs métiers.

Les intégrateurs web

Ils traduisent en code les maquettes des équipes design / produit. Ils s’assurent que le rendu graphique soit cohérent sur tous les types d’appareils, toutes les résolutions d’écran et tous les navigateurs…

Crois-moi, c’est loin d’être une partie de plaisir 😅.

Le W3C (World Wide Web Consortium) est un organisme qui met en place les standards du web. Tous les acteurs, dont les navigateurs web, doivent les respecter.

En pratique, Chrome, Firefox, Safari… ont tous des subtilités : règle d’affichage différente, fonctionnalité pas encore implémentée...

Les intégrateurs sont historiquement armés d’HTML pour structurer le contenu et de CSS pour le mettre en forme. HTML et CSS ne sont pas des langages de programmation, ce sont des syntaxes statiques de description du contenu ne permettant pas de logique complexe.

Ça ressemble à ça :

<h1>Un titre (header) de premier niveau</h1>
<p>
    Un paragraphe.
<p>

h1 {
    color: red; // Mets les titres de premier niveau en rouge.
}

Aujourd’hui, rares sont les intégrateurs qui produisent directement du CSS brut. Ils utilisent des surcouches, comme SASS, introduisant des concepts de programmation : conditions, boucles, variables… Elles permettent une meilleure organisation des composants graphiques, une meilleure maintenabilité et un gain de temps.

Mode sombre, affichage compatible avec toutes les langues, lecture de droite à gauche, accessibilité pour tous, optimisation de contenu pour les moteurs de recherche… le monde de l’intégration est plein de défis. Les intégrateurs sont en contact permanent avec les équipes produit et marketing.

L’intégration, bien qu’étant un domaine d’expertise en lui-même, est bien souvent sous-estimée et confiée à des développeurs.

Les développeurs front-end

Dans le front-end, il faut distinguer les mondes du navigateur et du natif mobile. Ils ont globalement les mêmes responsabilités mais les techniques et les contraintes sont complètement différentes. C’est pourquoi il y a des développeurs spécialisés pour iOS, pour Android et pour le web.

Tous ces développeurs donnent vie au produit. Ils dynamisent l’expérience utilisateur : interprétation d’évènements (clic, soumission de formulaire…), communication en temps réel avec le back-end, navigation sans recharger la page…

Chaque plateforme a son langage privilégié. Les projets web utilisent majoritairement le langage JavaScript, iOS le Swift et Android le Kotlin.

Le front web c’est la jungle 🤯. Le temps de cligner des yeux et 3 nouvelles techno ont vu le jour. Ça fait partie des domaines informatiques qui ont le plus évolués ces dernières années.
React, Vue, Angular, leurs composantes et leurs surcouches… il ne se passe pas un jour sans qu’on parle d’une nouveauté dans l’écosystème JavaScript.

Toutes ces évolutions permettent aujourd'hui d’avoir des projets front-end solides, maintenables sur le long terme et découplés du back-end.

Le back-end

Le back c’est simple, c’est tout ce qui ne fait pas partie du front. C’est l’ensemble de tous les systèmes qui permettent au front de tourner et qui exécutent la logique métier.

Même si c’est parfois inévitable, on préfère ne pas mettre de logique métier dans le front. Tout simplement car il faudrait la dupliquer sur toutes les plateformes : difficile à maintenir et à faire évoluer. Exemple : la carte bancaire du client arrive à expiration, tu veux lui afficher un message pour l’inciter à la mettre à jour. Pour ne pas mettre trop de pression au client, tu décides de n’afficher cette info qu’une fois par jour. Il est préférable de centraliser ce capping “une fois par jour” dans le back. Ça permet de faire évoluer très facilement cette règle sur toutes les plateformes en même temps juste en changeant le back. Côté front, nous aurons de la pure technique spécifique à chaque plateforme : cookie, base de données locale…

Une page de paiement est un bon contre-exemple. Un back non certifié n’a pas le droit de manipuler des coordonnées bancaires. Le front va ainsi directement dialoguer avec le partenaire de paiement et mettre en place les différents parcours (formulaire bancaire, challenge 3DS…). Le partenaire fournit au back des données non-sensibles pour lui permettre de suivre l’état du paiement.

Le back c’est super vaste. Son organisation dépend grandement des métiers de l’entreprise.

Par exemple quand je travaillais pour le site de streaming musical Deezer, il y avait des équipes back travaillant directement sur les fonctionnalités accessibles aux clients mais on trouvait également des équipes dédiées à un domaine métier :

• Importation des catalogues musicaux des labels.
• Reversements financiers pour les artistes.
• Interconnexion avec les partenaires télécoms.
• Gestion des paiements et des abonnements (meilleure team 🫶).

Le back est composé de nombreux métiers dont :

• Les développeurs : ils écrivent le code qui tourne sur les serveurs.
• Les ops / ingénieurs infra : ils mettent en place toute l’infrastructure matérielle et logicielle pour faire tourner le réseau. C’est un domaine extrêmement vaste composé d’une infinité de technologies. Certains ops se spécialisent : bases de données, cloud… On appelle DevOps la mouvance qui rapproche les responsabilités et la connaissance des dev et des ops. Les silos sautent, favorisant les livraisons et le suivi de la production.
• Ingénieurs data : ils structurent toute la chaîne d’alimentation de la donnée. Elle sera utilisée par des data scientists pour la supervision et la prise de décision (marketing, produit, stratégie d’entreprise), par la production pour certaines fonctionnalités (prévention de la fraude, recommendations…), pour les communications avec le client etc...

Front + Back = <3

Revenons en 2010 pour mieux comprendre les liens entre front et back.

1. Le navigateur envoie une requête vers le serveur web.
2. Le serveur analyse la requête et la délègue à un programme pour qu’il exécute de l’intelligence métier. Le code est écrit dans un langage backend : PHP, Java, Ruby…
3. Pendant son traitement, le code back prépare sa réponse pour le navigateur. Cette réponse contient du HTML, du Javascript, du CSS… Autrement dit, le code back-end écrit dynamiquement le code front-end.
4. Le navigateur reçoit la réponse et exécute le code front-end.

À l’époque un petit nouveau s’apprête à tout casser : Node.js.
Node.js est une technologie ouvrant les portes du back-end au langage JavaScript.

• Un seul langage à maitriser pour faire à la fois du front et du back.
• Une technologie hautement scalable pour les sites avec une forte charge.

Node.js a déclenché une explosion du JavaScript (JS).

En 2010, le JavaScript, c'était pas ouf : des syntaxes étranges, des techno pas cohérentes entre elles, un manque cruel de bibliothèques… D’où l’essor de tout un nouvel écosystème au cours de la dernière décennie :

• Révolution du langage avec de nouvelles versions et des surcouches comme TypeScript.
• Outils combinant front et back.
• Catalogue de projets open-source.

Le web se renouvelle en permanence. Qui sait ce que j’écrirai dans The Tech Guide en 2030.