1 KOSTENLOSE Webflow-Vorlage für jeweils 2 Einkäufe — Hallo jetzt dein! 💙🎉😍
De
Beim ersten Produktupdate, das Ende Mai dieses Jahres stattfand, war Webflow unter einer Reihe von andere Aktualisierungen führte eine innovative Funktion namens DevLink ein.
DevLink zielt darauf ab, die Kluft zwischen Designern und Entwicklern zu überbrücken, den Webentwicklungsprozess zu rationalisieren und die Zusammenarbeit zu verbessern.
Obwohl es sich noch in der Betaversion befindet und wir sein volles Potenzial noch nicht ausgeschöpft haben, werden wir uns in diesem Artikel mit der Funktionalität von DevLink befassen und die zahlreichen Vorteile für Designer, Entwickler und den gesamten Webentwicklungsablauf untersuchen.
Im Kern ist DevLink eine Funktion, die eine reibungslose Zusammenarbeit zwischen Designern und Entwicklern ermöglicht. Es fungiert als Kommunikationsbrücke, sodass diese beiden wichtigen Rollen effizienter zusammenarbeiten können.
DevLink ermöglicht es Designern, die Komponenten, die sie mit dem leistungsstarken visuellen Editor von Webflow erstellt haben, in eine React-Anwendung zu exportieren, sodass Entwickler diese Komponenten im Wesentlichen in einer separaten Codierungsumgebung von Webflow verwenden können, sodass sie auf die Vorteile der Plattform React.js zugreifen können, um diese Designs zum Leben zu erwecken.
Das Erste, was Sie wissen sollten, ist, dass sich die Webflow Devlink-Funktion derzeit in der offenen Beta befindet. Um Zugriff zu erhalten, müssen Sie melde dich an dafür mit einer Webflow-Konto-E-Mail-Adresse. Die zweite Sache ist, dass DevLink derzeit nur im Next.js React-Framework unterstützt wird.
Wenn Sie mit React nicht vertraut sind, klicken Sie auf diesen Webflow Leitfaden um zu erfahren, wie Sie Ihr neues Next.js Projekt einrichten.
Stellen Sie anschließend sicher, dass Sie „npm run dev“ ausführen, um sicherzustellen, dass Ihr Projekt erfolgreich ausgeführt wird, und fahren Sie dann mit den folgenden Schritten fort, um Ihr Webflow-Projekt mit Ihrer lokalen Entwicklerumgebung zu verbinden:
Außerdem müssen Sie den Platzhalter „[YOUR API TOKEN]“ durch ein API-Zugriffstoken von Ihrer Site ersetzen. Sie können hier klicken, um zu erfahren, wie generieren Sie eine API Taste oder Sie können auch auf den Button bei der Config-Artikelbeschreibung klicken, wie im Bild oben zu sehen ist.
Alternativ gibt es eine andere Methode, die Sie verwenden können, ohne das Token im Klartext zu speichern. Überprüfen Sie den Webflow Leitfaden dafür und für andere detailliertere Webflow DevLink-Details.
Nachdem Sie dies abgeschlossen haben, müssen Sie zwei weitere Hauptschritte ausführen:
Kopieren Sie dazu den NPX-Webflow-Devlink-Synchronisierungstext, den Sie oben im Exportfenster finden, und geben Sie ihn in das Stammverzeichnis des Terminals ein. Das führt dazu, dass Ihre Komponenten mit Ihrem Projekt next.js synchronisiert und in Ihre App importiert werden.
Beachten Sie, dass nicht alle Webflow-Elemente mit DevLink exportiert werden können.
Elemente wie: Sammlungsliste, E-Commerce-Elemente (Warenkorb, In den Warenkorb legen, Web Payments, PayPal), Lottie Animations und Lightbox werden nicht unterstützt.
DevLink ist die Brücke, mit der wir zwei verschiedene Codeumgebungen einfach „zusammenfügen“ können. Es bietet mehr Interaktivität beim Design und bessere dynamische Erlebnisse.
Nicht nur das, sondern wenn zwei Plattformen zusammenkommen, gibt es viele weitere Vorteile:
DevLink verbessert die Kommunikation und Zusammenarbeit zwischen Designern und Entwicklern. Es ermöglicht Ihnen, produktionsreife Webflow React-Komponenten visuell auf der Leinwand zu erstellen. Dies optimiert den Prozess der Übersetzung von Designs in funktionalen Code und macht die Zusammenarbeit zwischen Design- und Entwicklungsteams effizienter.
Mit Webflow DevLink können sich Designer auf das Entwerfen und Prototyping konzentrieren, ohne sich Gedanken über die technische Umsetzung machen zu müssen. Entwickler können auf die Designdateien zugreifen und auf einfache Weise CSS-Stile und -Assets extrahieren, wodurch der Zeitaufwand für manuelle Codierungsaufgaben reduziert wird. Dieser optimierte Prozess vermeidet unnötiges Hin- und Herwechseln und beschleunigt den Entwicklungszeitraum, sodass neue Produkte und Apps schneller auf den Markt gebracht werden.
Durch die Verwendung von DevLink können Designer Änderungen am Design in Echtzeit vornehmen, und Entwickler können diese Aktualisierungen sofort sehen. Diese unmittelbare Feedback-Schleife macht zeitraubende Designübergaben überflüssig. Dadurch wird die Produktivität gesteigert und die Projektzeitpläne können erheblich reduziert werden.
Devlink bringt die Leistungsfähigkeit der visuellen Entwicklungsplattform von Webflow in React-Projekte ein und ermöglicht es Benutzern, die Leistungsfähigkeit der visuellen Leinwand ohne Code von Webflow zu nutzen. Sie können UI-Komponenten erstellen, komplexe Interaktionen erstellen und Animationen ohne dass eine Codierung erforderlich ist, und übersetzen Sie diese visuellen Designs nahtlos in sauberen, semantischen Code, der für die Produktion bereit ist.
Um die Vorteile von DevLink zu maximieren, ist es wichtig, einige bewährte Methoden anzuwenden.
Der Aufbau klarer Kommunikationskanäle ist sehr wichtig. Durch die Kommunikation mit den Entwicklern darüber, wie das Design aussehen sollte, wie es aus einer statischen oder einer implementierten Perspektive aussehen sollte, Feedback-Sitzungen usw. können Sie sicherstellen, dass während des gesamten Entwicklungsprozesses alle auf derselben Wellenlänge sind.
Eine weitere bewährte Methode besteht darin, sicherzustellen, dass Ihre Webflow-Komponenten; alle Designelemente und Designteile in Webflow verwaltet werden, bevor Sie beginnen, Dinge in Ihrer React-App zu ändern.
Mit DevLink wurden auch zwei neue Funktionen eingeführt: Slots und Runtime-Requisiten. Sie bieten erweiterte Funktionen für einige Funktionen, die in Webflow noch nicht nativ bereitgestellt oder unterstützt werden.
Runtime-Requisiten bieten Ihnen die Möglichkeit, Ihren Komponenten kompliziertere Eigenschaften hinzuzufügen, die Webflow derzeit nicht anbietet, z. B. einen benutzerdefinierten onClick-Handler. Slots hingegen ermöglichen es Ihnen, Komponenten innerhalb von Komponenten innerhalb Ihres React-Projekts zu verschachteln.
DevLink steht erst am Anfang und es gibt viele spannende Dinge, die für die Zukunft versprochen werden. Da DevLink jetzt nur auf der React-Plattform verfügbar ist, wird es Unterstützung für vue.js und weitere Frontend-Frameworks geben.
Die Storybook-Integration wird ebenfalls in Kürze angekündigt, und man wird in der Lage sein, React-Komponenten zurück auf die Webflow-Site zu bringen, da DevLink momentan unidirektional funktioniert und React-Updates nicht zurück an Webflow verschiebt.
DevLink in Webflow revolutioniert die Art und Weise, wie Designer und Entwickler zusammenarbeiten, optimiert den Arbeitsablauf bei der Webentwicklung und steigert die Effizienz. Durch die Schaffung dieser Brücke zwischen zwei Codierungsumgebungen können Benutzer sowohl ihre Produkt- als auch die Arbeitszeiteffektivität verbessern.
Da es sich um eine neue Funktion handelt und es dort nicht viele Anleitungen gibt, die Sie finden können, um mehr über DevLink zu erfahren, besuchen Sie die Leitfaden auf Webflow Universität und schau dir auch diese an zwei sehr hilfreich Videos wo Sie die ausgeführten Schritte visuell sehen können und ein klareres Verständnis haben.
Wir ermutigen React-Designer, DevLink in ihren Projekten zu erforschen und einzusetzen, und wir freuen uns auf zukünftige Möglichkeiten und Weiterentwicklungen der DevLink-Funktion von Webflow.
Bei Wir tun es Wir sind darauf spezialisiert, atemberaubende Kreationen zu kreieren Webflow-Vorlagen für verschiedene Branchen. Nehmen Sie sich einen Moment Zeit, um unsere Sammlung zu erkunden und die perfekte Vorlage für Ihre Bedürfnisse zu finden. Vergessen Sie nicht, unsere zu besuchen Blog und folge uns auch auf unserem soziale Netzwerke für die neuesten Nachrichten und Einblicke in Webdesign und insbesondere Webflow.
.svg){kind=icon}
.webp)
.jpg)
.jpg)
