Comment créer une application React à partir d'un projet Webflow

tl; dr: Il peut être transpilé avec une seule commande.

En tant que pigiste, je travaille souvent avec des designers. Pas une fois et pas deux fois, je suis tombé sur Webflow - un studio de conception Web, où le concepteur peut utiliser tous ses actifs dans des pages Web réactives et démontrables. Ces pages Web semblent nettes et réactives et peuvent être téléchargées sous forme de fichiers HTML / CSS avec leurs scripts, images et polices.

En un coup d'œil, cela peut faciliter le processus d'obtention d'une application. Après tout, nous disposons d’un site Web opérationnel. Par conséquent, la logique avec React ne devrait pas être trop compliquée, non? Tout ce que nous avons à faire est de prendre le code HTML, de le placer sous une méthode render () de React.Component et d'importer le style correspondant avec un fichier CSS externe. Eh bien, ce n'est rien qu'une promenade dans le parc.

Lorsque Webflow m'a été présenté pour la première fois par un de mes clients, j'ai supposé ce qui précède. Il m'a montré son site Web, qui semblait plutôt complet, et nous avons procédé à la rédaction d'un plan, avec toutes les caractéristiques comportementales souhaitées de la future application et un prix correspondant pour chacune de ces caractéristiques. J'étais silencieux heureux avec notre accord.

Le lendemain matin, j'ai reçu un courrier électronique du concepteur de mon client avec tous les actifs exportés par Webflow. Lorsque j'ai regardé autour de moi en espérant trouver le point de départ optimal, mon monde s'est effondré.

Les fichiers HTML étaient volumineux et volumineux, avec de nombreuses parties dupliquées, le CSS était simplement une grande feuille de style globale avec toutes les règles (très génériques), et les images ne comportaient que des noms générés de manière aléatoire. Lorsque j’ai commencé à le décomposer en composants React, j’ai appelé mon client après quelques heures d’essai et annulé le plan; comme le budget était limité et que je n’étais pas disposé à consacrer autant de temps à un projet dont la valeur n’est guère rentable.

Ci-dessus: une page Webflow dont le fichier HTML peut être trouvé ici. Crédit: campaignkit.co.
“Que dois-je faire alors?!” - Un développeur de React

Présentation de Appfairy

Appfairy est un outil CLI qui peut être facilement installé à l'aide de NPM et peut intégrer Webflow dans une application React avec une seule commande.

Pour commencer, installez d'abord appfairy globalement:

$ sudo npm install appfairy -g

Voyons maintenant quels composants de React devraient exister dans notre application en plus des pages principales. Une fois que nous les avons identifiés, nous devons sélectionner l'élément correspondant dans le projet Webflow et définir un nouvel attribut. la clé sera af-el (élément Appfairy) et la valeur doit être définie sur le nom du composant, par exemple: formulaire de consultation:

Ci-dessus: Sélection de l'élément et définition de son attribut

Nous sommes maintenant sur le point de générer un composant fonctionnel de ConsultForm React; Mais avant de passer à l’étape suivante, j’aimerais expliquer un principe important concernant le modèle de conception du code généré par Appfairy.

Comme le code Webflow est généré par la machine et que la plupart du temps n’est pas optimal, il est possible que nous rencontrions des problèmes de maintenance pour deux raisons principales:

  • L'élément cible que nous souhaitons mettre à jour / joindre aux écouteurs d'événement est difficile à identifier en raison de la complexité de l'arborescence HTML.
  • Lors de la mise à jour de la conception, nous devons également mettre à jour notre code en identifiant à nouveau les éléments cibles et en y rattachant la logique React, par ex. fonctions de mappage et gestionnaires d'événements comme onClick ().

Pour résoudre ce problème, Appfairy adopte une approche classique: nous séparons le composant en une vue et en un contrôleur, nous traitons la vue comme une boîte noire et nous ne la touchons pas lorsque le contrôleur contrôle ce qui se passe là-bas. ; cela indiquerait à la vue ce qu'il faut rendre, quand et comment rendre.

