Warum wir Vue.js verwenden und du es vielleicht auch solltest

Was ist eigentlich Vue.js? Was sind Single-File Components? Wie funktioniert das mit dem Lifecycle einer Komponente? Das alles wollen wir dir hier beantworten. Aber vor allem, stellen wir dir vor, warum wir bei Lean Ocean Vue.js toll finden und auch in Zukunft weiter verwenden werden.

Und wer weiß? Vielleicht entscheidest du dich bei deinem nächsten Projekt dann auch für Vue.js!

Was ist Vue.js?

Laut der offiziellen Dokumentation ist Vue.js ein Progressive JavaScript Framework für die Entwicklung von User Interfaces. Es baut auf HTML, CSS und JavaScript auf und bietet ein deklaratives und komponentenbasiertes Programmiermodell mit dem du einfache oder komplexe Benutzeroberflächen effizient entwickeln kannst. Es lässt sich dabei leicht an deine Bedürfnisse anpassen.

Das Framework wurde vom ehemaligen Google-Ingenieur- & AngularJS-Entwickler Evan You entwickelt. Er wollte ein einfacheres Framework entwickeln, mit den – seiner Meinung nach – besten Teilen aus AngularJS. Und so wurde im Februar 2014 die erste Version von Vue.js veröffentlicht. Mittlerweile ist die neueste stabile Version 3.2.31.

Die zwei Kernfunktionen von Vue.js sind:

  • Das deklaratives Rendering (die Wiedergabe von Objekten im Browser-Fenster)
    Wie schon erwähnt, baut Vue.js auf dem HTML-Standard auf. Das wird mit Hilfe von sogenannter “Template Syntax” realisiert. Diese gibt uns die Möglichkeit, die HTML-Ausgabe dynamisch und basierend auf JavaScript im Browser anzuzeigen. (Keine Sorgen, das wird verständlicher, wenn du dir die nächste Grafik ansiehst.)
  • Reaktivität
    Vue.js verfolgt automatisch die Änderungen, die im JavaScript passieren (z.B. eine asynchrone Anfrage, die die Daten eines Users von einem Server holt) und aktualisiert das DOM (Document Object Model) sehr effizient. Es lädt nicht die ganze Seite neu, sondern aktualisiert nur den Teil des DOMs, wo die Änderungen notwendig sind – z.B. ein Paragraph-Element mit den Namen des Users.
Single-File-Component
Output

Wie am Anfang bereits erwähnt bietet Vue.js ein komponentenbasiertes Programmiermodell an. Das heißt, dass jede Vue-App aus vielen kleinen wiederverwendbaren Komponenten besteht. Wir erstellen die Vue-Komponenten in einem HTML-ähnlichen Dateiformat, genannt Single-File-Component (SFC) (auch bekannt als *.vue-Dateien). Eine Vue-SFC kapselt, wie der Name schon sagt, die Logik (JavaScript), die Vorlage (HTML) und die Stile (CSS) der Komponente in einer einzigen Datei. Lass uns einmal zusammen durch die Struktur einer solchen Komponente gehen.

Wie man auf dem ersten Bild sieht, besteht eine Komponente aus drei Teile – <template>, <script> und <style>. Die letzten zwei sind optional. Das bedeutet eine Vue-Komponente, kann auch aus reinem HTML sein – ganz einfach!

Nur ein <template> allein kann aber nicht viel machen und wird nicht so schön aussehen. Deswegen sind <script>- und <style>-Teile schon notwendig.

In dem <script>-Teil kann man die Kernlogik einer Komponente mit Hilfe von JavaScript oder TypeScript bauen. Ganz allgemein kann man hier benötigte Daten je nach Bedarf abrufen und bearbeiten. Dafür bietet Vue.js eine Menge an Möglichkeiten an. Außerdem kann das Framework auch den Lebenszyklus der Komponenten verfolgen und so genau im richtigen Moment eine Aktion durchführen. Wie der Lifecycle einer Komponente abläuft, kannst du in der nächsten Abbildung sehen.

