Frontend : de quoi s’agit-il ?

Le frontend et le backend re­pré­sen­tent deux niveaux au sein d’un logiciel, à la fois in­dé­pen­dants et com­plé­men­taires. Comparons un logiciel à un res­tau­rant : le frontend cor­res­pond à la façade ex­té­rieure, au menu et au personnel en salle. En revanche, toujours dans cette com­pa­rai­son, le backend comprend la cuisine et tout le travail de gestion, en lien notamment avec le personnel et les processus de pro­duc­tion comme d’ad­mi­nis­tra­tion.

Qu’est-ce qu’un frontend ?

Le frontend cor­res­pond à une interface uti­li­sa­teur graphique. Il permet d’utiliser un site Web ou une ap­pli­ca­tion. Le frontend est surtout axé sur les besoins et les attentes des uti­li­sa­teurs. Il vous sert à vous assurer que les in­for­ma­tions sont pré­sen­tées de manière at­trayante et que la struc­tu­ra­tion des in­te­rac­tions est bien com­pré­hen­sible. La con­cep­tion frontend a pour but de garantir une bonne ex­pé­rience uti­li­sa­teur (UX).

Le frontend cor­res­pond en fait à une couche lo­gi­cielle qui s’exécute sur le client. Le frontend dissimule toutefois une certaine com­plexité, car en réalité, le trai­te­ment des in­for­ma­tions est assuré par le backend. Dans l’ombre, le frontend est donc en com­mu­ni­ca­tion avec le backend, de manière à comparer leurs données, puis à refléter les chan­ge­ments ainsi repérés. Pour ce faire, des in­ter­faces de pro­gram­ma­tion appelées API sont gé­né­ra­le­ment utilisées.

Con­for­mé­ment au principe Se­pa­ra­tion of concerns (lit­té­ra­le­ment « Sé­pa­ra­tion des préoc­cu­pa­tions »), le frontend et le backend sont réalisés comme des niveaux in­dé­pen­dants. Pour qu’un logiciel soit en­tiè­re­ment fonc­tion­nel, 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’uti­li­sa­teurs très dif­fé­rents sont amenés à utiliser le frontend :

1. les uti­li­sa­teurs qui tra­vail­lent avec le frontend ;
2. les dé­ve­lop­peurs frontend, dont le travail consiste à créer et à gérer des in­ter­faces frontend.

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

Comment tra­vail­lent les uti­li­sa­teurs avec le frontend ?

Sur un site Web, les visiteurs utilisent des liens pour naviguer d’une page à une autre. Ce faisant, ils con­som­ment des contenus (qu’il s’agisse de texte ou de média) et in­te­ra­gis­sent avec ceux-ci à l’aide de boutons ou d’autres éléments dy­na­miques. Ces in­te­rac­tions sont notamment basées sur des for­mu­laires HTML qui vous sont sans doute familiers, avec leurs menus de sélection, leurs champs de saisie et leurs boutons.

Sur le plan con­cep­tuel, ce processus concerne également les uti­li­sa­teurs connectés à une ap­pli­ca­tion. Dans ces si­tua­tions, ces derniers profitent de pos­si­bi­li­tés d’in­te­rac­tion autrement plus riches dans le frontend, grâce à des boutons spé­cia­li­sés. Ici aussi, la portée des in­te­rac­tions se limite toutefois à un certain nombre de parcours clai­re­ment définis. Plusieurs pos­si­bi­li­tés peuvent néanmoins être ex­ploi­tées pour créer du contenu.

Comment tra­vail­lent les dé­ve­lop­peurs avec le frontend ?

Les uti­li­sa­teurs se re­trou­vent vite limités dans leurs in­te­rac­tions avec le frontend, ce qui n’est pas le cas des dé­ve­lop­peurs « frontend ». Ces pro­fes­sion­nels de la pro­gram­ma­tion prennent en charge la création, la main­te­nance et le dé­ve­lop­pe­ment du frontend Des designers les aident souvent dans cette tâche. Au bout du compte, c’est la con­vi­via­lité de la con­cep­tion Web qui prévaut.

En quoi consiste exac­te­ment le dé­ve­lop­pe­ment frontend ? Découvrez avec nous un exemple issu de l’éco­sys­tème WordPress. Les dé­ve­lop­peurs frontend créent des widgets WordPress et des thèmes WordPress pour donner à un site WordPress une apparence at­trayante.

À l’aide d’un **thème WordPress créé par les dé­ve­lop­peurs frontend, les dif­fé­rents contenus de l’ensemble des pages et con­tri­bu­tions sont intégrés à des struc­tures bien définies. Ainsi, la cohérence de la pré­sen­ta­tion de tous les contenus est garantie sur l’ensemble du site.

