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.