Was das <style scoped>-Tag angeht, spricht der Name schon für sich. Hier definiert man das CSS. Durch das Attribut scoped werden die Stile nur in dieser Komponente angewendet. Wenn wir uns das Bild anschauen, bedeutet das in diesem Beispiel, dass nur das Label in dieser Komponente rot sein wird.

Lifecycle einer Komponente

Dieses Diagramm aus der offiziellen Vue.js-Dokumentation zeigt den Vue.js Instance-Lifecycle:

Quelle: https://vuejs.org/guide/essentials/lifecycle.html

Jede Vue-Komponente läuft bei ihrer Erstellung eine Reihe von Initialisierungsschritten durch. Beispielsweise muss ein Data-Watcher eingerichtet werden, der die Änderungen der Daten beobachtet, das kompiliert und das DOM updatet, wenn sich die Daten ändern. Während dieses Erstellungsprozess werden die sogenannten Lifecycle Hooks getriggert. Das sind einfach JavaScript-Funktionen, die die Möglichkeit geben, in bestimmten Phasen deinen eigenen Code hinzuzufügen. Wir gehen hier nicht in die Details jeder einzelnen Funktion. Wenn du es genauer wissen möchtest findest, du hier eine Übersicht. Wir konzentrieren uns im Folgenden auf die zwei, die wir am häufigsten verwenden.

  • created()
    Wie man auf dem Diagramm oben sieht, wird die created()-Methode ausgelöst bevor die Vorlage gerendert wird. Hier wäre zum Beispiel die richtige Stelle um eine GET-Request an einen Endpoint zu schicken, um die Daten deiner Komponente zu bekommen. Es wäre keine zweite Aktualisierung des DOMs notwendig, wenn die Daten ankommen.
  • mounted()
    In diesem Hook, hast du schon den vollen Zugriff auf die reaktiven Komponente, die Vorlagen und das zurückgegebene DOM. Diesen Hook kannst du auch gut für GET-Requests verwenden.

Warum verwenden wir Vue.js in unserem Unternehmen?

Der Software-Stack, den wir für die Entwicklung unserer Produkte verwenden ist relativ einfach – Vue.js + Laravel. Wir basieren unsere Anwendungen auf dem MVC-Pattern (Model, View, Controller). Dabei setzen wir Laravel als Plattform für das Backend der Anwendung ein und brauchen dann nur noch ein View-Tool für das Frontend. Vue.js konzentriert sich im Kern nur auf die Ansichtsebene einer Anwendung, sodass die Integration mit anderen Plattformen oder bestehenden Anwendungen wirklich einfach ist.

Die heutigen Internet-Anwendungen sind so aufgebaut, dass die User möglichst dieselbe User-Experience haben, als ob sie eine Desktop-Anwendung benutzen. Alles passiert im Frontend und die Seite wird nie neu geladen, sondern nur einzelne Stellen aktualisiert.

Vues Reaktivität in Kombination mit den wiederverwendbaren Komponenten, die in verschiedenen Kombinationen verwendet werden können, macht Vue.Js zum perfekten View-Tool für unsere Anforderungen.

Zwei weitere wichtige Vorteile sind:

  • Easy-to-learn
    Im Vergleich zu den anderen marktführenden JS Frontend Frameworks – React und AngularJS, hat Vue.js eine flachere Lernkurve. Wenn du mit JavaScript, HTML und CSS vertraut bist, kannst du nach nur einem Tag Lesen der Dokumentation eine nicht triviale Anwendung mit Vue erstellen.
  • Laravel Integration
    Vue lässt sich gut in Laravel integrieren. Du kannst Vue-Komponenten erstellen und sie so verwenden, als würdest du normale HTML-Tags in deiner Blade-Datei verwenden. Außerdem kannst du Daten den Komponenten aus der Blade-Datei zur Vue-Datei übergeben und diese in der Komponente darstellen.

