Vue.js – Einfach mehr User Experience

Aufgrund seiner hohen Skalierbarkeit kann Vue.js schrittweise in andere Bibliotheken oder vorhandene Projekte integriert werden oder für die Entwicklung komplexer Single-Page-Anwendungen eingesetzt werden, wenn es in Kombination mit modernen Tools und unterstützenden Bibliotheken verwendet wird.

Im Interview beantworten Claudiu Hadarean, Head of Frontend bei +Pluswerk München, und Florian Geierstanger, Frontend-Entwickler, die wichtigsten Fragen zum Einsatz von Vue.js.

Claudiu und Florian, Ihr erlebt in Eurer täglichen Arbeit die Vorteile von Vue.js in der Frontend-Entwicklung. Könnt Ihr kurz zusammenfassen, welchen Nutzen sich für unsere Kunden und deren User ergeben?

Claudiu: Vue.JS ist im Vergleich zu anderen Frontend-Frameworks ein eher kleines und leichtes Framework. Das wirkt sich positiv auf die Seitengeschwindigkeit, SEO und nicht zuletzt die UX der Webanwendung aus. Ich würde daher sagen, dass Vue.js für Kunden geeignet ist, die ihre Online-Präsenz optimieren und sich von ihren Mitbewerbern mit einer besseren und leistungsfähigeren Webanwendung unterscheiden möchten.

Auch in der Entwicklung bereitet Vue.js Freude. Mit geringem Aufwand kann jeder Entwickler, der Kenntnisse in HTML, CSS und JavaScript hat, Vue.js sehr schnell lernen und verwenden, und dies hat einen direkten Einfluss auf die Geschwindigkeit innerhalb des Entwicklungsprozesses. Es benötigt kein kompliziertes Setup-System, was zu einer Kostensenkung für unsere Kunden führen kann.

Florian: Features, die mit Vue.js erstellt wurden, erfordern nicht, dass die ganze Seite neu geladen wird, wenn sich etwas ändert. Wenn also ein Benutzer beispielsweise auf eine Schaltfläche klickt, gibt es keine Ladeleiste, sondern das Ergebnis erscheint sofort. Es ist eine flotte, App-ähnliche Erfahrung. Tatsächlich werden mit Vue die Grenzen zwischen einer App und einer Website immer mehr verwischt.

Florian, Vue.js wird als Anwendung mit großer Skalierbarkeit beschrieben. Welche Eigenschaften führen dazu?

Florian: Traditionelle Multi-Page-Anwendungen wie TYPO3 eignen sich hervorragend für statische, dokumentenähnliche Websites mit vielen Blogbeiträgen oder Artikeln. Das Hinzufügen interaktiver Funktionen ist möglich, aber schwierig zu pflegen, wenn sie eine gewisse Komplexität der Benutzeroberfläche erreichen. Hier kommt Vue.js ins Spiel. Es zerlegt komplexe Benutzeroberflächen in kleinere Komponenten, die dann leicht zu testen und weiter zu verbessern sind.

Claudiu, in welchem Anwendungsfall würdest Du einem Kunden empfehlen, auf Vue.js zu setzen?

Claudiu: Wenn man über Effizienz, schnellere Entwicklung, Wiederverwendbarkeit, einfache Wartung, Möglichkeit der Umgestaltung oder Umstrukturierung des Hauptdesigns nachdenkt, kann all dies mit komponentengesteuerter Entwicklung erreicht werden. Hier können wir Vue als Frontend-Framework verwenden.

Mit Vue.js können wir die LEGO-Analogie verwenden, indem wir modulare und wieder verwendbare Komponenten haben, die verschoben und in verschiedenen Kombinationen platziert werden können, um Websites flexibler und skalierbarer zu machen und den richtigen Kontext für einen agilen Ansatz zu haben.

Als Fazit würde ich sagen, dass Kunden, die eine moderne, leistungsstarke und flexible Plattform für wichtig halten, Vue.js als Frontend-Framework für ihr Projekt in Betracht ziehen sollten.

Florian, bei TYPO3 kommt eine Schlüsselrolle der zur Verfügung stehenden Extension zu. Wie lassen sich einzelne Modelle sinnvoll in TYPO3-basierte Webseiten integrieren?

Florian: Die TYPO3 PWA-Initiative hat mit einer Erweiterung namens "Headless" ganze Arbeit geleistet. Dies ermöglicht es, TYPO3 als CMS zu verwenden, es aber mit einem modernen Java-Script-Framework im Frontend zu koppeln. Ich denke, wir werden das immer mehr sehen, dass Kunden entweder ihre bewährte TYPO3-Installation mit individuellen Vue-basierten Features erweitern oder sogar das gesamte kundenorientierte Frontend durch Nuxt/Vue ersetzen.

Claudiu und Florian, vielen Dank für diese interessanten Einblicke in eine progressive Frontend-Entwicklung mit Vue.js.