Frontend : de quoi s’agit-il ?

Le frontend et le backend représentent deux niveaux au sein d’un logiciel, à la fois indépendants et complémentaires. Comparons un logiciel à un restaurant : le frontend correspond à la façade extérieure, au menu et au personnel en salle. En revanche, toujours dans cette comparaison, le backend comprend la cuisine et tout le travail de gestion, en lien notamment avec le personnel et les processus de production comme d’administration.

Qu’est-ce qu’un frontend ?

Le frontend correspond à une interface utilisateur graphique. Il permet d’utiliser un site Web ou une application. Le frontend est surtout axé sur les besoins et les attentes des utilisateurs. Il vous sert à vous assurer que les informations sont présentées de manière attrayante et que la structuration des interactions est bien compréhensible. La conception frontend a pour but de garantir une bonne expérience utilisateur (UX).

Le frontend correspond en fait à une couche logicielle qui s’exécute sur le client. Le frontend dissimule toutefois une certaine complexité, car en réalité, le traitement des informations est assuré par le backend. Dans l’ombre, le frontend est donc en communication avec le backend, de manière à comparer leurs données, puis à refléter les changements ainsi repérés. Pour ce faire, des interfaces de programmation appelées API sont généralement utilisées.

Conformément au principe Separation of concerns (littéralement « Séparation des préoccupations »), le frontend et le backend sont réalisés comme des niveaux indépendants. Pour qu’un logiciel soit entièrement fonctionnel, il doit toujours être composé de ces deux niveaux. Un frontend sans backend est comme un simple décor de théâtre.

Qui travaille sur le frontend ?

De manière générale, deux groupes d’utilisateurs très différents sont amenés à utiliser le frontend :

1. les utilisateurs qui travaillent avec le frontend ;
2. les développeurs frontend, dont le travail consiste à créer et à gérer des interfaces frontend.

Découvrez avec nous les points communs et les différences entre ces deux groupes dans le cadre du travail avec le frontend.

Comment travaillent les utilisateurs avec le frontend ?

Sur un site Web, les visiteurs utilisent des liens pour naviguer d’une page à une autre. Ce faisant, ils consomment des contenus (qu’il s’agisse de texte ou de média) et interagissent avec ceux-ci à l’aide de boutons ou d’autres éléments dynamiques. Ces interactions sont notamment basées sur des formulaires HTML qui vous sont sans doute familiers, avec leurs menus de sélection, leurs champs de saisie et leurs boutons.

Sur le plan conceptuel, ce processus concerne également les utilisateurs connectés à une application. Dans ces situations, ces derniers profitent de possibilités d’interaction autrement plus riches dans le frontend, grâce à des boutons spécialisés. Ici aussi, la portée des interactions se limite toutefois à un certain nombre de parcours clairement définis. Plusieurs possibilités peuvent néanmoins être exploitées pour créer du contenu.

Comment travaillent les développeurs avec le frontend ?

Les utilisateurs se retrouvent vite limités dans leurs interactions avec le frontend, ce qui n’est pas le cas des développeurs « frontend ». Ces professionnels de la programmation prennent en charge la création, la maintenance et le développement du frontend Des designers les aident souvent dans cette tâche. Au bout du compte, c’est la convivialité de la conception Web qui prévaut.

En quoi consiste exactement le développement frontend ? Découvrez avec nous un exemple issu de l’écosystème WordPress. Les développeurs frontend créent des widgets WordPress et des thèmes WordPress pour donner à un site WordPress une apparence attrayante.

À l’aide d’un **thème WordPress créé par les développeurs frontend, les différents contenus de l’ensemble des pages et contributions sont intégrés à des structures bien définies. Ainsi, la cohérence de la présentation de tous les contenus est garantie sur l’ensemble du site.

Les développeurs frontend créent des pages de renvoi et utilisent des éléments d’appel à l’action (ou CTA, pour « call to action ») pour aider les visiteurs à se repérer sur les sites. L’accent est donc tout particulièrement mis sur le « Responsive Design ».

Quels sont les principaux frameworks pour le frontend ?

Le frontend est mis à la disposition des utilisateurs sur leurs terminaux (ou « clients »). En principe, il existe une différence entre le frontend Web, pour un affichage dans le navigateur, et le frontend natif, spécifique à un système d’exploitation. Les méthodes modernes, axées sur le développement multiplateforme, permettent de créer plusieurs frontends à partir d’une même base.

Les frontends Web font intervenir du code, rédigés dans les langages Web HTML, CSS et JavaScript. Ces langages permettent de répondre aux trois principales préoccupations liées à la programmation Web :

En principe, il est possible de créer directement des frontends en se basant sur ces trois langages Web. Il ne serait toutefois pas judicieux d’adopter une telle approche, car celle-ci demanderait beaucoup d’efforts inutiles. À cet égard, les frameworks frontend facilitent le travail de manière considérable.

En fonction de leur domaine d’application, ces frameworks frontend peuvent avoir différentes fonctions. Ils élargissent le champ d’action des langages Web, facilitent la liaison avec le backend et garantissant la cohérence des fonctions entre les différentes versions de navigateur. Certains frameworks permettent également d’améliorer les performances à l’aide de techniques spécifiques.

Les frameworks les plus récents, notamment React et Vue, misent de plus en plus sur la réactivité ; ainsi, les modifications apportées aux données apparaissent immédiatement au niveau du frontend. Ces frameworks mettent également l’accent sur les composants en tant que concept central. Ils prennent la forme d’unités encapsulées et réutilisables, composées d’éléments réactifs et constitutifs de l’interface utilisateur.

