Catégories
Astuces et Design

Frontity is React pour WordPress

Certains développeurs préfèrent simplement travailler dans React. Je ne leur en veux pas vraiment, car j'aime aussi React. C'est peut-être ce qu'ils ont appris en premier. Je l'utilise depuis assez longtemps, il n'y a que du réconfort. Mais c'est surtout le modèle de composants solides que j'aime. Il y a juste quelque chose de bien dans une base de code où les choses sont construites à partir de composants avec des tâches et des responsabilités claires.

Cependant, il n'est pas très courant de voir des sites WordPress construits avec React. La façon standard d'utiliser WordPress consiste à utiliser des thèmes qui sont essentiellement des styles et des fichiers PHP qui gèrent les modèles. Mais la frontité change cela. Frontity est un framework propulsé par React qui digère l'API de votre site WordPress et crée l'intégralité du front-end dans React avec tous les outils puissants que vous attendez de ce type d'environnement.

OMG, maintenant c'est une configuration rapide

C'est ainsi que j'ai pu commencer. Sur la ligne de commande, j'ai fait:

npx frontity create my-app

Ensuite, je suis allé dans le dossier qu'il a créé et j'ai fait:

npx frontity dev

Cela fait tourner instantanément un site avec lequel vous pouvez commencer à travailler.

Pour que cela me paraisse plus réel, je me suis frontity.settings.js et changé l'API source pour pointer sur CSS-Tricks:

{
  name: "@frontity/wp-source",
  state: {
    source: {
      api: "https://css-tricks.com/wp-json",
    },
  },
},

Et maintenant, regardez ce que je reçois:

C'est sauvage. Pour certains projets, c'est tout de suite prêt à être déployé.

Découvrez leur vidéo d'introduction qui passe par cette chose exacte

Se rendre au travail

Mon premier instinct avec des choses comme ça est de mettre mes mains dans le style tout de suite. Le thème qui s'installe par défaut est le thème Mars et ils ont un bon guide pour vous aider à comprendre comment cela fonctionne. Le thème utilise Emotion pour le style, de sorte que les composants ont des styles avec lesquels vous pouvez jouer. J'ai trouvé le composant dans index.js et a immédiatement fait le background: red changement!

const HeadContainer = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: red;
`;

Il a rechargé ce module à chaud instantanément:

S'agit-il de l'une de ces technologies côté client uniquement?

C’est ce que je me suis dit. Je veux dire, l'un des avantages d'utiliser WordPress tel quel est que vous obtenez le rendu du serveur gratuitement. Cela signifie qu'aucun souci de référencement (nous savons que les sites rendus côté client peuvent prendre une semaine ou plus pour être explorés à chaque changement). Cela signifie résilience et rapidité.

Frontity Est-ce que faire le rendu côté serveur! Il utilise le rendu isomorphe, ce qui signifie que vous avez besoin d'un serveur Node pour rendre les pages, mais cela signifie que le navigateur obtiendra du HTML entièrement formé pour les pages!

C'est un match parfait pour Vercel, en gros.

De manière similaire à la facilité d'échafaudage et de développement d'un nouveau site, il vous suffit de le préparer pour la production:

npx frontity build

Exécutez ensuite le serveur Node:

npx frontity serve

Cool.

J'aime aussi beaucoup qu'il y ait une communauté autour de tout ça. Si vous avez besoin d'aide, vous l'obtiendrez.

Il s'agit d'un scénario du meilleur des mondes.

Je suis toujours très heureux de créer des sites avec WordPress, et doublement maintenant que nous avons l'éditeur de blocs à utiliser. J'aime vraiment avoir une expérience d'éditeur qui m'aide à écrire et à créer le type de pages que je veux créer.

Mais je aussi comme travailler avec des architectures basées sur des composants qui ont des environnements de développement local rapides, faciles à utiliser et rafraîchissants. Une fois que vous travaillez dans ce type d'environnement de développement, il est difficile d'utiliser autre chose! Beau DX.

Et moi Aussi aussi Je veux être sûr que les sites que je déploie en production sont rapides, robustes, résilients, accessibles et optimisés pour le référencement.

Je voudrais tout ça avec un site Frontity.


Une autre chose que j'aime ici, c'est qu'Automattic eux-mêmes est à bord de tout cela. Pas seulement dans l'esprit, mais ce sont littéralement de gros investisseurs. Je pense qu'ils sont très intelligents de voir cela comme une partie importante de l'écosystème WordPress. Construire avec WordPress ne signifie pas ne pas construire avec React, surtout avec Frontity qui fait une grande partie du travail lourd.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *