Vuetify - Ein Erfahrungsbericht und Overview

Vuetify - ein Erfahrungsbericht: Gutes und Schlechtes bei Vueitify, wann es sich lohnt und wann man sich lieber ein anderes UX-Framework suchen sollte.

Vuetify - Ein Erfahrungsbericht und Overview

Vuetify ist ein UI-Framework f├╝r Vue um einfach Webanwendungen auf Material Design-Basis zu erstellen. Im nachfolgenden will ich gerne mal einen kleinen ├ťberblick ├╝ber Vuetify geben und wie es sich damit so arbeiten l├Ąsst. Wann man es nutzen sollte und wann eher nicht.

Wie bin ich auf Vuetify gekommen?

Ich bin schon immer ein Fan des Google Material Design gewesen. Es ist klar strukturiert, nicht zu ├╝berladen, flat und vorallem intuitiv. Allerdings ist die Umsetzung ohne ein Framework nicht gerade so einfach.

Nachdem ich nun fast alle meine Webanwendungen, auch beruflich, mit Vue.js programmiere war klar, es muss auch hier Material Design her. Nach einiger Suche und das W├Ąlzen durch StackOverflow bin ich dann auf Vuetify gekommen. Das ist mittlerweile ein gutes Jahr her.

Analyse des ├ľkosystem

Im folgenden will ich immer auf die einzelnen Punkte die mir pers├Ânlich bei UI-Frameworks wichtig sind ┬áeingehen und auf die guten und schlechten Punkte eingehen.

Dokumentation

Was mir an Vuetify gut gef├Ąllt, ist die saubere Dokumentation der verf├╝gbaren Komponenten, sowie einige interaktive Demos. So bekommt man relativ schnell einen ├ťberblick ├╝ber die verf├╝gbaren Komponenten und den Umfang des Frameworks.

Allerdings ist die Suche nach Komponenten nicht immer so einfach, da hier relativ wenig indexiert wird. Das sorgt ab und zu f├╝r Verwirrungen, hat sich aber im Laufe der Versionen schon deutlich gebessert.

Browser Support

Vuetify unterst├╝tzt bewusst nicht bis in alle Ewigkeit die Dinosaurier unter den Browsern. Das f├╝hrt dazu das relativ neue Features verwendet werden k├Ânnen, was oft zu besserer Performance und auch allgemein zu einem schnellen Release-Zyklus f├╝hrt. Hierzu auch ein kleiner Auszug aus der Doku:

Die unterst├╝tzten Browser aus der Dokumentation

Soll, aus welchem Grund auch immer, ein ├Ąlterer Browser unterst├╝tzt werden m├╝ssen, ist man hier leider bei Vuetify ziemlich aufgeschmissen. Mit dem Polyfill f├╝r IE11 zum Beispiel ist die Anwendung zwar lauff├Ąhig aber ziemlich tr├Ąge.

Aktive Community

Die Community und Core-Contributor hinter Vuetify sind sehr versiert auf hochwertigen Code und schnelle Bearbeitung von Bugs. Das f├╝hrt allgemein zu einer sehr guten Codebase und Dokumentation aber auch kontinuierlichen neuen Funktionen.

Das Team hinter Vuetify

Dieses extreme streben nach Qualit├Ąt f├╝hrt unter Umst├Ąnden aber auch ab und zu dazu, das in einem Release relativ viel umgestellt wird, was nat├╝rlich in der Anwendung einen hohen ├änderungsaufwand verursacht.

Customizing

Vuetify l├Ąsst sich sogar anpassen ohne selbst in den Stylesheets Hand anzulegen, die prim├Ąren Farben k├Ânnen ziemlich einfach ├╝ber die zentrale Configuration angepasst werden:

Ausschnitt aus der Dokumentation um die Farben f├╝r Vuetify anzupassen

Wenn man allerdings weitreichendere Ver├Ąnderungen will, muss das ├╝ber eine Stylus-File angepasst werden. Warum Vuetify hier stylus und nich sass/less verwendet, finde ich hier etwas komisch, dass ist allerdings mehr eine pers├Ânliche Pr├Ąferenz. Die Schriftgr├Â├čen sind ┬áhierbei pro Komponente einzeln ├╝berschreibbar. Was nat├╝rlich einerseits hohe Freiheiten und Unabh├Ąngigkeit bietet, ist sehr nervig wenn allgemein alle Schriftgr├Â├čen erh├Âht werden sollen.

Workflow

Der Workflow mit Vuetify entwicklet sich relativ schnell, nach einigen Tagen muss man nur noch bei neuen Komponenten in der Dokumentation nachschlagen. Ansonsten folgt man hier eing├Ąngigen und auch wiederkehrenden Wordings.

Performance

