#vuecember2020 #vuejs

Was ist Vue-Types?

Props gehören zu Komponenten wie das fehlende Semikolon in jeden guten Developer-Witz.

Ein meiner Meinung nach sehr hilfreiches Package um diese Fingerübung des geübten Entwicklers oder der geübten Entwicklerin zu vereinfachen ist „vue-types“. Doch halt, Moment! Prop-Validation kann Vue bereits out of the box? Warum brauche ich hier ein extra Package?

Warum ich Vue-Types einmal ausprobieren sollte | Die Vorteile

  • Vue-Types ist stark von Reacts PropTypes inspiriert, es ist für viele Entwickler:innen, die vielleicht gerade auf Vue umsteigen somit recht intuitiv zu bedienen.
  • Wir können den Overhead in der Prop-Validierung signifikant verringern. Stellen wir uns das Prop age vor. Mit den Hausmitteln von Vue sähe eine Validierung so aus:
age: %7B
      type: Number,
      validator(value) %7B
        return Number.isInteger(value)
      %7D,
      default: 0,
    %7D,

Mit Vue-Types erreichen wir auf diese Art das gleiche Ergebnis:

age: VueTypes.integer

Die wahre Schönheit von Vue-Types liegt aber in den custom validators

Custom Validation in Vue-Types

Stellen wir uns vor, unsere App ist nun komplexer geworden. Wir haben einige Komponenten, die ein User Objekt empfangen. Das Objekt ist relativ komplex, es erhält neben den Standarddaten wie Anschrift und Geburtsdatum auch die präferierte Zahlungsmethode, die wiederum in einem Objekt gespeichert ist, das beispielsweise einen Hash beinhaltet, ein validUntil und diverse andere Strings, Integers, Dates und Booleans.

Vue-Types erlaubt uns nun an einer zentralen Stelle in unserer App einen customValidator zu platzieren. Wir müssen nun nicht in jeder unserer Komponenten eine Validierung schreiben. Ein einfaches

user: VueTypes.userData

übernimmt den Job. Weiterer Vorteil: Sollte sich am Inhalt des Objekts etwas ändern, müssen wir eine Anpassung nur an einer zentralen Stelle vornehmen!

Wann sollte ich Vue-Types vielleicht nicht benutzen | Nachteile

  • Du kennst deine Applikation am besten. Wenn du nur wenige Komponenten vor dir hast, oder die Validierung von Props keine große Rolle spielt, ist die Implementierung von Vue-Types vielleicht ein wenig wie mit Kanonen auf Spatzen zu schießen. Insbesondere, wenn es keine Einsatzmöglichkeiten für die custom validation gibt.
  • Butter bei die Fische: Wir haben Vue-Types in eine Applikation mit über 250 Komponenten implementiert. Das Refactoring hierzu braucht Zeit und auch Nerven. Denn neben der bloßen Implementierung macht es definitiv auch Sinn, sich anzuschauen, warum diese Komponente ausgerechnet dieses Prop braucht und welcher Typ hier nun der richtige ist. Das lohnt sich aber auch wieder, wir haben zum Beispiel einige Stellen gefunden, an denen bis jetzt nicht korrekt oder sogar falsch validiert wurde, und konnten diese Fehler gleich beheben.
  • Gerade die Validierung von Objekten kann dich mit Vue-Types manchmal Nerven kosten. Zwar wird ein Fehler geworfen, sollte ein Objekt nicht der erwarteten Struktur entsprechen, aber was genau fehlt oder anders ist, bleibt manchmal unklar. Da bleibt dann nur, selber nachzusehen. Insbesondere bei komplexen Validierungen kann da schon mal Zeit ins Land gehen.

Neugierig geworden?