Webflow DevLink – Funktionen & Vorteile
Beim ersten Produkt-Update, das Ende Mai dieses Jahres stattfand, stellte Webflow neben einer Reihe von anderen Updates eine innovative Funktion namens DevLink vor.
DevLink zielt darauf ab, die Lücke zwischen Designern und Entwicklern zu schließen, den Webentwicklungsprozess zu optimieren und die Zusammenarbeit zu verbessern.
Obwohl es sich noch in der Beta-Version befindet und wir sein volles Potenzial noch nicht gesehen haben, werden wir in diesem Artikel die Funktionalität von DevLink untersuchen und seine zahlreichen Vorteile für Designer, Entwickler und den gesamten Webentwicklungs-Workflow erkunden.
DevLink verstehen
Im Kern ist DevLink eine Funktion, die eine nahtlose Zusammenarbeit zwischen Designern und Entwicklern ermöglicht. Es fungiert als Kommunikationsbrücke, die diesen beiden entscheidenden Rollen ermöglicht, effizienter zusammenzuarbeiten.
DevLink ermöglicht es Designern, die mit Webflows leistungsstarkem visuellen Editor erstellten Komponenten in eine React-Anwendung zu exportieren, sodass Entwickler diese Komponenten in einer separaten Codierungsumgebung von Webflow verwenden können, und ihnen Zugang zu den Vorzügen der React.js-Plattform gewähren, um diese Designs zum Leben zu erwecken.
Wie funktioniert DevLink in Webflow?
Das Erste, was man wissen sollte – wie wir kurz zuvor erwähnt haben –, ist, dass die Webflow DevLink-Funktion derzeit in der offenen Beta ist und um Zugang zu erhalten, musst du dich dafür mit einer Webflow-Konto-E-Mail-Adresse anmelden. Das Zweite ist, dass DevLink derzeit nur im Next.js React-Framework unterstützt wird.
Falls du mit React nicht vertraut bist, klicke auf diesen Webflow-Leitfaden, um zu erfahren, wie du dein neues Next.js-Projekt einrichtest.
Danach stelle sicher, dass du „npm run dev" ausführst, um sicherzustellen, dass dein Projekt erfolgreich läuft, und gehe dann zu den folgenden Schritten, wie du dein Webflow-Projekt mit deiner lokalen Entwicklerumgebung verbindest:
- Starte ein Webflow-Projekt
- Durch Rechtsklick auf ein Element wählst du Komponente erstellen
- Gehe zum Komponentenmenü und klicke auf die Schaltfläche Komponenten exportieren
- Danach kopiere die .webflowrc.js-Datei, die du im erscheinenden DevLink-Fenster siehst, und füge sie in eine neue Datei im Stammverzeichnis deines Next.js-Projekts ein.
Außerdem musst du den Platzhalter „[YOUR API TOKEN]" durch ein API-Zugriffstoken von deiner Website ersetzen. Du kannst hier klicken, um zu erfahren, wie du einen API-Schlüssel generierst, oder du kannst auf die Schaltfläche im Abschnitt der Konfigurationsbeschreibung klicken, wie im obigen Bild zu sehen.
Es gibt alternativ eine andere Methode, die du verwenden kannst, ohne das Token im Klartext zu speichern. Schau dir den Webflow-Leitfaden dafür und für weitere detailliertere Webflow DevLink-Details an.
- Speichere die Datei
Nachdem du dies abgeschlossen hast, gibt es zwei weitere Hauptschritte:
- Installiere das NPM-Modul – führe einfach den folgenden Befehl im Stammverzeichnis des Terminals deines Next.js-Projekts aus.
- Synchronisiere deine Komponenten mit deinem Next.js-Projekt (jedes Mal, wenn du eine Änderung auf deiner Webflow-Leinwand vornimmst)
Dazu kopiere den Text „npx webflow devlink sync", den du im obigen Exportfenster findest, und gib ihn im Stammverzeichnis des Terminals ein. Das führt dazu, dass deine Komponenten mit deinem Next.js-Projekt synchronisiert und in deine App importiert werden.
Beachte, dass nicht alle Webflow-Elemente mit DevLink exportiert werden können.
Elemente wie: Collection List, E-Commerce-Elemente (Warenkorb, In den Warenkorb legen, Web Payments, PayPal), Lottie Animations und Lightbox werden nicht unterstützt.
Vorteile von DevLink in Webflow
DevLink ist die Brücke, die es uns ermöglicht, zwei verschiedene Codeumgebungen einfach „zusammenzuführen". Es bringt mehr Design-Interaktivität und bessere dynamische Erlebnisse mit sich.
Nicht nur das, sondern wenn zwei Plattformen zusammenkommen, gibt es viele weitere Vorteile:
1. Verbesserte Zusammenarbeit zwischen Designern und Entwicklern
DevLink verbessert die Kommunikation und Zusammenarbeit zwischen Designern und Entwicklern. Es ermöglicht dir, produktionsfertige Webflow React-Komponenten visuell auf der Leinwand zu erstellen. Dies optimiert den Prozess der Umsetzung von Designs in funktionierenden Code und macht die Zusammenarbeit zwischen Design- und Entwicklungsteams effizienter.
2. Optimierter Webentwicklungsprozess
Mit Webflow DevLink können sich Designer auf das Entwerfen und Prototyping konzentrieren, ohne sich um die technische Umsetzung kümmern zu müssen. Entwickler können auf die Designdateien zugreifen und CSS-Stile und Assets einfach extrahieren, was den Zeitaufwand für manuelle Codierungsaufgaben reduziert. Dieser optimierte Prozess eliminiert unnötige Hin-und-her-Iterationen und beschleunigt den Entwicklungszeitplan, sodass neue Produkte und Apps schneller auf den Markt gebracht werden können.
3. Gesteigerte Effizienz und Produktivität
Durch die Nutzung von DevLink können Designer in Echtzeit Änderungen am Design vornehmen, und Entwickler können diese Updates sofort sehen. Diese unmittelbare Feedback-Schleife eliminiert die Notwendigkeit zeitaufwändiger Design-Übergaben. Als Ergebnis wird die Produktivität gesteigert und Projektzeitpläne können erheblich verkürzt werden.
4. Reduzierte Abhängigkeit von Programmierkenntnissen
Durch die Einbindung der Leistungsfähigkeit von Webflows visueller Entwicklungsplattform in React-Projekte ermöglicht DevLink es Nutzern, die Leistungsfähigkeit von Webflows No-Code-Visual-Canvas zu nutzen. Sie können UI-Komponenten erstellen, komplexe Interaktionen und Animationen erstellen, ohne Code schreiben zu müssen, und diese visuellen Designs nahtlos in sauberen, semantischen, produktionsfertigen Code überführen.
DevLink effektiv nutzen
Um die Vorteile von DevLink zu maximieren, ist es wichtig, einige Best Practices anzuwenden.
Die Einrichtung klarer Kommunikationskanäle ist sehr wichtig. Mit den Entwicklern darüber zu kommunizieren, wie das Design aussehen soll, wie es aus einer statischen oder implementierten Perspektive aussehen soll, Feedback-Sitzungen abzuhalten usw., kann dazu beitragen, sicherzustellen, dass alle während des gesamten Entwicklungsprozesses auf dem gleichen Stand sind.
Eine weitere Best Practice ist sicherzustellen, dass deine Webflow-Komponenten – alle Designelemente und Design-Abschnitte – in Webflow verwaltet werden, bevor du anfängst, Dinge in deiner React-App zu ändern.
Es gibt auch zwei neue Funktionen, die mit DevLink eingeführt wurden: Slots und Runtime Props. Sie bieten erweiterte Möglichkeiten für einige Funktionen, die noch nicht nativ in Webflow angeboten oder unterstützt werden.
Runtime Props geben dir die Möglichkeit, deinen Komponenten komplexere Eigenschaften hinzuzufügen, die Webflow derzeit nicht anbietet, zum Beispiel einen benutzerdefinierten onClick-Handler. Slots hingegen ermöglichen es dir, Komponenten innerhalb von Komponenten in deinem React-Projekt zu verschachteln.
Was ist in der Zukunft zu erwarten?
DevLink steckt noch in den Anfängen und es sind viele spannende Dinge für die Zukunft versprochen. Da DevLink derzeit nur auf der React-Plattform verfügbar ist, wird es künftig Unterstützung für Vue.js und weitere Frontend-Frameworks geben.
Eine Storybook-Integration ist ebenfalls angekündigt und bald verfügbar, und man wird React-Komponenten zurück in die Webflow-Site bringen können, da DevLink momentan unidirektional arbeitet und React-Updates nicht zurück zu Webflow überträgt.
Fazit
DevLink in Webflow revolutioniert die Art und Weise, wie Designer und Entwickler zusammenarbeiten, optimiert den Webentwicklungs-Workflow und steigert die Effizienz. Durch die Schaffung dieser Brücke zwischen zwei Codierungsumgebungen können Nutzer sowohl die Qualität ihres Produkts als auch die Effizienz ihrer Arbeitszeit verbessern.
Da es sich um eine neue Funktion handelt und es nicht viele Leitfäden gibt, die man finden kann, kannst du, um mehr über DevLink zu erfahren, den Leitfaden auf der Webflow University besuchen und auch diese zwei sehr hilfreichen Videos ansehen, in denen du die Leitfadenschritte visuell umgesetzt siehst und ein klareres Verständnis gewinnst.
Wir ermutigen React-Designer, DevLink in ihren Projekten zu erkunden und zu übernehmen, und freuen uns auf zukünftige Möglichkeiten und Fortschritte bei Webflows DevLink-Funktion.
Bei Wedoflow sind wir darauf spezialisiert, beeindruckende Webflow-Templates für verschiedene Branchen zu erstellen. Nimm dir einen Moment, um unsere Kollektion zu erkunden und das perfekte Template für deine Bedürfnisse zu finden. Vergiss nicht, unseren Blog zu besuchen und uns auf unseren Social-Media-Kanälen für die neuesten Nachrichten und Einblicke in Webdesign und Webflow im Besonderen zu folgen.
