Component library: indispensable aux applications web cohérentes et accessibles

  • BenoĂźt Burgener

Au fil du temps, l’entretien de plusieurs applications sur la base de la mĂȘme identitĂ© visuelle peut se rĂ©vĂ©ler ardu. Voyons comment Retraites Populaires a rĂ©solu le problĂšme Ă  l’aide d’une component library (bibliothĂšque de composants).

En savoir plus sur nos services UX Design et DĂ©veloppement sur-mesure.

Nous avons commencĂ© Ă  travailler avec Retraites Populaires au printemps 2020, aprĂšs avoir dĂ©fini ensemble ce qui allait devenir leur nouvelle stack de frontend : Vue.js sur TypeScript. Il avait Ă©tĂ© dĂ©cidĂ© que nous construirions l’interface sur la base de Vuetify, une grande bibliothĂšque de composants trĂšs populaire en open source. Étant donnĂ© que nos applications cibles Ă©taient destinĂ©es Ă  des client∙e∙s B2B et des employĂ©âˆ™e∙s, utiliser des composants prĂȘts Ă  l’emploi semblait plus judicieux que de tout crĂ©er de zĂ©ro.

Nous avons consacrĂ© ensemble quelques sprints Ă  l’élaboration d’une premiĂšre application qui visait une API Ă©laborĂ©e parallĂšlement en interne. L’application a Ă©tĂ© mise en ligne alors que nous Ă©tions dĂ©jĂ  en train de rĂ©flĂ©chir Ă  notre prochaine collaboration avec Retraites Populaires quelques mois plus tard : un vrai succĂšs. Une autre application Ă©tait en prĂ©paration, dont la crĂ©ation reposerait elle aussi sur Vue.js. Il Ă©tait donc bien Ă©videmment temps de se demander comment partager les Ă©lĂ©ments communs aux deux applications.

Component libraries : défis et solutions

Le principal problĂšme de l’extraction de code, c’est la perte de contexte. On ne sait plus Ă  quoi les choses ressemblent, ni comment elles fonctionnent. Nous ne pouvions donc pas nous contenter de mettre du code dans un rĂ©pertoire sĂ©parĂ©. Il fallait que nous le prĂ©sentions et que nous le documentions. Inutile d’aller chercher bien loin : nous utilisons Storybook depuis un bon bout de temps maintenant et en sommes trĂšs satisfaits. Et lĂ  encore, ce serait la solution parfaite. Storybook s’intĂšgre idĂ©alement dans Vue.js grĂące Ă  son auto-documentation d’API de composants tout en nous laissant entiĂšrement libres de documenter n’importe quoi d’autre avec Markdown.

Des composants visuels aux rĂšgles de validation de formulaires, tout ce qui pouvait ĂȘtre utile Ă  la crĂ©ation de nouvelles applications a Ă©tĂ© centralisĂ© dans cette component library. Mais la documentation n’est pas le seul prĂ©requis pour garantir la pĂ©rennitĂ© d’un tel outil. La qualitĂ© doit elle aussi ĂȘtre au rendez-vous. Une modification apportĂ©e Ă  la bibliothĂšque ne doit pas gĂ©nĂ©rer de bugs lors de son actualisation au sein de projets. Pour Ă©viter ce genre de problĂšmes, nous Ă©crivons des tests d’unitĂ© et d’intĂ©gration pour toutes les fonctionnalitĂ©s. Les suites de test s’exĂ©cutent automatiquement Ă  chaque changement de code afin d’empĂȘcher toute rĂ©gression.

Nous avons Ă©galement recours au versionnage. À chaque fois que nous changeons quoi que ce soit dans la base de code, nous donnons Ă  cette modification un nom standard (bug, fonctionnalitĂ©, refactor, etc.). Cela nous permet de gĂ©nĂ©rer ce que les dĂ©veloppeurs appellent un « changelog » (journal des modifications) et de crĂ©er automatiquement des versions selon un procĂ©dĂ© de versionnage sémantique. RĂ©sultat : nous gardons une vue d’ensemble claire des changements effectuĂ©s, ce qui nous aide Ă  mettre Ă  jour la bibliothĂšque dans tous les projets qui l’utilisent par la suite.

