1 modèle Webflow GRATUIT pour 2 achats — Réclamez le vôtre dès maintenant ! 💙🎉😍
Fr
Lors de la première mise à jour du produit qui a eu lieu fin mai de cette année, Webflow a fait partie de nombreux autre mises à jour a introduit une fonctionnalité innovante appelée DevLink.
DevLink vise à combler le fossé entre les concepteurs 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 ses nombreux avantages pour les concepteurs, les développeurs et le flux de travail de développement Web en général.
À la base, DevLink est une fonctionnalité qui facilite une collaboration fluide entre les concepteurs et les développeurs. Il agit comme un pont de communication, permettant à ces deux rôles cruciaux de travailler ensemble plus efficacement.
DevLink permet aux concepteurs d'exporter les composants qu'ils ont créés à l'aide du puissant éditeur visuel de Webflow vers une application React, ce qui permet essentiellement aux développeurs d'utiliser ces composants dans un environnement de codage distinct de Webflow, leur donnant ainsi accès aux avantages de la plateforme React.js pour donner vie à ces conceptions.
La première chose à savoir, comme nous l'avons brièvement mentionné précédemment, est que la fonctionnalité Webflow Devlink est actuellement en version bêta ouverte et pour y accéder, vous devez inscrivez-vous pour cela avec l'adresse e-mail d'un compte Webflow. La deuxième chose est que DevLink n'est pour le moment pris en charge que dans le framework React Next.js.
Si vous n'êtes pas familier avec React, cliquez sur ce Webflow guide pour savoir comment configurer votre nouveau projet Next.js.
Après cela, assurez-vous d'exécuter « npm run dev » pour vous assurer que votre projet fonctionne correctement, puis passez aux étapes ci-dessous pour connecter votre projet Webflow à votre environnement de développement local :
Vous devez également remplacer l'espace réservé « [VOTRE JETON API] » par un jeton d'accès à l'API de votre site. Vous pouvez cliquer ici pour savoir comment générer une API ou vous pouvez également cliquer sur le bouton dans la description de la partie Configuration, comme le montre l'image ci-dessus.
Il existe également une autre méthode que vous pouvez utiliser sans stocker le jeton en texte brut, consultez le Webflow guide pour cela et pour d'autres détails plus approfondis sur Webflow DevLink.
Une fois cette opération terminée, vous devez effectuer deux autres étapes principales :
Pour ce faire, copiez le texte de synchronisation npx webflow devlink que vous pouvez trouver dans la fenêtre d'exportation ci-dessus, et saisissez-le dans le répertoire racine du terminal. Cela permettra de synchroniser vos composants avec votre projet next.js et de les importer 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 : la liste des collections, les éléments de commerce électronique (panier, ajouter au panier, paiements Web, PayPal), Lottie Animations et Lightbox ne sont pas pris en charge.
DevLink est le pont qui nous permet de « relier » facilement deux environnements de code différents. Il apporte une plus grande interactivité en matière de conception et de meilleures expériences dynamiques.
De plus, la combinaison de deux plateformes offre de nombreux autres avantages :
DevLink améliore la communication et la collaboration entre les concepteurs et les développeurs. Il vous permet de créer visuellement des composants Webflow React prêts à la production dans le canevas. Cela rationalise le processus de traduction des conceptions en code fonctionnel, ce qui rend la collaboration entre les équipes de conception et de développement plus efficace.
Avec Webflow DevLink, les concepteurs 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 conception et extraire facilement les styles et les ressources CSS, réduisant ainsi le temps consacré aux tâches de codage manuelles. Ce processus rationalisé élimine les itérations inutiles et accélère le calendrier de développement, ce qui permet de commercialiser plus rapidement de nouveaux produits et applications.
En utilisant DevLink, les concepteurs peuvent apporter des modifications à la conception en temps réel, et les développeurs peuvent voir instantanément ces mises à jour. Cette boucle de rétroaction immédiate élimine le besoin de longs transferts de conception. En conséquence, la productivité est accrue et les délais des projets peuvent être considérablement réduits.
En mettant la puissance de la plateforme de développement visuel de Webflow au service des projets React, Devlink permet aux utilisateurs de tirer parti de la puissance du canevas visuel sans code de Webflow. Ils peuvent créer des composants d'interface utilisateur, créer des interactions complexes et animations sans avoir besoin de coder et traduisez facilement ces conceptions visuelles en un code sémantique propre prêt à être produit.
Pour maximiser les avantages de DevLink, il est essentiel d'utiliser certaines des meilleures pratiques.
Il est très important d'établir des canaux de communication clairs. Communiquer avec les développeurs sur ce que devrait être la conception, à quoi elle devrait ressembler d'un point de vue statique ou d'une perspective mise en œuvre, organiser des sessions de feedback, etc., peut aider à garantir 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 à vous assurer que vos composants Webflow, à savoir tous les éléments de conception et les parties de conception, sont gérés dans Webflow avant de commencer à modifier les éléments de votre application React.
DevLink intègre également deux nouvelles fonctionnalités : les machines à sous et les accessoires Runtime. Ils fournissent des fonctionnalités étendues pour certaines fonctionnalités qui ne sont pas encore fournies ou prises en charge de manière native dans Webflow.
Les accessoires d'exécution vous permettent d'ajouter à vos composants des propriétés plus complexes que Webflow ne propose pas actuellement, par exemple un gestionnaire OnClick personnalisé. Les slots, quant à eux, vous permettent d'imbriquer des composants dans des composants de votre projet React.
DevLink n'en est qu'à ses débuts et de nombreuses choses passionnantes sont promises à l'avenir. DevLink étant désormais disponible uniquement sur la plateforme React, vue.js et d'autres frameworks frontend seront pris en charge.
L'intégration de Storybook est également annoncée prochainement, et il sera possible de ramener les composants React sur le site Webflow, car DevLink fonctionne momentanément de manière unidirectionnelle et ne renvoie pas les mises à jour de React vers Webflow.
DevLink dans Webflow révolutionne la façon dont les concepteurs et les développeurs collaborent, en rationalisant le flux de travail de développement Web et en améliorant l'efficacité. La création de ce pont entre deux environnements de codage permet aux utilisateurs d'améliorer à la fois l'efficacité de leurs produits et de leur temps de travail.
Comme il s'agit d'une nouvelle fonctionnalité et qu'il n'y a pas beaucoup de guides que vous pouvez y trouver, pour en savoir plus sur DevLink, vous pouvez consulter le guide sur Université Webflow et consultez-les également deux très utile vidéos où vous pouvez voir visuellement les étapes du guide en cours de mise en œuvre et avoir une meilleure compréhension.
Nous encourageons les concepteurs de 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.
À L'épouse de Lou nous sommes spécialisés dans la création de superbes Modèles Webflow pour différents secteurs d'activité. Prenez un moment pour explorer notre collection et trouver le modèle qui répond parfaitement à vos besoins. N'oubliez pas de visiter notre bloguer et suivez-nous également sur notre sociaux pour les dernières nouvelles et informations sur la conception Web et Webflow en particulier.
.svg){kind=icon}
Riyadh est un modèle de portfolio Webflow haut de gamme doté d'un thème sombre, d'un design épuré et de grandes polices. Ses animations dynamiques et sa personnalisation facile en font un outil idéal pour mettre en valeur le design de marque, le design interactif et les services UX/UI.
Découvrez Albany Template, une solution robuste conçue pour les agences de création. Conçu avec une esthétique élégante, des composants interactifs et une navigation conviviale, c'est le choix idéal pour les agences qui souhaitent présenter leur portefeuille de manière captivante.
.webp)
.png)
