Développement front-end : on lève le flou !

Un métier difficilement compris

Depuis 2015, nous avons adopté une organisation qui sépare les développeur·euses front-end des développeur·euses back-end en deux pôles. En effet, nous avons choisi de créer une distinction entre ces deux métiers, que nous réunissions jusqu’ici sous le nom de “développeur·euse web”, car les tâches de chacun sont très spécifiques – mais complémentaires !-. Pour autant, il plane toujours un véritable flou sur le métier de développeur·euse front-end pour les non-initiés ! Cet article vient mettre un terme à ces doutes car vous allez y découvrir le rôle et les missions de ce métier.

Développeur·euse ou informaticien·ne, c’est pareil non ?

Nous connaissons tous quelqu’un qui pense que développeur·euse est synonyme d’informaticien·ne – peut-être vous d’ailleurs ? -. En échangeant avec le pôle front-end, s’il y a bien une chose qui est ressortie, c’est que tous·tes étaient habitué·es à des questions du type “ah, ça tombe bien, tu pourrais me réparer mon imprimante / mon PC ?”. De même, l’incompréhension de ce métier par les parents semble être une fatalité…

Pauvres Manuel, Gauthier, Christina et Alexandre, nos développeur·euses front-end, qui, en plus de faire face à des visages froncés lorsqu’ils présentent le “développement web”, doivent expliciter la mention “front-end”. Double difficulté, que rencontre également les back-end mais ce sera le sujet d’un prochain article.

Le développement web correspond à l’usage de langages techniques pour construire un site ou une page web. Ces langages rendent l’interface utilisable et visible par un navigateur, en échangeant des informations avec les serveurs. Vous remarquerez qu’on ne parle ici ni d’imprimante, ni de PC.

La spécialisation front-end

Au sein même du développement web, il existe des spécialités. Vous avez déjà compris sur laquelle nous allons nous attarder. Le développement front-end consiste finalement à construire techniquement une page web, selon ce que les designers ont conçu, en se concentrant sur les aspects visuels et expérientiels du projet et selon les données fournies par les back-end. Cela se caractérise donc par l’écriture de code pour que la page s’affiche graphiquement. Ce code est rédigé grâce à différents langages permettant aux navigateurs d’afficher la page correctement et de la rendre interactive sur tous types de terminaux. Les développeur·euses back-end, quant à eux·elles, adoptent un langage qui permet de transmettre de l’information aux serveurs.

Le·a développeur·euse front-end est donc là pour assembler la maquette du designer et le noyau technique réalisé par le pôle back-end.

Les front-end à LunaWeb

La répartition des sujets

Au sein même du pôle front-end, il y a des spécialités. Quand Gauthier est le référent en termes de web performance, Christina est la plus experte en termes d’animations et Manuel le plus connaisseur sur les sujets de l’écoconception et de l’accessibilité web.

L’organisation de travail

Nous vous avons parlé d’immersion… Est donc venu le moment de vous détailler la semaine d’un·e développeur·euse front-end.

Ils ne sont pas les geeks qui fuient tout échange verbal avec autrui, comme le cliché le veut. Les développeur·euses front-end se joignent donc à toute l’Agence pour un point hebdomadaire le lundi matin à 9h30. 15 à 30 minutes durant lesquelles chacun – surtout Nicolas – partage les grandes actualités de LunaWeb.

Le pôle front-end enchaîne avec un point de 5 à 10 minutes pour savoir qui travaille sur quel(s) projet(s) et partager des informations lorsque c’est nécessaire.

Le jeudi, le pôle se réunit de nouveau de 16h30 à 18h pour faire le point sur la semaine : les tâches réalisées par chacun, les différents blocages, les avancées et découvertes des moments de R&D, etc. En effet, à l’Agence tout le monde se voit attribuer deux heures de R&D hebdomadaires.

En mode projet

Comme les autres métiers, les front-end sont intégré·es dès le début d’un projet à l’équipe. Ils travaillent en particulier main dans la main avec les designers : tout au long de la conception, les designers les questionnent pour s’assurer que leurs propositions de maquette sont techniquement réalisables ou qu’elles respectent bien les contraintes d’accessibilité ou d’écoconception imposées, par exemple.

