Teil 1: Gründe für die Verwendung von Vue.js in Sitecore Projekten

Vue.js – ein bekannter Begriff in der Entwicklung von state-of-the-art Web Apps – doch was genau ist Vue.js und wie kann es verwendet werden? Vue.js ist derzeit eine der aufstrebendsten Frontend Technologien, welche gerne im Zusammenhang mit Angular und React.js erwähnt wird. Grundsätzlich ist Vue.js, so wie React.js, als JavaScript Library zu identifizieren (im Gegensatz zu Angular, welches ein Framework ist).

Oberflächlich betrachtet können die Unterschiede wie folgt dargestellt werden:

• Angular: Angular ist ein open-source Framework, welches in TypeScript geschrieben ist und von Google entwickelt wurde. Als Framework stellt Angular viele unterschiedliche Funktionen zur Verfügung, die einem die Entwicklung von sehr komplexen Web Apps erleichtert. Web Apps die mittels Angular erstellt werden, sind aufbauend auf dem Framework zu entwickeln.
• React.js: React.js ist eine open-source Library, die von Facebook zur Verfügung gestellt wird, um die Entwicklung des User Interfaces zu unterstützen. Seit Oktober 2017 ist die Library unter der MIT Lizenz lizenziert und kann daher uneingeschränkt genutzt werden. React.js stellt Funktionen zur Verfügung, um User Interfaces zu steuern und zu rendern. Funktionen abseits davon müssen durch weitere Libraries eingebunden werden.
• Vue.js: Vue.js ist so wie React.js eine open-source Library, die jedoch im Gegensatz zu React.js und Angular sehr “lightweighted” von der Dateigröße ist. Vereinfacht gesagt, ist Vue.js eine Kombination aus Angular und React.js. Vue verwendet Konzepte wie Directives (Angular) und Komponenten (React, Angular), um User Interfaces zu steuern und zu rendern. Wichtig in diesem Zusammenhang ist zu wissen, dass Vue.js die Möglichkeit bietet, mit bereits vom Server gerenderten HTML zu arbeiten und dieses zu kontrollieren, was bei React.js nicht der Fall ist.

Die Nutzung von Frontend Frameworks

Zur Veranschaulichung, welches Framework in welchem Ausmaß genutzt wird, habe ich eine Studie betreffend “Trends in der Frontend Entwicklung” gesucht und bin dabei auf Stateofjs gestoßen: Stateofjs hat im Jahr 2017 über 20.000 Entwickler betreffend Frontend Frameworks befragt. Die Auswertung (siehe Grafik 1) hat ergeben, dass immer mehr Entwickler daran interessiert sind Vue.js zu lernen (12 k) und dass mehr der Befragten Vue.js (4,6 k) verwenden als Angular (Angular 2; 4,4 k).

Im Vergleich dazu waren im Jahr 2016 (siehe Grafik 2; es wurden um die 9000 Leute befragt) noch mehr Entwickler an Angular (Angular 2; 1893) als an Vue.js (1750) interessiert und auch die Nutzung verhielt sich umgekehrt. Einzig React.js behält seine Vorreiterrolle in beiden Jahren.

Dies zeigt, dass sich der Trend hin zur Verwendung von Vue.js und React.js bewegt  und von sich von Angular entfernt. Die Gründe dafür wurden nicht angegeben.

Grafik 1: Nutzung von Frontend Technologien im Jahr 2017

Grafik 2: Nutzung von Frontend Frameworks im Jahr 2016

Wir nutzen derzeit bei einem renommierten Kunden Vue.js. Die Gründe, warum wir uns für Vue.js und gegen Angular und React.js entschieden haben, waren:

• Die Applikation basiert auf dem .Net CMS Sitecore, welches zum Rendern des User Interfaces .cshtml Dateien verwendet (=> HTML wird serverseitig ausgeliefert).
• Das Rendering des User Interfaces konnte nicht vom CMS entkoppelt werden, da dadurch wichtige Funktionen, die das CMS zur Verfügung stellt, nicht mehr “out-of-the-box” funktioniert hätten.
• Es muss mit teilweise sehr komplexen legacy Code (der zu 99,9 % auf jQuery und jQuery Plugins basiert) gearbeitet werden.
• Es handelt sich um einen Onepager
• Die Applikation besteht zu 80 % aus Formularfeldern, wodurch ein Model-Binding ein Muss darstellt, um sinnvoll Daten zu speichern und zu bearbeiten.
• Das Frontend der Applikation wird gerade sukzessive auf TypeScript umgestellt.
• Vue.js ist leicht zu erlernen, klein in der Dateigröße und wird mittlerweile von einem eigenen Core-Team, welches durch Sponsoring lebt, entwickelt. Außerdem wird die Library von vielen Entwicklern empfohlen, wenn es um die Erstellung von nicht zu großen (das heißt nicht, dass Vue.js nur für kleine Projekte geeignet ist!) Applikationen geht, da lediglich eine Datei (sowie bei jQuery) eingebunden werden muss, um die Library zu verwenden.
• Vue.js kann gemeinsam mit TypeScript genutzt werden.
• Vue.js kann ohne Probleme in bestehende Projekte integriert werden und kann mit bereits gerendertem HTML arbeiten.

Der Einstieg in Vue.js

Der Einstieg in Vue.js ist sehr einfach, vor allem wenn bereits Erfahrungen betreffend anderer Librarys bzw. Frameworks vorhanden sind. Ich habe davor schon mit Angular 1 und Backbone gearbeitet und konnte daher schnell das Basiskonzept von Vue.js erfassen. Der Vorteil an Vue.js war, dass mittels Einbindung der vue.min.js Datei rasch getestet werden konnte, ob die Library mit Sitecore kompatibel ist. Durch die Nutzung von Directives ist es möglich, direkt über das serverseitig gerenderte HTML, Daten an die Vue Instanz zu übergeben. Weiters, ist es möglich Text Interpolations im Mustache Syntax (Mustache ist eine Template Engine für das Frontend) zu rendern, welche von Vue.js vor der tatsächlichen Auslieferung des HTMLs ersetzt werden.  Es muss dazu lediglich der Vue Instanz der   Kontext, in dem sich die Text Interpolation befindet, angegeben werden.

HTML-Datei:

<div id=”app”>
   {{message}}
</app>

JavaScript-Datei:

var vm = new Vue({
  el: “#app”,
  data:{
    message: ‘Ich bin eine message’
  }
});

Jeglicher Inhalt, der sich im Container #app befindet kann somit von Vue.js gesteuert werden. Dies ist die einfachste Art für eine Integration von Vue.js im Projekt.

In unserem Kunden-Projekt war die Implementation ein wenig komplexer, weil wir gerade am Umstellen auf TypeScript waren und auch ECMA-Script 6 (ES6) Features nutzen wollten. Grundsätzlich kann Vue.js in TypeScript Projekten verwendet werden, jedoch ist wenig Literatur zu finden, wie dieses Problem gut und sinnvoll umzusetzen ist.

Aus diesem Grund werden sich die nachfolgenden Teile dieser Blogreihe mit folgenden Thematiken beschäftigen:

• Nutzung von Vue.js klassenbasiert in einem TypeScript Projekt
• Nutzung von Vue.js Komponenten klassenbasiert in einem TypeScript Projekt
• Die Übergaben von Daten an klassenbasierte Vue.js Komponenten mittels Decorators

The post Teil 1: Gründe für die Verwendung von Vue.js in Sitecore Projekten appeared first on ANECON Blog.