Die Performance von Vuetify ist etwas geringer als die von Vue.js Anwendungen die nur ein CSS-Framework nutzen und die Logiken selbst implementieren. Das ist dem Layer des Material Design geschuldet, da hier einige Animationen und States bereits in den Components verankert sind.

UX

Die Benutzererfahrung f├╝r Vuetify ist hervorragend. Der Effekt wird nocheinmal verst├Ąrkt wenn der Nutzer sehr mit den Produkten von Google vertraut ist. Man findet sich schnell wieder, da sich hier so nah am Material Design Standard wie m├Âglich orientiert wurde.

Einziger Minuspunkt in dieser Hinsicht ist die Bearbeitung von Daten in sogennanten DataTables. Wenn hier direkt in der Tabelle Daten bearbeitet werden k├Ânnen, muss das ├╝ber eine Art kleinen Inline-Popup passieren, das ist Teil der Spezifikation allerdings f├╝r nicht alle Use-Cases sinnvoll. Allerdings kommt man um diese nicht herum wenn man die DataTable mit Bearbeitungsfunktion inline nutzen will:

Inline-Bearbeitung von Daten in der DataTable

Components

Es gibt zahlreiche Komponenten in Vueitfy, hier ist f├╝r so gut wie jeden Anwendungsfall was dabei. Sollte mal was fehlen l├Ąsst es sich aber ziemlich gut mit bestehenden Komponenten zusammenbauen.

Wenn allerdings etwas ben├Âtigt wird, was in dieser Art nicht zusammensetzbar ist, steigt der Aufwand extrem, das optisch in das Material Design einzupassen.

Hierbei kommen mit jeder Version einiges an neuen Komponenten hinzu, diese werden auch in der Dokumentation immer entsprechend hervorgehoben, es lohnt sich also hin und wieder ein Blick in die Dokumentation und den Changelog.

Hervorhebung in der Dokumentation von neuen Komponenten

Integration in bestehende Projekte

Wenn Vuetify in ein bestehendes Projekt eingebaut werden soll, ist jede Menge Aufwand in Richtung Anpassungen gefordert. In solchen F├Ąllen ist es meistens empfehlenswerter ein neues Projekt anzulegen und die Funktionali├Ąten St├╝ck f├╝r St├╝ck in das neue Projekt zu ├╝bertragen. Nachdem hier relativ viel Boilerplate sowie semantische Anpassungen vorgenommen werden m├╝ssen.

Ein Parallelbetrieb mit einem bestehenden Framework oder einem eigenen Oberfl├Ąchenkonzept rate ich deshalb aus eigener Erfahrung dringend ab.

Einpassungen ins ├ľkosystem

F├╝r Vuetify gab es bereits zu Release der neuen Vue CLI ein entsprechendes Plugin, was einem einiges an Konfiguration und Arbeitsaufwand abnimmt. Das ist ein ziemlich handliches Feature, da dies eine leichte Verwaltung des Vuetify Projekts mit sich bringt und auch eine gewisse standardisierte Struktur f├╝r neue Projekte.

Es eigenet sich daher besonders f├╝r eine Voreinstellung von neuen Vue-Projekten mit Vuetify, was auch den Einsatz im Enterprise-Umfeld erm├Âglicht.

Relase-Zyklus

Wie bereits angesprochen verfolgt Vuetify das Ziel von hoher Qualit├Ąt bei gleichzeitig st├Ąndig neuen Features und Verbesserungen. Das f├╝hrt zu einem relativ schnellen Release-Zyklus.

Wenn man hier immer ein Auge auf den Changelog hat und die ├änderungen immer gleich abarbeiten kann ist der Release-Zyklus kein gro├čes Hindernis. Ist die Anwendung allerdings nicht f├╝r kontinuierliche Weiterentwicklung ausgelegt aber man m├Âchte neue Features nutzen sollte man es sich nochmal ├╝berlegen Vuetify zu verwenden.

Resume

Vuetify ist mein pers├Ânliches Lieblingsframework f├╝r UX-Anwendungen unter Vue. Ich verwende es gerne im Enterprise-Umfeld und f├╝r gr├Â├čerere Anwendungen. F├╝r Kleinere weiche ich gerne auf eigene Entwicklungen aus, da hier der Aufwand deutlich geringer ist als mit Vuetify.

Bei gr├Â├čeren und kontinuierlich weiterentwickelten Projekten mit Vue lohnt sich der Einsatz von Vuetify, wenn es nicht zu exotische Komponenten geben wird. Wenn doch, sollte man sich bewusst sein das es hier deutlich mehr Aufwand bedeutet komplett neue Komponenten zu erstellen, um eine einheitliche UX und Struktur zu gew├Ąhrleisten.