Webflow DevLink – Fonctionnalités et avantages
Lors de la première mise à jour produit tenue fin mai de cette année, Webflow a notamment présenté, parmi un ensemble d'autres mises à jour, une fonctionnalité innovante appelée DevLink.
DevLink vise à combler le fossé entre les designers et les développeurs, en rationalisant le processus de développement web et en améliorant la collaboration.
Bien qu'il soit encore en version bêta et que nous n'ayons pas encore vu son plein potentiel, dans cet article, nous allons explorer les fonctionnalités de DevLink et examiner ses nombreux avantages pour les designers, les développeurs et l'ensemble du flux de travail de développement web.
Comprendre DevLink
Dans son essence, DevLink est une fonctionnalité qui facilite une collaboration fluide entre designers et développeurs. Il agit comme un pont de communication, permettant à ces deux rôles essentiels de travailler ensemble plus efficacement.
DevLink permet aux designers d'exporter les composants créés avec le puissant éditeur visuel de Webflow vers une application React, permettant ainsi aux développeurs d'utiliser ces composants dans un environnement de codage séparé de Webflow, leur donnant accès aux avantages de la plateforme React.js pour donner vie à ces designs.
Comment fonctionne DevLink dans Webflow ?
La première chose à savoir, comme nous l'avons brièvement mentionné précédemment, est que la fonctionnalité Webflow DevLink est actuellement en bêta ouverte et pour y accéder, vous devez vous inscrire avec une adresse e-mail de compte Webflow. La deuxième chose est que DevLink est pour le moment uniquement pris en charge dans le framework React Next.js.
Si vous n'êtes pas familier avec React, cliquez sur ce guide Webflow pour apprendre à configurer votre nouveau projet Next.js.
Après avoir fait cela, assurez-vous d'exécuter « npm run dev » pour vérifier que votre projet fonctionne correctement, puis passez aux étapes ci-dessous pour connecter votre projet Webflow à votre environnement de développement local :
- Démarrez un projet Webflow
- En faisant un clic droit sur un élément, sélectionnez Créer un composant
- Allez dans le menu des composants et cliquez sur le bouton Exporter les composants
- Ensuite, copiez le fichier .webflowrc.js que vous voyez dans la fenêtre DevLink qui s'affiche, et collez-le dans un nouveau fichier dans le répertoire racine de votre projet Next.js.
De plus, vous devez remplacer l'espace réservé « [YOUR API TOKEN] » par un jeton d'accès API de votre site. Vous pouvez cliquer ici pour apprendre à générer une clé API, ou vous pouvez cliquer sur le bouton dans la description de la section Config, comme on peut le voir dans l'image ci-dessus.
Il existe également une autre méthode que vous pouvez utiliser sans stocker le jeton en texte clair ; consultez le guide Webflow pour cela et pour d'autres détails plus approfondis sur Webflow DevLink.
- Enregistrez le fichier
Après avoir effectué cela, il y a deux étapes principales supplémentaires à réaliser :
- Installer le module NPM – exécutez simplement la commande ci-dessous dans le répertoire racine du terminal de votre projet Next.js.
- Synchronisez vos composants avec votre projet Next.js (chaque fois que vous apportez une modification sur votre canevas Webflow)
Pour ce faire, copiez le texte « npx webflow devlink sync » que vous pouvez trouver dans la fenêtre d'exportation ci-dessus, et saisissez-le dans le répertoire racine du terminal. Cela synchronisera vos composants avec votre projet Next.js et les importera dans votre application.
Gardez à l'esprit que tous les éléments Webflow ne peuvent pas être exportés avec DevLink.
Les éléments tels que : Collection List, éléments E-commerce (Panier, Ajouter au panier, Web Payments, PayPal), Lottie Animations et Lightbox ne sont pas pris en charge.
Avantages de DevLink dans Webflow
DevLink est le pont qui nous permet de facilement « réunir » deux environnements de code différents. Il apporte plus d'interactivité de conception et de meilleures expériences dynamiques.
Non seulement cela, mais avec deux plateformes qui se rejoignent, il existe de nombreux autres avantages :
1. Collaboration améliorée entre designers et développeurs
DevLink améliore la communication et la collaboration entre designers et développeurs. Il vous permet de créer visuellement des composants React Webflow prêts pour la production sur le canevas. Cela rationalise le processus de traduction des designs en code fonctionnel, rendant la collaboration entre les équipes de design et de développement plus efficace.
2. Processus de développement web rationalisé
Avec Webflow DevLink, les designers peuvent se concentrer sur la conception et le prototypage sans se soucier de la mise en œuvre technique. Les développeurs peuvent accéder aux fichiers de design et extraire facilement les styles CSS et les ressources, réduisant le temps consacré aux tâches de codage manuel. Ce processus rationalisé élimine les allers-retours inutiles et accélère le calendrier de développement, permettant de lancer de nouveaux produits et applications sur le marché plus rapidement.
3. Efficacité et productivité accrues
En utilisant DevLink, les designers peuvent apporter des modifications au design en temps réel, et les développeurs peuvent immédiatement voir ces mises à jour. Cette boucle de retour immédiate élimine le besoin de transferts de design chronophages. En conséquence, la productivité est stimulée et les délais des projets peuvent être considérablement réduits.
4. Dépendance réduite à l'expertise en codage
En apportant la puissance de la plateforme de développement visuel de Webflow aux projets React, DevLink permet aux utilisateurs de tirer parti du canevas visuel sans code de Webflow. Ils peuvent créer des composants d'interface utilisateur, des interactions complexes et des animations sans avoir besoin de coder et traduire de manière transparente ces designs visuels en code propre et sémantique prêt pour la production.
Utiliser DevLink efficacement
Pour maximiser les avantages de DevLink, il est essentiel d'appliquer certaines bonnes pratiques.
Établir des canaux de communication clairs est très important. Communiquer avec les développeurs sur ce que le design devrait être, comment il devrait apparaître d'un point de vue statique ou implémenté, organiser des sessions de retour d'information, etc., peut aider à s'assurer que tout le monde est sur la même longueur d'onde tout au long du processus de développement.
Une autre bonne pratique consiste à s'assurer que vos composants Webflow ; tous les éléments de design et les parties de design sont gérés dans Webflow avant de commencer à modifier des éléments dans votre application React.
Il existe également deux nouvelles fonctionnalités introduites avec DevLink : les Slots et les Runtime props. Elles offrent des capacités étendues pour certaines fonctionnalités qui ne sont pas encore fournies ou prises en charge nativement dans Webflow.
Les Runtime props vous donnent la possibilité d'ajouter des propriétés plus complexes à vos composants que Webflow n'offre pas actuellement, par exemple, un gestionnaire onClick personnalisé. Les Slots, quant à eux, vous permettent d'imbriquer des composants dans des composants dans votre projet React.
À quoi s'attendre à l'avenir ?
DevLink n'en est qu'à ses débuts et de nombreuses choses passionnantes sont promises pour l'avenir. DevLink étant actuellement disponible uniquement sur la plateforme React, il y aura bientôt un support pour Vue.js et d'autres frameworks front-end.
L'intégration de Storybook est également annoncée pour bientôt, et il sera possible de ramener les composants React vers le site Webflow, car DevLink fonctionne actuellement de manière unidirectionnelle et ne renvoie pas les mises à jour React vers Webflow.
Conclusion
DevLink dans Webflow révolutionne la façon dont les designers et les développeurs collaborent, rationalise le flux de travail de développement web et améliore l'efficacité. En créant ce pont entre deux environnements de codage, les utilisateurs peuvent améliorer à la fois leur produit et l'efficacité de leur temps de travail.
Comme il s'agit d'une nouvelle fonctionnalité et qu'il n'existe pas beaucoup de guides disponibles, pour en savoir plus sur DevLink, vous pouvez consulter le guide sur la Webflow University et consulter ces deux très utiles vidéos où vous pouvez voir visuellement les étapes du guide mises en pratique et avoir une compréhension plus claire.
Nous encourageons les designers React à explorer et adopter DevLink dans leurs projets, et nous attendons avec impatience les futures possibilités et avancées de la fonctionnalité DevLink de Webflow.
Chez Wedoflow, nous nous spécialisons dans la création de magnifiques templates Webflow pour diverses industries. Prenez un moment pour explorer notre collection et trouver le template parfait pour vos besoins. N'oubliez pas de visiter notre blog et de nous suivre sur nos réseaux sociaux pour les dernières nouvelles et informations sur le design web et Webflow en particulier.
