Bei Quasar handelt es sich um ein Javascript-Framework, das auf dem bekannten VueJS (in Version 3) aufsetzt. Das Quasar-Framework (ausgesprochen: /ˈkweɪ.zɑɹ/) bietet dabei für (nahezu) alle Anwendungsfälle vorgefertigte Komponenten im Material Design, die sich schnell und einfach einsetzen lassen. Diese Art von Framework wird daher auch gerne als „UI component library“ bezeichnet.
Quasar reiht sich also in die Reihe vieler anderer, VueJS-basierter Frameworks ein. Der größte Mitbewerber dabei dürfte Vuetify sein: Ein Framework, das eine Art de-facto-Standard für VueJS 2 war. Das Problem daran ist, dass es bis heute (Juni 2022) noch keine stabile, auf VueJS 3 basierende Version von Vuetify gibt.
Warum Quasar?
Diese Frage ist durchaus berechtigt, denn neben Vuetify, das wegen der nicht vorhandenen VuejS-3-Kompatibilität nicht in Frage kommt, gibt es noch viele weitere UI-Frameworks. Spontan fallen etwa Namen wie BootstrapVue, CoreUI Vue, Vue Material Kit oder Buefy. Alle haben gemein, dass sie diverse Komponenten wir Buttons, Grids, Formulare usw. mitbringen, mit denen sich, basierend auf VueJS, sehr schnell Benutzeroberflächen oder Dashboards als Single Page Application umsetzen lassen.
Screenshot von quasar.dev.
Quasar erschien mir allerdings als am „komplettesten“ und einfachsten. Es steht eine umfangreiche Dokumentation unter quasar.dev zur Verfügung, die auch stets aktuell gehalten wird. Das Forum auf Github lebt und die Community hilft bei Problemen schnell und freundlich weiter. Außerdem steht Quasar unter der MIT-License und lässt sich daher problemlos in beliebige Projekte integrieren. Laut eigener Aussage können mit demselben Code
- SPAs (Single-Page-Apps)
- SSR (Serverseitig gerenderte Apps) (+ optionale PWA-Client-Übernahme)
- PWAs (Progressive Web-Apps)
- BEX (Browsererweiterungen)
- Mobile Apps (Android, iOS, …) über Cordova oder Capacitor und
- Plattformübergreifende Desktop-Apps (mit Electron)
erstellt werden. Ob das wirklich so ist, kann ich nicht beurteile – hier kommt Quasar bislang „nur“ für SPAs zum Einsatz.
Was kann Quasar?
Am Anfang allen Handelns steht ein CLI. Der Trend, dass jedes Toll seine eigene Kommandozeile mitbringt, hat auch hier nicht Halt gemacht. Quasar selbst wird, wie auch VueJS, per npm installiert und bringt danach eigene Routinen mit, mit Hilfe derer sich eine Standard-Quasar-App generieren lässt (siehe https://quasar.dev/start/quasar-cli). Steht die App, kann die Entwicklung beginnen. Natürlich bringt Quasar auch seinen eigenen Dev-Server (quasar dev) bzw. seinen eigenen Build-Prozess (quasar build) mit.
Große Auswahl
Im Grunde bringt Quasar eine eigene Variante für alle VueJS-Components mit. Welche das im Einzelnen sind, seht ihr unter diesem Link: https://quasar.dev/vue-components. Im Grunde genommen bleiben keinerlei Wünsche übrig. Ob Carousels, Formular-Elemente, Slider, Loading-Indicators, Colorpicker, WYSIWYG, Listen, Modals, Tabs… es gibt für alles vorgefertigte Komponenten. Und wenn die Funktionen eines Components einmal nicht ausreichen, lasse sich diese problemlos erweiterten. Natürlich setzt Quasar auch das Single-File-Component-Pattern aus VueJS konsequent um. Neben diversen, zusätzlichen Quasar Plugins ist natürlich auch Axios im Bundle direkt mit dabei.#
Fazit
Quasar bringt alles mit, um schnell und einfach moderne User Interfaces erstellen zu können. Dabei solltet ihr allerdings im Umgang mit VueJS 3 schon etwas geübt sein. Ansonsten empfehle ich, dass ihr euch erst damit vertraut macht. Das Quasar-Framework gibt es schon seit 2015. Außerdem stehen einige große Sponsoren hinter der Entwicklung. Ob dies gut oder schlecht ist, kann jeder selbst beurteilen – es ist aber zumindest ein Zeichen dafür, dass die Entwicklung nicht plötzlich eingestellt werden wird. Ich selbst bin wirklich begeistert von Quasar und arbeite sehr gerne damit.
