Nuxt.js, Directus und Laravel – WebApps

Nuxt.js, Directus und Laravel – WebApps // PWA // Headless und Schnell

Die Webentwicklung schreitet rasant voran. Immer mehr ausgereifte Javascript Frameworks und -erweiterungen tauchen mit dem Versprechen auf, die Entwicklung zu vereinfachen und neue moderne Features bereitzustellen.

Da fällt die Auswahl nicht leicht.

Nach ausgiebiger Evaluationsphase der drei Hauptframeworks Angular, React und Vue.js haben wir uns bereits vor mehr als zwei Jahren aus folgenden Gründen für den generellen Einsatz von Vue.js entschieden:

  • Reifes Framework mit umfangreichem Ökosystem und breitem Einsatz
  • Leichte Erlernbarkeit
  • Hohe Performance
  • Lässt sich Standalone nutzen aber auch ohne Probleme in jedes Anwendungsframework, welches wir einsetzen, integrieren

Wir verwenden daher Vue.js für anspruchsvolle Erweiterungen in Typo3, Shopware, Magento oder WordPress/Woocommerce genauso wie für Individualentwicklung auf Basis Laravel.

Neu setzen wir nun zusätzlich auf Nuxt.js für die Entwicklung von schnellen, mobile-optimierten Anwendungen.

Anwendungsfälle

  • Bereitstellung von Kundencockpits für InHouse Systeme (z.B. ERP, CRM, Produktdatenbanken u.a.)
  • Einfache Shop-Lösungen für Kaufen- , Mieten- , Download-Anwendungsfälle
  • Mobile WepApps mit PWA Erweiterungen
  • Erweiterung von bereits bestehenden Webanwendungen um zusätzliche Frontends

Software-Stack

Nuxt.js setzt auf Vue.js auf und ist ein reines Frontendframework.

Der Headless Ansatz zwingt zu einer klaren Trennung von Frontend und Backend, was zu saubererem Code und einer besseren Arbeitsteilung führt.

Die Kommunikation findet einzig über REST-API Zugriffe statt, so dass auch jederzeit das Frontend oder Backend getrennt ausgetauscht werden können.

Zusätzliche Systeme können über den REST-API Ansatz ebenfalls nahtlos integriert werden.

So können auch Anwendungen mit mehreren Frontends für unterschiedliche Kanäle einfach implementiert werden.

Neben dem vollen Umfang von Vue.js beitet Nuxt.js die Möglichkeit, Applikationen einfach um PWA-Features wie Push-Notifications oder Offline-Fähigkeit zu erweitern. Zudem abstrahiert und vereinfacht dieses Framework die Entwicklung erheblich, so dass schnell und einfach aussagekräftige Prototypen für die weitere UX (User-Experience)-Definition mit dem Kunden bereitgestellt werden können.

Sobald das Grunddesign einmal definiert ist, kann bereits in einer frühen Projektphase mit dem Kunden zur weiteren Spezifikation seiner Wünsche und der Benutzerführung direkt in der Anwendung gearbeitet werden, statt über ein Sammelsurium von proprietären Artefakten wie Word, Powerpoint oder proprietären Mockup-Tools.

Dies spart Zeit und Kosten!

Wir verwenden als Standard Backend Lösung Laravel, welches wir je nach Anwendungsfall mit dem Open-Source Headless CMS System Directus über unsere eigene Next AG Laravel-Directus-Bridge erweitern.

Directus ist ein freies Open-Source Headless CMS & API System, welches es erlaubt, beliebige Datenmodelle ohne Programmierung schnell und einfach per Konfiguration zu erstellen.

Die Benutzeroberfläche, genauso wie die zugehörige REST-API für die Integration entstehen bei der Konfiguration automatisch, so dass das System ohne eigenen Code eingesetzt und angebunden werden kann.

Alle gängigen einfachen Datentypen aber auch komplexe Typen wie Bild, Datei, Rich-Text, Kalender und viele weitere stehen mit ansprechenden Frontend-Widgets out-of-the Box zur Verfügung.

Auch alle Relationen zwischen den Daten sowie Mehrsprachigkeit können einfach per Konfiguration hinzugefügt werden.

Dies bietet gegenüber der reinen Laravel-basierten Backend-Entwicklung den Vorteil, dass man das Administrationsbackend zur Datenpflege, welches dem späteren Nutzer der Anwendung keinen Mehrwert bietet, nicht mehr selbst implementieren muss.

Dies spart Zeit und Kosten!

Die Kombination von Vue.js, Nuxt.js, Laravel und Directus ist daher unser „Universaltaschenmesser“, um die Kundenwünsche, welche weit über Standard CMS- und E-Commerce-Frameworks hinausgehen, effizient zu realisieren.

Die Erstellung von WebApps mit professionellem Look-and-Feel und neuen progressive Features für alle Endgeräte wird so zu einem Kinderspiel und stellt eine echte Alternative zur teuren und komplexen Entwicklung von native Apps für unterschiedliche Systeme wie iOs, Android und Browser dar.

Haben auch Sie anspruchsvolle, neue Themen im Webbereich? Kommen Sie auf uns zu. Wir freuen uns, Sie mit modernen und nachhaltigen Lösungen begeistern zu können.

Dieser Beitrag wurde von Oliver Riske erstellt.