Quasar Framework – ein heller Stern im JavaScript-Universum!?

Als Quasar bezeichnet man den sternartigen Kern einer Galaxie, der sehr große Energiemengen ausstrahlt. So weckt bereits der Name des JavaScript Frameworks Quasar sehr hohe Erwartungen. Ob es hält, was sein Name verspricht, lest ihr in diesem Beitrag.

Bei Quasar handelt es sich um ein JavaScript Framework für die Frontend Entwicklung von Single Page Applications. Es vereint bewährte JavaScript Programmpakete mit selbst entwickelten Frontend Komponenten. So bietet es eine umfassende Programmierumgebung für die Entwicklung moderner, responsiver Apps.

Das Grundgerüst

Screenshot @ Martin Rustler http://quasar-framework.org/components/button.html

Für die Erstellung des Grundgerüsts einer Quasar App stellt der Entwickler des Frameworks die Kommandozeilen-Anwendung quasar-cli zur Verfügung. Diese wird einfach über den populären npm Paketmanager installiert. Zudem dient diese Anwendung der Erstellung neuer App-Komponenten und dem Ausführen und Bauen der App.

Für die Entwicklung der App ist die Verwendung von VueJS vorgesehen – ein JavaScript-Framework nach dem Model-View-ViewModel-Muster. VueJS erlaubt eine modulare und strukturierte Anwendungsgestaltung. In Verbindung mit Vuex für die Verwaltung des Appstatus und vue-router für die Navigation innerhalb der App bietet Quasar dem Entwickler mit VueJS eine Plattform mit einer sehr aktiven Nutzerbasis, die sich wachsender Beliebtheit erfreut.

Reiche Auswahl

Mit einer sehr großen Anzahl an bereits vorhandenen, vorgefertigten (VueJS-)UI-Komponenten stellt Quasar eine sehr große und gut dokumentierte Bibliothek an responsiven Frontent-Elementen zur Verfügung, die kaum noch Wünsche offen lassen sollte. Zudem sind die einzelnen Komponenten auf einfache Weise erweiterbar und anpassbar. Zusätzlich lässt sich das Farbschema der App jederzeit auf die eigenen Bedürfnisse abstimmen. Für verschiedene Bildschirmgrößen optimierte Layouts werden mit Quasar ebenfalls zum Kinderspiel.

Multi-Plattform

Der wohl augenscheinlichste Vorteil von Quasar ist die Vorbereitung für Multi-Plattform-Unterstützung. Ein mit Quasar erstelltes Projekt kann zum einen als Single Page Application für Desktop- und Mobile-Browser ausgeliefert werden. Dabei umfasst die Browser-Unterstützung sämtliche große Browser wie Google Chrome, Firefox, IE11/Edge, Safari und Opera. Außerdem ist auch die Ausführung als native Mobile App mittels des Cordova Wrappers möglich. Dies erweitert die möglichen Plattformen um Android, iOS, Blackberry und Windows Phone. Für ein natives Look and Feel auf mobilen Geräten kann der Entwickler das Styling für die jeweilige Plattform anpassen. Derzeit steht ein Style im Material Design von Google für Android und ein iOS Theme für Endgeräte von Apple zur Verfügung. Wem diese Auswahl an Plattformen noch nicht ausreicht, kann durch den Electron Wrapper die App schließlich auch auf Windows-, Linux- und MacOS-Desktop-Systemen als installierbare Anwendung anbieten.

Quasar Play

Ein weiteres Highlight des Quasar Frameworks ist die sogenannte Quasar Play App. Derzeit steht die Quasar Play App kostenlos im Google Play Store zur Verfügung. Laut Entwickler soll jedoch bald auch eine Version für iOS folgen. Mit diesem hilfreichen Tool ist es dem Entwickler möglich, seine App in Echtzeit auf dem mobilen Endgerät zu betrachten. Durch Hot Reload wird jede Änderung im Programmcode direkt auf dem Smartphone oder Tablet sichtbar. Dafür muss die App nicht neu kompiliert oder installiert werden.

Fazit

Mit der Unterstützung für nahezu alle großen Plattformen und der sehr großen Auswahl an vorgefertigten App-Komponenten liefert „Quasar Framework“ ein sorgfältig geschnürtes Paket für JavaScript-Entwickler. Zudem wird mit der „Quasar Play App“ der Entwicklungsprozess sinnvoll unterstützt und beschleunigt. Das Framework und sein Haupt-Entwickler Razvan Stoenescu verdienen definitiv mehr Aufmerksamkeit, wozu ich hoffentlich mit diesem Beitrag ein Stückchen beisteuern kann.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.