Wordpress

Faust.js, le framework pour WordPress sans tête

Faust est le framework frontal pour la création de sites WordPress sans tête. Au cours des six derniers mois, l'équipe Faust a recherché, prototype et testé une nouvelle façon de créer des sites WordPress sans tête qui se concentrent sur l'expérience des développeurs.

Headless WordPress offre de nombreux avantages par rapport à WordPress traditionnel : une meilleure expérience de développement, une évolutivité, une meilleure sécurité et de meilleures performances. Il existe également de nombreux outils à votre disposition lors de la création de sites WordPress Headless. Il existe un certain nombre de frameworks différents parmi lesquels choisir, tels que Next.js, Gatsby, Nuxt et SvelteKit pour n'en nommer que quelques-uns. 

Bien qu'il soit agréable d'avoir de la flexibilité et du choix, cela peut être une tâche intimidante si vous n'êtes pas intimement familier avec tous les frameworks front-end, bibliothèques, optimisations, méthodes de déploiement, etc. C'est l'un des nombreux problèmes que Faust résout, et il fonctionne avec n'importe quel service de build et hôte frontal.

Ce qui suit est une liste de fonctionnalités qui sont absolument nécessaires lors de la création de WordPress Headless :

  • Génération de site statique (SSG): vous devez pouvoir distribuer votre contenu à l'échelle mondiale à la périphérie et optimiser la diffusion en créant des pages statiques à l'avance.
  • Rendu côté serveur (SSR): Parfois, vous pouvez profiter de SSG et d'autres fois, vous ne pouvez pas. Le SSR et le SSG (et le rendu côté client) doivent être possibles afin que vous puissiez choisir ce qui a du sens pour votre entreprise et votre application.
  • Récupération de données facile: Avec WordPress traditionnel, vous êtes habitué à avoir la disponibilité de toutes les données dont vous avez besoin sans avoir à faire de requêtes compliquées. Un site WordPress Headless ne devrait pas être différent.
  • Configuration minimale: Vous devriez passer du temps à développer votre entreprise, sans vous soucier de la configuration de la construction et de l'optimisation de la production.
  • Éléments essentiels du Web : Vous devriez pouvoir profiter de toutes les astuces nécessaires pour obtenir les meilleurs scores Lighthouse.
  • Expérience de publication (PX) : Vos éditeurs ne devraient pas avoir à sacrifier l'UX simplement parce que votre site est sans tête.
  • Expérience de développeur (DX): Il devrait être agréable de créer des sites WordPress Headless. Les développeurs ne doivent pas avoir l'impression qu'ils se battent contre le système, mais plutôt que le système travaille pour eux.

Dans cet esprit, nous sommes fiers aujourd'hui de présenter Faust à la communauté WordPress. Faust se concentre sur la fourniture de la meilleure expérience de développeur lors de la construction sur Headless WordPress tout en préservant l'expérience de publication que vous connaissez et aimez avec WordPress. Voici quelques-unes des fonctionnalités de Faust disponibles aujourd'hui :

  • SSG et SSR: Faust est construit sur Next.js, vous permettant de profiter de SSG et SSR qui sont déjà disponibles avec Next.js
  • GraphQL: Faust utilise un client GraphQL de pointe qui vous permet d'interroger l'API WordPress WPGraphQL sans avoir à connaître les requêtes GraphQL à l'avance. La première fois que vous voyez cela en action, cela ressemble à de la magie, et Faust est le premier framework offrant ce type de fonctionnalité. Ne pensez plus jamais à écrire une requête GraphQL !
  • Aperçus de contenu: Il a été difficile de faire fonctionner les aperçus de manière cohérente pour Headless WordPress. Faust résout ce problème pour que vous n'ayez à vous soucier de rien.
  • Authentification: Faust a des mécanismes intégrés pour s'authentifier avec votre backend WordPress afin que vous puissiez facilement créer du contenu bloqué, des expériences de commerce électronique ou faire d'autres demandes authentifiées.
  • Réagir: WordPress utilise React dans certaines parties du noyau DX. Faust va encore plus loin en vous permettant de créer l'intégralité de votre interface en utilisant la bibliothèque d'interface la plus populaire.
  • Crochets React: Faust est une extension naturelle de votre API WordPress car elle rend l'obtention de données à partir de WordPress incroyablement simple.
  • Types de publication personnalisés: En raison de la façon unique dont Faust vous aide à récupérer des données, il est trivial d'ajouter des types de publication personnalisés à votre site WordPress, puis d'y accéder sur le frontend.
  • Flexibilité: Bien que Faust fonctionne mieux avec Next.js et React, si vous souhaitez utiliser d'autres outils tels que Gatsby, Nuxt et SvelteKit, vous pouvez le faire !

Faust est déjà utilisé et la communauté grandit

Faust compte actuellement plus de 300 étoiles et 19 contributeurs sur GitHub et plus de 150 téléchargements hebdomadaires sur NPM. De nombreux sites utilisent déjà Faust en production. Nous tenons à remercier chaleureusement les premiers utilisateurs (je regarde également vous tous @wpengine/headless adopters) qui nous ont accompagnés tout au long du processus pour identifier les bogues, demander des fonctionnalités et nous aider de manière générale à façonner Faust dans ce que c'est aujourd'hui!

Trois principes directeurs de Faust

Faust a fait ses débuts lors d'un hackathon interne chez WP Engine. L'objectif était de créer une solution pour prévisualiser les articles et les pages dans un site WordPress Headless. À l'époque, quelques options d'aperçus dans Headless WordPress existaient déjà, mais la plupart des solutions sacrifiaient l'expérience de l'éditeur en l'obligeant à se connecter à un site externe ou à afficher sa page d'aperçu à l'intérieur d'un cadre. La solution que nous avons proposée a permis la même expérience à laquelle l'éditeur est habitué avec la prévisualisation des publications sur un site WordPress traditionnel, mais à la place en utilisant Headless WordPress.

Le hackathon n'a duré qu'une journée, mais lorsque nous l'avons démontré au reste de WP Engine, nous avons reçu une tonne de commentaires positifs et de questions de la part des personnes au sein de l'entreprise. La plupart des questions partageaient un thème commun : que pouvons-nous faire d'autre avec Headless WordPress pour garantir que l'expérience de publication imite celle de WordPress traditionnel ?

Depuis le hackathon, nous avons entrepris de mettre en place un cadre qui facilite la création de sites WordPress Headless avec trois principes clés à l'esprit :

  1. Nous nous efforcerons d'obtenir une expérience de publication cohérente avec WordPress traditionnel. Lorsque vous publiez du contenu, vous ne devez pas savoir si votre site est un site traditionnel ou un site sans tête.
  2. WordPress devrait être le magasin de données et le moteur de diffusion de contenu et, dans la mesure du possible, nous devrions permettre au frontend de déterminer la présentation.
  3. L'expérience de développeur est un citoyen de première classe. Cela signifie développer à l'air libre, se concentrer sur la fourniture de fonctionnalités qui semblent naturelles à utiliser et maintenir une documentation complète, cohérente et à jour.

Ce qui nous attend?

Faust résout déjà bon nombre des défis auxquels vous êtes confronté lors de la création d'un site WordPress sans tête. Cependant, le travail n'est pas fait. Faust ne fait que commencer. La route à venir sera pavée par la communauté qui grandit rapidement.

Comment pensez-vous que Faust devrait évoluer ? Devrions-nous ajouter la prise en charge de plus de bibliothèques, de frameworks et d'outils ? Devrions-nous travailler pour améliorer l'expérience d'utilisation des blocs Gutenberg en mode headless ? Nous vous encourageons à vous rendre sur notre référentiel GitHub, à le mettre en vedette, à le regarder et même à contribuer sous la forme d'un numéro ou d'un RP ! Consultez également faustjs.org, un site dédié à Faust. Vous y trouverez toute notre documentation, y compris un didacticiel, des guides pratiques et une documentation de référence. Vous devriez également rejoindre notre serveur Discord pour la communauté Headless WordPress !

Articles Relatifs

0 Commentaires
Commentaires en ligne
Voir tous les commentaires
Retour à bouton en haut