Bonus: Coole VS-Code- & Google-Chrome-Erweiterungen

Jeder Entwickler bevorzugt andere IDEs und Browser. Wir empfehlen zum Beispiel die Kombination:Visual Studio Code und Google Chrome. Hier gibt es 2 tolle Extensions, die dir Arbeit mit Vue.js vereinfachen:

  • Vetur – eine VS-Code-Erweiterung
    Sie bietet eine Menge von Syntax- und Semantik-Highlights für Vue.js-Dateien an. Außerdem bietet sie Emmet, IntelliSense, Formatting usw. an. Wir können diese Erweiterung darum wirklich stark empfehlen.
  • Vue.js devtools – eine Google-Chrome-Erweiterung
    Sie bietet Entwickler*innen eine benutzerfreundliche Lösung zum Debuggen und zur Inspektion von Vue-Anwendungen an. Nach der Installation können Vue-Anwendungen im Entwicklungsmodus in den Entwicklertools des Browsers überprüft werden. Man kann dort die Events, den aktuellen Stand der Komponenten und vieles mehr beobachten und analysieren. Ein MUST-HAVE für uns.

Fazit

In diesem Artikel haben wir uns angesehen was Vue.js ist, wie die Struktur einer Single-File Component aussieht und was die Lifecycle Hooks sind. Außerdem haben wir euch vorgestellt warum wir in unserem Unternehmen Vue.js vertrauen.

Es gibt eine ganze Menge von Artikel, Tutorials und Videos zum Thema Vue.js. Wenn du interessiert bist, empfehlen wir dir dich weiter in das Thema einzuarbeiten. In diesem Artikel haben wir dir vor allem vorgestellt, was für Möglichkeiten du mit Vue.js hast.

Zusammengefasst: Vue ist sehr einfach zu bedienen und funktioniert gut mit Laravel. Für uns macht die Entwicklung mit Vue.js echt viel Spaß und wir freuen uns auf die neuen Projekte, in denen wir unsere Vue-Kenntnisse anwenden und immer erweitern können.

Wobei können wir dich unterstützen?

Neues Projekt

Du hast eine Idee für eine digitale Lösung und suchst einen Partner, der dich begleitet?

Verstärkung für dein Projekt

Du hast bereits eine Anwendung und suchst Verstärkung in der Entwicklung?

Artikel teilen

Mehr aus unserem Blog

5 Jahre Lean Ocean – Das Interview

Vor 5 Jahren ist Lean Ocean in einem WG-Zimmer gestartet. Und heute hat das Unternehmen nichts von seinem Startup Flair verloren – nur die Büros sind schicker geworden.
Im Video-Interview werfen unsere Geschäftsführer Oliver und Stephan zusammen einen Blick auf die Entwicklung von Lean Ocean, gemeinsame Meilensteine und was die Arbeit bei Lean Ocean prägt.

Ein Tag als Softwareentwickler bei Lean Ocean

Was macht eigentlich ein Softwareentwickler bei Lean Ocean und wie sieht ein üblicher Arbeitstag aus? Das erzählt dir Norbert im folgenden Blogartikel! Wir haben Norbert, einen unserer Developer, einen Tag lang begleitet und über die Schulter geschaut. Vom ersten Kaffee zum wohlverdienten Feierabend– hier erhältst du spannende Einblicke in einen abwechslungsreichen Arbeitstag.

Von der Idee zum Feature

Wie sieht es eigentlich bei Lean Ocean hinter dem Code aus? Wie läuft so ein Projekt ab und wie wird aus einer Idee dann ein richtiges Feature? In diesem Artikel beantworten dir Oliver und Tom die wichtigsten Fragen zu unserem brandneuen Format #behindthecode. Als erstes geht Oliver als CTO von Lean Ocean auf den Entwicklungsprozess von Features ein und dann gibt uns unser Projektmanager Tom noch ein paar Antworten.

Oliver Holz

Oliver Holz

holz@lean-ocean.com