Les dé­ve­lop­peurs 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 par­ti­cu­liè­re­ment mis sur le « Res­pon­sive Design ».

Quels sont les prin­ci­paux fra­me­works pour le frontend ?

Le frontend est mis à la dis­po­si­tion des uti­li­sa­teurs sur leurs terminaux (ou « clients »). En principe, il existe une dif­fé­rence entre le frontend Web, pour un affichage dans le na­vi­ga­teur, et le frontend natif, spé­ci­fique à un système d’ex­ploi­ta­tion. Les méthodes modernes, axées sur le dé­ve­lop­pe­ment mul­ti­pla­te­forme, per­met­tent de créer plusieurs frontends à partir d’une même base.

Les frontends Web font in­ter­ve­nir du code, rédigés dans les langages Web HTML, CSS et Ja­vaS­cript. Ces langages per­met­tent de répondre aux trois prin­ci­pales préoc­cu­pa­tions liées à la pro­gram­ma­tion Web :

En principe, il est possible de créer di­rec­te­ment des frontends en se basant sur ces trois langages Web. Il ne serait toutefois pas judicieux d’adopter une telle approche, car celle-ci de­man­de­rait beaucoup d’efforts inutiles. À cet égard, les fra­me­works frontend fa­ci­li­tent le travail de manière con­si­dé­rable.

En fonction de leur domaine d’ap­pli­ca­tion, ces fra­me­works frontend peuvent avoir dif­fé­rentes fonctions. Ils élar­gis­sent le champ d’action des langages Web, fa­ci­li­tent la liaison avec le backend et ga­ran­tis­sant la cohérence des fonctions entre les dif­fé­rentes versions de na­vi­ga­teur. Certains fra­me­works per­met­tent également d’améliorer les per­for­mances à l’aide de tech­niques spé­ci­fiques.

Les fra­me­works les plus récents, notamment React et Vue, misent de plus en plus sur la réac­ti­vité ; ainsi, les mo­di­fi­ca­tions apportées aux données ap­pa­rais­sent im­mé­dia­te­ment au niveau du frontend. Ces fra­me­works mettent également l’accent sur les com­po­sants en tant que concept central. Ils prennent la forme d’unités en­cap­su­lées et réu­ti­li­sables, composées d’éléments réactifs et cons­ti­tu­tifs de l’interface uti­li­sa­teur.

En fonction de l’approche que vous souhaitez utiliser, vous pouvez opter pour un framework frontend CSS ou Ja­vaS­cript. Il existe également une dif­fé­rence entre les fra­me­works frontend Web ou mul­ti­pla­te­forme.

Fra­me­works réactifs : dé­ve­lop­per des frontends basés sur des com­po­sants

Avec les fra­me­works frontend de Ja­vaS­cript l’accent est mis sur des com­po­sants réactifs, conçus sur mesure. Ceux-ci combinent les préoc­cu­pa­tions liées à la structure, à la pré­sen­ta­tion et au com­por­te­ment, et s’adaptent au­to­ma­ti­que­ment en cas de mo­di­fi­ca­tion des données sous-jacentes. Par exemple, en cas de sup­pres­sion d’un ensemble de données, l’entrée cor­res­pon­dante disparaît de l’affichage sous forme de liste. Le cas échéant, un compteur peut im­mé­dia­te­ment renvoyer la nouvelle valeur.

Depuis plusieurs années main­te­nant, Angular et React sont de vé­ri­tables champions dans le domaine des fra­me­works frontend réactifs. Tous deux per­met­tent de créer des ap­pli­ca­tions à page unique, mais aussi des ap­pli­ca­tions plus im­por­tantes, con­si­dé­rées comme étant plutôt complexes. Le framework frontend Vue est quant à lui nettement plus léger, et fait figure de solution de subs­ti­tu­tion moderne.

Nou­vel­le­ment développé, le framework Svelte est lui aussi très in­té­res­sant. En effet, Svelte suit un chemin com­plè­te­ment différent de l’approche adoptée par React et d’autres fra­me­works. Svelte n’invente pas de nouvelles struc­tures au sein de Ja­vaS­cript, mais agit plutôt comme un com­pi­la­teur. Svelte permet donc d’écrire un code simple, qui est ensuite converti par le com­pi­la­teur de manière à former un code Ja­vaS­cript plus complexe.

Dans leur majorité, les fra­me­works frontend réactifs fa­ci­li­tent aussi le travail avec des données globales. Pour ce faire, un « State Store » per­met­tant d’en­cap­su­ler les données d’état est alors utilisé.

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

