Headless, qu'on lui coupe la tête
À travers les yeux de
Guillaume
Deblock
Développeur Front-end
5
minutes de lecture
min
Expertise :
Chez Les Fabricants, on est plutôt du genre curieux et touche-à-tout. Toujours prêts et ravis à l’idée de relever les défis qui nous sont présentés par nos partenaires et futurs partenaires ! On s’empare à ce titre de tout ce qui peut répondre à leurs problématiques, en évaluant bien entendu le bien fondé d’une solution plutôt qu’une autre selon les enjeux et les finalités identifiés. C’est notamment le cas des architectures dites headless, dont il est question dans cet article 👇
Headless, qu'on lui coupe la tête
Par
Deblock
Guillaume
-
Développeur Front-end
This is some text inside of a div block.
5
min

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Un peu d'histoire 🔎

Avant de devenir ce qu’il est, le web s’est quelque peu cherché 🧐. Chaque développeur y allait de son implémentation maison avant qu’un certain nombre de solutions innovantes et prêtes à l’emploi n’apparaissent, et avec elles une certaine standardisation.

Parmi celles-ci, les CMS (Content Management System) Wordpress ou Drupal par exemple, pour ce qui concerne la gestion de contenus, ou encore Magento ou Prestashop pour les aspects e-commerce, ont grandement contribué à rendre accessible à toutes et à tous le développement de sites web ou de plateformes e-commerce.

Autant de solutions qui proposent, clés-en-main, un certain nombre de fonctionnalités formant un tout cohérent, depuis l’administration du site en lui-même, jusqu’à la partie dite “front” (l’interface depuis laquelle l’utilisateur interagit et accède à l’information 👀).

Cependant cette approche très monolithique présente aussi son lot de limitations. Ces dernières années, la multiplication des canaux de diffusion (smartphones, smart TV, IoT…) a en effet poussé à une forte nécessité d’adaptation. Le site web traditionnel, consultable depuis le navigateur de son ordinateur, n’est désormais plus le seul à vouloir interroger le système d’informations.

schema-headless-cms-solution

Ainsi naquirent les solutions headless 🙏

Pour pallier ces limitations, les solutions dites headless (“sans tête”) reposent sur la mise à disposition d’une (ou plusieurs) API (application programming interface). Un guichet unique, en quelque sorte, pour quiconque souhaite accéder à l’information.

Qu’il s’agisse d’un applicatif magasin, d’une application mobile, du site web e-commerce ou institutionnel… Chaque département a la possibilité d’accéder à la même information en passant par cette interface commune.

Le headless en quelques points 👇

Souplesse et flexibilité 🧘
Grâce à cette décorrélation entre la partie administration et interface front, vous n’êtes plus bridé(e) par ce qu’une solution vous impose en matière de template et de design. Vous avez carte blanche sur la manière de consommer votre contenu, permettant d’optimiser les performances et autres métriques sans contraintes, pour une expérience utilisateur aux petits oignons 👨‍🍳

Communication omnicanale 📣
L’expérience globale gagne par ailleurs en cohérence. La communication et les échanges avec votre audience s’en trouvent plus fluides et consistants. Une seule source de vérité pour chaque canal de communication.

Indépendance technologique 👌
La difficulté à trouver des profils pour une technologie vieillissante est réelle dans le contexte actuel. En optant pour une solution headless, le changement d’une technologie côté front s’en trouve facilitée. Une telle approche peut par ailleurs être attrayante pour sortir du lot et attirer des profils développeurs 😏.

La solution à tous les maux ?

Les solutions headless sont séduisantes de par leurs promesses en matière de flexibilité et d’agilité. Mais elles ne sont pas sans difficultés pour autant ⚠

Les prétendants sont nombreux et s’y retrouver dans ce qu’ils proposent peut s’avérer chronophage. Aussi, si certaines solutions sont open source, une grande partie reste avant tout sous modèle propriétaire (on parle alors de plateforme SaaS ou Software As A Service).

Dès lors, il est nécessaire de considérer la capacité à en sortir si le besoin s’en fait sentir. Le but affiché n’est pas de se retrouver dans la situation paradoxale d’être marié à l’une d’entre elles. Vous voulez vraisemblablement rester propriétaire de votre contenu.

Par ailleurs, les offres d’appel sont souvent alléchantes pour les projets de faible envergure, mais peuvent rapidement devenir plus conséquentes à mesure que les besoins évoluent (nombre de contributeurs grandissant impliquant le passage à un palier de tarification supérieur 💸 etc).

La maturité sur les questions d’infrastructure informatique au sein même de votre structure se pose enfin. Si l’approche headless permet de se soustraire en grande partie aux questions purement matérielles et d'hébergement, d’autres peuvent émerger comme l’orchestration de services les uns avec les autres ou encore la gestion de flux de données.


1 Schéma headless provenant de l'agence customR, (lyon)

Partager cet article avec votre réseau

Guillaume Deblock
Développeur Front-end chez Les Fabricants

Contacter l’auteur

Deblock
Guillaume
Développeur Front-end
Chez Les fabricants

Inscrivez vous à la newsletter
et suivez nos derniers articles

Tout les mois, un condensé d’articles directement dans votre boite mail
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.