Im vergangenen Jahr standen wir vor der Entscheidung für ein neues Frontend-Framework. In die Recherche und den Vergleich der möglichen Optionen steckten wir viel Zeit und Arbeit, immerhin war dies eine richtungsweisende Entscheidung, welche die Weiterentwicklung aller unserer Produkte betraf. Der Sieger lautete schließlich: Vue (siehe Blogeintrag).
Mittlerweile ist das Framework seit einem Jahr bei uns im Einsatz und in alle Produkte der AT Suite eingeflossen. Welche Erfahrungen haben wir gesammelt? Was gefällt uns gut und welche Herausforderungen gab es zu bewältigen?
Was ist im Einsatz?
Zusätzlich zum Basis-Framework nutzen wir Vuex zur komponentenübergreifenden Speicherung des Zustands sowie Vuetify mit seinem materialdesign-basierten Oberflächenkomponenten.
Einfacher Einstieg dank sehr guter Dokumentation
Dank der sehr guten Tutorials auf vuejs.org und der beispielreichen API-Dokumentation von Vuetify fällt der Einstieg in das Framework sehr leicht. Auch die Online-Lektionen der Vue School sind sehr zu empfehlen. Mit dem Vue Client lässt sich per Kommandozeile eine Vue-Basisanwendung generieren mit der direkt losgelegt werden kann. Ein Vue-Devtools Plugin für Chrome ermöglicht umfangreiche Analysen der Applikation im Browser. Während React das etwas gewöhnungsbedürftige JSX als Markup-Sprache verwendet, fällt der Einstieg in Vue dank der HTML-basierten Templates deutlich leichter.
Starke, schnell wachsende Community
Die mittlerweile weite Verbreitung des Frameworks sorgt dafür, dass zu fast allen Problemen und Fragen passende Lösungen im Vue Forum oder bei Stackoverflow zu finden sind. Dadurch, dass das Framework mittlerweile auch von sehr großen Unternehmen wie z.B. Alibaba genutzt wird, ist eine langfristige Weiterentwicklung des Frameworks gesichert.
Wechselwirkungen zwischen Vuetify und Bootstrap
Eine Herausforderung, auf die wir bei der Entwicklung eines Vue-basierten Widgets stießen waren Wechselwirkungen zwischen Vuetify und Bootstrap: Vuetify nutzt teilweise die gleichen CSS-Klassennamen wie Bootstrap (z.B. „.container oder .row“, siehe auch https://github.com/vuetifyjs/vuetify/issues/8530). Eine vollständige Lösung hierfür gibt es noch nicht – in Vue3 wurde dieser Konflikt teilweise gelöst, aber in der Vuetify Dokumentation wird weiterhin deutlich darauf hingewiesen, dass eine Kombination mit anderen Oberflächenframeworks auf einer Seite zu vermeiden ist. Eine Alternative für den speziellen Anwendungsfall wäre der Austausch von Vuetify durch BootstrapVue gewesen. Im besagten Fall wollten wir allerdings trotzdem auf die materialdesign-basierten Komponenten von Vuetify zurückgreifen. Außerdem sind weitere Überschneidungen mit anderen Frameworks als Boostrap nicht auszuschließen. Deshalb entwickelten wir für unser Widget einen Frame-Wrapper, welcher dank der postMessage-Schnittstelle trotzdem einen Datenaustausch zwischen einbettender Seite und Widget ermöglicht.
Vorsicht bei zu tiefen Verschachtelungen
Eine weitere Herausforderung, die es zu lösen galt, waren Performance-Probleme bei großen und komplexen Tabellen. Als Ursache entpuppte sich ein in die Tabelle eingebetteter Detail-Dialog, der in der ersten Version als Komponente in jede Tabellenzeile eingebettet wurde. Dies führte bei vielen Zeilen zu einem sehr großen und tief verschachtelte DOM-Modell mit langen Lade- bzw Renderzeiten. Die einfache Lösung war das Ersetzen der vielen Dialoge durch einen einzelnen Dialog außerhalb der Tabelle, welcher zur Laufzeit die Daten der angeklickten Tabellenzeile übergeben bekommt: Statt mehreren hundert DOM-Elementen, hatten wir nur noch eines - und damit massiv verbesserte Ladezeiten.
Was kommt als nächstes?
Trotz der angesprochenen Herausforderungen sind wir sehr zufrieden mit unserer Entscheidung für das Vue-Framework und werden dessen Nutzung konsequent weiter ausbauen. Neben dem Go-Live weiterer Vue-basierter Komponenten steht in diesem Jahr zusätzlich auch die Migration von Vue2 zur neuen Version 3 an.
Es bleibt spannend und wir werden weiter über unsere Reise mit Vue berichten!