Fra­me­works frontend à préoc­cu­pa­tions multiples : l’ancienne gé­né­ra­tion

Ces fra­me­works frontend plus anciens étaient ex­trê­me­ment po­pu­laires avant l’arrivée des fra­me­works réactifs. Bootstrap ou ses ho­mo­logues pro­po­saient une fonction ex­trê­me­ment re­cher­chée à l’époque, à savoir la stan­dar­di­sa­tion per­met­tant de dépasser les dif­fé­rences entre les na­vi­ga­teurs, ainsi qu’une sélection de com­po­sants déjà préconçus. Il pouvait notamment s’agir de menus de na­vi­ga­tion hié­rar­chi­sés, de blocs en accordéon avec des menus dé­rou­lants et de car­rou­sels d’images animés.

Ces fra­me­works partagent un point commun : ils com­pren­nent à la fois du code Ja­vaS­cript et du code CSS. Le framework d’interface uti­li­sa­teur compact ZURB Foun­da­tion était plutôt axé sur l’adap­ta­bi­lité dans le cadre des ap­pli­ca­tions pro­fes­sion­nelles. jQuery UI mettait davantage l’accent sur une approche mi­ni­ma­liste en com­bi­nai­son avec le framework Ja­vaS­cript, très populaire.

Tous ces fra­me­works frontend ont l’avantage d’être très simples d’uti­li­sa­tion. La plupart du temps, il suffit d’y intégrer un fichier CSS et/ou Ja­vaS­cript. Toutefois, dès lors que vous souhaitez adapter et optimiser votre travail, la situation peut très ra­pi­de­ment se com­plexi­fier. L’ex­pé­rience a également démontré que la com­bi­nai­son de dif­fé­rentes parties de ces fra­me­works pouvait elle aussi s’avérer plutôt pro­blé­ma­tique.

Fra­me­works frontend à préoc­cu­pa­tion unique : les spé­cia­listes de la sim­pli­fi­ca­tion

Con­trai­re­ment aux fra­me­works frontend à préoc­cu­pa­tions multiples qui combinent Ja­vaS­cript et CSS, les fra­me­works frontend à préoc­cu­pa­tion unique mettent uni­que­ment l’accent sur un langage. Tailwind CSS a presque établi un standard per­met­tant de doter les com­po­sants frontend de règles CSS. Vous n’avez pas à écrire vous-même le code CSS : des classes pré­dé­fi­nies sont di­rec­te­ment intégrées à la structure HTML.

Le framework frontend Alpine JS est au com­por­te­ment et à la réac­ti­vité ce que Tailwind est à la pré­sen­ta­tion. En lieu et place de CSS, il utilise des extraits de code Ja­vaS­cript préconçus. Le framework Alpine JS est comparé à la solution jQuery, ce qui lui vaut une place dans le cercle vertueux des fra­me­works clas­siques de Ja­vaS­cript.

Les fra­me­works frontend à préoc­cu­pa­tion unique ont un avantage con­si­dé­rable : leur sim­pli­cité. Ils per­met­tent gé­né­ra­le­ment de ne pas utiliser plus de code que né­ces­saire. Pour ce faire, il se peut que vous deviez faire appel à un processus de création distinct. En outre, certaines parties de ces fra­me­works peuvent tout à fait être combinées. Tailwind CSS et Alpine JS forment une as­so­cia­tion par­ti­cu­liè­re­ment populaire.

Créer plusieurs frontends à partir d’une même base grâce aux fra­me­works mul­ti­pla­te­forme

Les fra­me­works frontend précités sont tous axés sur l’affichage dans un na­vi­ga­teur Web, mais il existe également des fra­me­works frontend mul­ti­pla­te­forme qui génèrent du code pour des ap­pli­ca­tions natives. Les ap­pli­ca­tions natives ne sont pas rat­ta­chées à un na­vi­ga­teur ; elles fonc­tion­nent di­rec­te­ment sur un système d’ex­ploi­ta­tion, par exemple Windows, macOS, Android ou iOS.

Flutter est un framework frontend mul­ti­pla­te­forme populaire fondé sur Dart, le langage de pro­gram­ma­tion pro­prié­taire de Google. Une interface uti­li­sa­teur 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. Con­trai­re­ment à Flutter, GTK n’est pas fondé sur des tech­no­lo­gies Web. En revanche, il est possible de tra­vail­ler avec GTK à partir d’un grand nombre de langages de pro­gram­ma­tion, à l’aide de con­nexions.