Comment combiner la puissance d’un véritable CMS (avec un BO construit sur WordPress) et la fluidité d’une webapp ? Notre réponse : avec une architecture WordPress Headless, et un front React. Pour connaitre dans quels autres cas utiliser WordPress retrouvez notre article Dans quels cas WordPress est-il pertinent ?
Présentation du roi des CMS.
La gestion de contenu dans une application métier
Dans les applications Web modernes, souvent construites pour un besoin spécifique, le système de gestion de contenu est peu présent, et développé à la main dans l’application. On ne dispose généralement donc pas d’un véritable CMS, et si le besoin en contenu n’est pas simplissime, son utilisation n’est pas très complète.
Avec WordPress (le roi des CMS), énormément de possibilités sont ouvertes. (voir notre article Construire un intranet performantavec WordPress). Nous avons mis en place une architecture « headless », en envisageant donc d’utiliser WordPress en tant que backoffice, et React en tant qu’application web.
Principe d’une architecture Headless
Sur un projet récent, l’architecture du projet répondait à un besoin client, celle de pouvoir administrer dans un back-office commun un site vitrine ainsi qu’une plateforme web sur-mesure. Afin que l’administration des contenus soit simple et intuitive, il a été décidé d’utiliser WordPress. Cependant, la plateforme ayant pour objectif d’être réactive, fluide et moderne, à l’image d’une web-app, il était nécessaire pour le front-office d’utiliser un framework Javascript. Ainsi le choix final s’arrêta sur une combinaison d’un WordPress Headless en combinaison avec l’api-rest WordPress pour le back et ReactJS pour le front.
Organisation technique
La mise en place s’effectue en quasi-parallèle pour le back et le front. Un repository est créé pour le back-office et l’API WordPress, un autre pour le React. Ce fonctionnement en deux environnements de travail distincts nous permet de travailler en parallèle sur les demandes fonctionnelles de l’API ainsi que sur les écrans sans risque de conflits ou de perte de clarté sur le projet.
Il est cependant important de ne jamais perdre la vue d’ensemble. L’API WordPress et le front en React doivent en effet s’interfacer comme il faut. Les appels à l’API doivent être correctement effectués et les réponses de cette dernière doivent être cohérentes avec les écrans qui vont les afficher.
Bien-sûr, l’utilisation d’une stack peu orthodoxe comme celle-ci augmente la probabilité de voir apparaître des bugs. Comme toutes les technologies web, elle a ses points forts et ses points faibles.
Avantages et inconvénients d’une architecture Headless avec WordPress
Les points forts en développement 👍
- Un développement en parallèle du Front et du Back-Office
- Un projet séparé en 2 pour plus de clarté
- 2 technologies connues : On ne réinvente pas la roue
- Un temps de dev réduit pour un Back-Office
- Une bibliothèque Front-End solide et puissante
- Une API REST qui peut livrer au Web, à une App Mobile
Les points forts pour le client 👍
- Un projet qui peut être facilement développé en lots
- Un Back-Office intuitif et la plupart du temps déjà connu
- Un Front moderne et réactif
- Deux technos très utilisées : Peu de problèmes de maintenabilité
- Une base solide pour ajouter des fonctionnalités (recherche, langue…)
- Une architecture en modules qui permet de faire évoluer ses écrans
Les points faibles en développement 😒
- Cela demande de se mettre d’accord sur les données envoyées et de sur-communiquer entre développeurs
- Le ReactJS demande d’avoir une solide d’expérience
- Un projet ReactJS mal pensé devient très vite illisible
Les points faibles pour le client 😒
- Nécessite une bonne connaissance de WordPress pour des besoins particuliers
- Le coût de développement peut être plus élevé avec cette architecture
- ReactJS demande un nombre de tests plus important que sur un site classique
Notre conclusion sur l’architecture headless avec WordPress
L’architecture WordPress + ReactJS se substitue à la plupart des solutions API + Framework Front, offrant une bonne flexibilité ainsi que de bonnes performances, tout en gardant les points forts du CMS en termes de temps de mise en place initiale faible et en facilité de prise en main.