Un véritable atout

La crĂ©ation et l’entretien de component libraries de qualitĂ© qui sont vraiment utiles requiĂšrent de rĂ©els efforts. Heureusement, il existe de nombreux outils destinĂ©s Ă  rationaliser les processus. Quand ils sont bien faits, ils constituent une aide prĂ©cieuse pour garantir la cohĂ©rence des bibliothĂšques et rĂ©duire la durĂ©e globale de dĂ©veloppement. Ils permettent Ă©galement un procĂ©dĂ© d’itĂ©ration de l’upfront pour le prototypage et le test de nouvelles fonctionnalitĂ©s communes Ă  plusieurs applications, avant leur mise en ligne.

Aux cĂŽtĂ©s de Retraites Populaires, nous travaillons Ă  diffĂ©rentes applications web en nous servant de leur bibliothĂšque de composants. Et ce n’est qu’un dĂ©but. En tout, nous avons dĂ©jĂ  Ă©ditĂ© 42 versions correspondant entre autres Ă  des dizaines de changements. À l’exception d’une modification qui a Ă©tĂ© vraiment radicale, tous les autres changements ont Ă©tĂ© apportĂ©s trĂšs facilement Ă  toutes les applications, en actualisant simplement la version de la bibliothĂšque de composants.

5 bonnes raisons pour que tu envisages toi aussi d’avoir recours à une component library

Comme nous venons de le voir, une bibliothĂšque de composants est un document vivant gĂ©nĂ©rĂ© Ă  partir de code source. Elle constitue une base claire quant au visuel et au niveau du code. L’alignement entre spécialistes de l’UX et développeurs facilite la collaboration. En quoi cela peut-il t’ĂȘtre utile ?

  1. Tu Ă©conomises du temps et de l’argent car l’application peut ĂȘtre dĂ©veloppĂ©e selon un processus modulaire. Une fois que la bibliothĂšque existe, c’est un document vivant destinĂ© Ă  tous tes dĂ©veloppeur-euse-s et il peut ĂȘtre utilisĂ© pour tous les projets dont tu charges une agence.
  2. Tu disposes d’une seule rĂ©fĂ©rence centrale en permanence mise Ă  jour, pour tous les acteurs de tes projets, et chacun a accĂšs Ă  la mĂȘme chose.
  3. Tu as moins de mal Ă  anticiper en amont tous les aspects liĂ©s Ă  la convivialitĂ©, Ă  l’accessibilitĂ© et Ă  la compatibilitĂ© mobile, Ă©tant donnĂ© que tous les composants sont dĂ©veloppĂ©s et prĂ©sentĂ©s dans un Ă©tat et un contexte proches du rĂ©sultat final.
  4. La maintenance est plus simple et l’utilisation du guide de style permet d’amĂ©liorer et de contrĂŽler la qualitĂ© gĂ©nĂ©rale des projets.
  5. Enfin soyons honnĂȘtes : des outils efficaces rendent le travail de chacun plus agrĂ©able.

Collaborateur∙rice∙s direct∙e∙s, autres personnes impliquĂ©es dans le projet : pour tous, la flexibilitĂ© est indispensable. Que tu changes d’agence ou que tu aies de nouveaux dĂ©veloppeurs de frontend Ă  intĂ©grer dans ton Ă©quipe, le guide de style facilite le transfert d’un projet existant. Si ton entreprise a du mal Ă  gĂ©rer plusieurs applications censĂ©es fournir le mĂȘme excellent niveau d’expĂ©rience, de qualitĂ© et d’accessibilitĂ©, contacte-nous !


Qu’en penses-tu?