Dans l'image ci-dessus, nous avons une description schématique qui montre le flux de vues / contrôleurs. Dans un résumé, le contrôleur contient des éléments qui sont des mandataires des éléments réels. Ainsi, tout ce que nous transmettons au proxy sera automatiquement transmis à l'élément réel. Un proxy et un élément peuvent être appariés en fonction du nom du socket (af-sock), ce qui ouvre un point d'interface à la vue de tout contrôleur donné.

Revenons donc à notre exemple ConsultantForm dans notre projet Webflow: voyons quels éléments doivent être liés à une certaine logique. En règle générale, un formulaire comporte plusieurs champs d’entrée et un bouton de soumission, qui soumet les données reçues par les entrées. Par conséquent, nous appliquerions probablement une logique à ces éléments dans nos composants du contrôleur React. En conséquence, nous allons définir des attributs de socket pour chacun des éléments avec des noms distincts:

Notre projet Webflow est maintenant prêt pour la migration! Pour ce faire, nous devrons d’abord créer un répertoire nommé .appfairy à la racine de notre projet:

$ mkdir .appfairy

Appfairy utilise ce répertoire comme entrée pour la fonction CLI, ce qui signifie que nous devrons exporter notre projet et extraire le contenu du fichier zip généré dans le répertoire que nous venons de créer:

$ unzip ~ / Downloads / project.webflow.zip -d .appfairy
Ci-dessus: exportation du projet et décompression du fichier vers .appfairy dir

Il ne reste plus qu'à lancer appfairy et nos composants Webflow React seront créés et prêts à être utilisés!

$ appfairy

En conséquence, un message sera imprimé sur le terminal pour indiquer qu’un nouveau commit git a été créé avec les modifications suivantes:

🗁 public (ressources publiques devant être desservies par le serveur de notre application)
   🗀 images
   🗀 polices
   🗀 css
🗁 src
   🗀 scripts (scripts à importer dans index.js)
   🗀 styles (fichiers css à importer dans index.js)
   🗀 vues (contient ConsultFormView - autres explications ci-dessous)

La raison pour laquelle les modifications ont été disposées de cette façon est que create-react-app (qui est le démarreur d'application le plus courant pour React) utilise cette structure de dossiers. La sortie peut être mappée différemment à l'aide d'un fichier de configuration. Vous trouverez plus de détails à ce sujet dans le fichier officiel README.md, ici.

Aucun de ces fichiers ne doit être modifié ou supprimé et ne doit être géré que par la commande appfairy. Par conséquent, chaque fois que nous mettons à jour le projet Webflow, nous devons simplement répéter le processus récent et les fichiers doivent être mis à jour en conséquence.

Si vous examinez le dossier Views, vous constaterez qu'il contient un fichier nommé ConsultFormView.js. Comme je l’ai déjà mentionné, le modèle de conception d’Appfairy consiste en une vue et un contrôleur. Par conséquent, le composant ConsultFormView exporté doit être lié à un contrôleur.

Pour définir un contrôleur, créez simplement un nouveau fichier nommé ConsultFormController.js dans le dossier des contrôleurs où le contrôleur correspondant sera exporté en tant que composant React. Le contrôleur doit contenir des proxy pour les éléments d'origine et chaque proxy doit transmettre les accessoires nécessaires. Plutôt que d'expliquer davantage, j'aimerais vous donner un exemple d'implémentation possible d'un ConsultFormController:

C'est ça! Désormais, vous pouvez simplement importer le contrôleur et l’utiliser n’importe où et à tout moment, sans avoir à vous soucier de la maintenance d’un code Webflow complexe généré par une machine; et chaque fois que vous mettez à jour la conception, mettez simplement votre code à jour à l'aide de la commande appfairy.

Ci-dessus: Exemple d'utilisation d'un composant React généré par Appfairy

Références:

  • Le code source complet de l'application peut être trouvé ici.
  • Pour un tutoriel en profondeur, regardez cette vidéo.
  • Les documents API peuvent être trouvés dans le dépôt officiel Github.

Amusez-vous à concevoir / coder