Une fois que les front-end reçoivent les maquettes graphiques des designers, démarre une première phase de recherche et de documentation. Ils décomposent systématiquement la maquette en différents éléments pour en faire un panel de composants, selon les principes de l’atomic design. Cela signifie que l’interface est pensée à partir de composants (atomes), qui peuvent s’assembler pour former des éléments (molécules), qui peuvent eux-mêmes s’unir pour devenir des blocs (organismes). C’est la succession de blocs qui permet de produire des templates de page. À cette étape s’ajoute une récolte des informations des designers : icônes via des sets de pictogrammes SVG, les couleurs, etc.

La documentation concerne davantage la recherche des langages à utiliser selon la technologie (ou le CMS) choisie et les outils annexes à exploiter selon les besoins spécifiques du projet.

À savoir : de nombreux processus ont été automatisés au sein de l’Agence pour alléger les développeur·euses dans leurs tâches répétitives. Typiquement, lorsqu’ils intègrent des images sur un site, celles-ci sont automatiquement compressées et mises à la bonne taille grâce à un thème pré-construit par l’équipe. Concernant les fichiers en Javascript ou en CSS, s’ils sont légers, un outil vient les compresser automatiquement afin d’éviter tout caractère superflu.

Parfois, des missions complémentaires viennent s’ajouter au planning des développeur·euses front-end. Par exemple, il arrive que les outils des designers soient limités pour imager des micro-interactions sur les maquettes. C’est alors le·a front-end qui imagine les animations et les propose aux designers.

Vient ensuite la phase tant attendue de code… Comme quoi elle ne représente pas, loin de là, l’unique travail des développeur·euses front-end. Ils jonglent majoritairement entre les langages HTML, JavaScript et CSS pour donner vie aux sites Internet de nos clients.

Les fins de projet sont elles aussi bien rodées. Un contrôle qualité est toujours effectué. Celui-ci est basé sur une check-list propre à l’Agence, dans laquelle nous pouvons retrouver près de 40 points de contrôle, et elle nous permet de nous assurer que le travail produit est qualitatif. Les front-end vérifient les points de cette checklist notamment grâce à des outils externes, tels que :

• Page Speed pour le web performances et les problèmes techniques,
• le validateur W3C pour confirmer la validité du consortium HTML,
• Browser Stack pour émuler l’affichage des sites sur différents terminaux ou navigateurs,
• l’Éco-Index pour contrôler le niveau d’écoconception, le cas échéant,
• Etc.

Ils testent également l’accessibilité globale des sites développés à partir des normes RGAA (Référentiel Général d’Amélioration de l’Accessibilité).

Autre pan du métier de front-end : les audits

En parlant de checklist, à l’Agence, les front-end assurent aussi certains audits. Ils endossent alors un rôle d’experts et de conseillers aux yeux des clients. Ils interviennent pour des sujets assez spécifiques lors de ces audits : web performances, technique front-end, accessibilité, écoconception, ect. Lorsque c’est le cas, les front-end adoptent davantage un regard d’observateur pour ensuite prodiguer des recommandations techniques selon le cas du client. Ces audits sont parfois réalisés en amont d’un projet de refonte d’un site par exemple, en cours de développement, ou à la fin du projet pour s’assurer du respect des objectifs préalablement définis.

Vous l’aurez remarqué, les missions front-end sont assez variées, et bien sûr, elles diffèrent grandement selon la nature du projet. Quand nous leur demandons quelle proportion de leur temps ils dédient au code, ils ne peuvent donc pas répondre à la question.

Dans cet article, nous ne sommes pas rentrés dans le cœur technique de ce métier, mais il ne s’agit que du premier d’une série d’articles dédiés au développement front-end. Retenez simplement que c’est grâce aux développeur·euses front-end que les sites sont fonctionnels, visibles et à l’image des maquettes des designers. Ils sont le dernier maillon de la chaîne, mais pas moins essentiel, faisant le lien entre le noyau technique back-end et le webdesign.