sum.cumo
29.11.2018 sum.cumo

Vue.js Meetup #3: Zu Vuetify und Higher-Order Components

Einblicke in die Welt von Vue

Wir haben das jüngste Vue.js Meetup in unseren Büros am Hamburger Schlump ausgerichtet. Als eines der Hamburger Tech-Unternehmen, die im Bereich Vue über umfangreiche Expertise verfügen, waren gleich zwei unserer Mitarbeiter am Start, um über Themen rund um Vue zu sprechen: Hannes Schluchtmann und Johannes Lamberts. Beide stellen hier kurz ihre Themen und die Folien für ihre Vorträge vor.

Hannes über Vuetify

Vuetify ist ein Komponenten-Framework für Vue.js, das auf Googles „Material Design“-System basiert. Ähnlich wie z.B. Bootstrap stellt es Komponenten, Hilfsmittel und ein Basisdesign zur Verfügung, mit denen sich schnell Ergebnisse erzielen lassen und so der Entwicklungsaufwand verringert wird. Vuetify zeichnet sich vor allem durch seinen Fokus auf Funktionalität aus. Ich denke, dass Vuetify durch seine sehr gute Dokumentation einen schnellen und einfachen Einstieg ermöglicht. Zur Zeit wird an Version 2 gearbeitet, welche nicht nur neue Komponenten bereitstellen wird (z.B. Kalendar, Upload), sondern auch auf einer neuen Codebasis fußt, die auf Typescript basiert.

Die Folien: Vuetify.

Johannes über Higher-Order Components

Mixins, Scoped-Slots und Higher-Order Components (HOCs) bieten sehr unterschiedliche Möglichkeiten zur Code-Organisation. Während es für alle drei sehr gute und berechtigte Anwendungsfälle gibt, kann eine Anwendung im unpassenden Fall die Code-Qualität deutlich beeinträchtigen. Im Vortrag erläutere ich die Funktionsweisen, Vor- und Nachteile und gebe Anleitungen zur Anwendung. Der Fokus liegt dabei auf Higher-Order Components, deren Verwendung in Vue wohl noch am wenigsten etabliert ist, und die Frage, wie wir mit ihnen die Testbarkeit, Wartbarkeit und allgemein die Code-Qualität verbessern können.

Die Folien: VUE HOC.