Suchresultate laden...

Vue.js: Einfach, schnell und vielseitig einsetzbar

David Burkhart
Web Developer
Previon Betrieb
Um den Anforderungen an die Benutzerfreundlichkeit auch in aufwendigen Applikationen gerecht zu werden, braucht es zusätzliche Logik im Frontend. Dafür setzen wir gezielt Vue.js ein, um dem Benutzer eine angenehmere Erfahrung bieten zu können.

Was ist Vue.js?

Vue.js, oder kurz «Vue» (ausgesprochen wie das englische Wort «view»), ist ein JavaScript Framework, welches vom Ex-Google-Mitarbeiter Evan You im Jahr 2014 veröffentlicht wurde und auf dem «Model View ViewModel Muster» (MVVM) basiert. Sein Ziel war es, das Beste von AngularJS zu übernehmen und damit ein leichtes und schnelles Framework zu entwickeln.

Vue ist für jemanden mit Erfahrung in HTML, CSS und JavaScript einfach zu erlernen. Sehr schnell und mit wenig Aufwand kann man seine Webseite mit Vue erweitern und zusätzliche Funktionen hinzufügen. Auch für umfangreiche Frontend Applikationen kann Vue eingesetzt werden, ohne die Einfachheit zu verlieren.
Die Aufteilung der Funktionalität in verschiedene Komponenten, sowie die Aufteilung von Logik und Darstellung innerhalb einer Komponente überzeugt und macht die gesamte Funktionsstruktur übersichtlicher und wartbarer.

Vue.js Logo

Damit dem Besucher einer Webseite eine bestmögliche Anwendungserfahrung geboten werden kann, ist neben den statischen Inhalten mit HTML und CSS das dynamische Verändern der Webseite mit JavaScript nicht mehr wegzudenken.

Bei einem einfachen Kontaktformular ist keine zusätzliche Wegleitung für den Benutzer nötig, damit es ihm gelingt, das Formular erfolgreich abzusenden. Hingegen bei einem Formular bei dem je nach Eingaben andere Felder ausgefüllt werden müssen, erwartet der Benutzer, dass er nur die für ihn wesentlichen Felder sieht. Felder ein- und ausblenden ist jedoch nur ein sehr einfaches Beispiel für die Nutzung von JavaScript oder von Vue.

 

Prämienverbilligungs-Antragsformular: Perfekter Anwendungsfall

Anhand des Formulars für die Beantragung einer Prämienverbilligung (PV-Formular) der SVA AG kann ein Teil der Funktionalität von Vue anschaulich demonstriert werden. Verschiedenste Kriterien führen zu einer dynamischen Anpassung von diversen Komponenten im Formular.

Mehrseitiges Formular (Teilschritte)

Je nach Eingaben müssen andere Teilschritte ausgefüllt werden.

Teilschritte

Vorgegebene Eingabemasken

Auch Eingabemasken, beispielsweise für eine AHV-Nummer oder eine Telefonnummer, sind problemlos realisierbar. Sie verschönern die Anwendung mit ihrer einfachen Bedienbarkeit und fügen sich nahtlos in das bestehende Design ein.

AHV-Nummer GIF
Telefon GIF

Konditionelle Feldlogik

Sollen beispielsweise Felder abhängig sein von anderen Feldern, kann die Abhängigkeit bei Vue hinterlegt werden. Dadurch sind konditionelles Aus- oder Einblenden oder auch das Vorfüllen von Inhalten ein Kinderspiel.

13. Monatslohn GIF

Direkte Validierung während dem Ausfüllen

Eine Validierung muss nicht zwingend erst nach dem Absenden des gesamten Formulars erfolgen. Sie kann mittels Vue schneller und ansprechender gestaltet werden – noch während der Benutzer die Werte abfüllt. So sieht der Benutzer direkt eine entsprechende Fehlermeldung, wenn er ungültige Werte eingibt.

Geburtsdatum Fehler GIF
AHV-Nummer Fehler GIF

Keine Grenzen bei der Skalierung

Unter Umständen muss der Benutzer komplexe Datenstrukturen angeben, wie beispielsweise eine dynamische Tabelle mit verschiedenen Spalten und Werten. Dies wird durch Vue stark vereinfacht und resistenter gegen Fehler und doppelten Code gemacht. Selbst solche eher exotischen Anwendungsfälle sind mit vergleichsweise wenig Aufwand machbar, was den Horizont des Möglichen erneut erweitert.

Tabelle GIF

Zusammengefasst lässt sich sagen, dass Vue vor allem bei komplexen und vernetzten Applikationen nicht mehr wegzudenkende Vorteile hinsichtlich der Einfachheit bei der Realisierung, bei der Bedienung und der Wartbarkeit bringt. Dadurch werden grössere Applikationen oder weitere Anwendungsfälle innerhalb desselben Budgets möglich, was direkt unseren Kunden zugute kommt.

Wollen Sie auch Ihre Träume mit Vue.js Realität werden lassen?

Profile picture for user dburkhart
Web Developer

David Burkhart

Web Developer

Der Applikationsentwickler hat schon während der Lehre seine ersten Front- und Backend-Gehversuche unternommen und unterstützt seit Ende 2018 unseren Support. Ablenkung sucht er privat mit Gitarrenklängen oder beim PC-Schrauben.