En fonction de l’approche que vous souhaitez utiliser, vous pouvez opter pour un framework frontend CSS ou JavaScript. Il existe également une différence entre les frameworks frontend Web ou multiplateforme.

Frameworks réactifs : développer des frontends basés sur des composants

Avec les frameworks frontend de JavaScript l’accent est mis sur des composants réactifs, conçus sur mesure. Ceux-ci combinent les préoccupations liées à la structure, à la présentation et au comportement, et s’adaptent automatiquement en cas de modification des données sous-jacentes. Par exemple, en cas de suppression d’un ensemble de données, l’entrée correspondante disparaît de l’affichage sous forme de liste. Le cas échéant, un compteur peut immédiatement renvoyer la nouvelle valeur.

Depuis plusieurs années maintenant, Angular et React sont de véritables champions dans le domaine des frameworks frontend réactifs. Tous deux permettent de créer des applications à page unique, mais aussi des applications plus importantes, considérées comme étant plutôt complexes. Le framework frontend Vue est quant à lui nettement plus léger, et fait figure de solution de substitution moderne.

Nouvellement développé, le framework Svelte est lui aussi très intéressant. En effet, Svelte suit un chemin complètement différent de l’approche adoptée par React et d’autres frameworks. Svelte n’invente pas de nouvelles structures au sein de JavaScript, mais agit plutôt comme un compilateur. Svelte permet donc d’écrire un code simple, qui est ensuite converti par le compilateur de manière à former un code JavaScript plus complexe.

Dans leur majorité, les frameworks frontend réactifs facilitent aussi le travail avec des données globales. Pour ce faire, un « State Store » permettant d’encapsuler les données d’état est alors utilisé.

Pour générer du code frontend, il est éventuellement possible de faire appel à un processus de création distinct avec un exécuteur de tâches tel que Gulp ou Grunt.

Frameworks frontend à préoccupations multiples : l’ancienne génération

Ces frameworks frontend plus anciens étaient extrêmement populaires avant l’arrivée des frameworks réactifs. Bootstrap ou ses homologues proposaient une fonction extrêmement recherchée à l’époque, à savoir la standardisation permettant de dépasser les différences entre les navigateurs, ainsi qu’une sélection de composants déjà préconçus. Il pouvait notamment s’agir de menus de navigation hiérarchisés, de blocs en accordéon avec des menus déroulants et de carrousels d’images animés.

Ces frameworks partagent un point commun : ils comprennent à la fois du code JavaScript et du code CSS. Le framework d’interface utilisateur compact ZURB Foundation était plutôt axé sur l’adaptabilité dans le cadre des applications professionnelles. jQuery UI mettait davantage l’accent sur une approche minimaliste en combinaison avec le framework JavaScript, très populaire.

Tous ces frameworks frontend ont l’avantage d’être très simples d’utilisation. La plupart du temps, il suffit d’y intégrer un fichier CSS et/ou JavaScript. Toutefois, dès lors que vous souhaitez adapter et optimiser votre travail, la situation peut très rapidement se complexifier. L’expérience a également démontré que la combinaison de différentes parties de ces frameworks pouvait elle aussi s’avérer plutôt problématique.

Frameworks frontend à préoccupation unique : les spécialistes de la simplification

Contrairement aux frameworks frontend à préoccupations multiples qui combinent JavaScript et CSS, les frameworks frontend à préoccupation unique mettent uniquement l’accent sur un langage. Tailwind CSS a presque établi un standard permettant de doter les composants frontend de règles CSS. Vous n’avez pas à écrire vous-même le code CSS : des classes prédéfinies sont directement intégrées à la structure HTML.

Le framework frontend Alpine JS est au comportement et à la réactivité ce que Tailwind est à la présentation. En lieu et place de CSS, il utilise des extraits de code JavaScript préconçus. Le framework Alpine JS est comparé à la solution jQuery, ce qui lui vaut une place dans le cercle vertueux des frameworks classiques de JavaScript.

Les frameworks frontend à préoccupation unique ont un avantage considérable : leur simplicité. Ils permettent généralement de ne pas utiliser plus de code que nécessaire. Pour ce faire, il se peut que vous deviez faire appel à un processus de création distinct. En outre, certaines parties de ces frameworks peuvent tout à fait être combinées. Tailwind CSS et Alpine JS forment une association particulièrement populaire.

Créer plusieurs frontends à partir d’une même base grâce aux frameworks multiplateforme

Les frameworks frontend précités sont tous axés sur l’affichage dans un navigateur Web, mais il existe également des frameworks frontend multiplateforme qui génèrent du code pour des applications natives. Les applications natives ne sont pas rattachées à un navigateur ; elles fonctionnent directement sur un système d’exploitation, par exemple Windows, macOS, Android ou iOS.

Flutter est un framework frontend multiplateforme populaire fondé sur Dart, le langage de programmation propriétaire de Google. Une interface utilisateur créée avec Flutter sert de base commune à partir de laquelle vous pouvez concevoir plusieurs frontends natifs et Web.

Le framework frontend GTK est purement natif et propose une approche similaire. Il est possible de créer des frontends pour Linux, Windows, et macOS à partir d’une base commune. Contrairement à Flutter, GTK n’est pas fondé sur des technologies Web. En revanche, il est possible de travailler avec GTK à partir d’un grand nombre de langages de programmation, à l’aide de connexions.