Wie gut ist das Framework für Unternehmensanwendungen geeignet?

Vue.js im Enterprise-Umfeld: Geht das gut?

Alexander Schwartz

© Shutterstock/sedat seven

Unternehmen mit differenzierten Konzernstrukturen tun sich teilweise schwer, sich auf neue Anforderungen seitens des Markts einzustellen. Vielfach gelangen aktuelle Projektvorgehen in eine Sackgasse, da die Strukturen und Systeme solcher Projekte maßgeblich durch unflexible und starre Mechanismen gesteuert und eingebunden sind. So auch im Fall eines Unternehmens, bei dem wir geholfen haben, Wege aus der Sackgasse zu finden – mit Scrum.

Für den erfolgreichen Einsatz eines Frameworks in Enterprise-Anwendungen ist entscheidend, dass das Framework gut erlernbar ist, ausgereifte Werkzeuge vorliegen und stabile APIs langfristig zur Verfügung stehen. Dieser Artikel geht diesen Anforderungen in Bezug auf Vue.js nach und gibt dazu Antworten.

Einsatz in crossfunktionalen Teams

Die agile Softwareentwicklung hat auch in der Enterprise-Welt Einzug gehalten: Crossfunktionale Teams entwickeln in kurzen Iterationen Software. Vorzugsweise betreut ein Team eine oder mehrere vertikal geschnittene Anwendungen, die jeweils eine abgeschlossene Fachlichkeit abbilden und unabhängig von anderen Teams und Anwendungen ausgeliefert werden können. Dies bedingt jedoch, dass das Team alle Aufgaben vom Frontend bis zum Backend umsetzen kann. Damit das Team schnell produktiv werden kann, müssen die verwendeten Technologien in kurzer Zeit zumindest in ihren Grundzügen von allen Teammitgliedern verstanden werden. Ist Vue. js dieser Enterprise-Anforderung gewachsen?

Der Start mit Vue.js fällt leicht, da nur JavaScript- und HTML-Kenntnisse benötigt werden. Render Functions und TypeScript sind optional. Der Vue.js Guide  erleichtert den Einstieg und stellt nacheinander die verschiedenen Konzepte vor. Zusätzlich hilft der Vue. js Style Guide , wartbaren und fehlerarmen Code zu schreiben. Schließlich beschreibt ein Cookbook wiederkehrende Aufgaben und ihre Lösung. Das ESlint-Vue-Plug-in kann den eigenen Code gegen den Vue.js Style Guide prüfen.

Wer zur Einführung lieber ein Buch liest, wird auch fündig: „The Majesty of Vue.js 2“ von Alex Kyriakidis und Kostas Maniatis war eines der ersten Bücher zum Thema, es liegt auch in deutscher Übersetzung vor. Inzwischen gibt es weitere Bücher, z.B. im Manning-, O’Reilly- oder Packt-Verlag.

For free: The iJS React Cheat Sheet

You want to get started with React?
Our Cheat Sheet includes all the most important snippets.
Get the sheet for free!

Download for free

 

API Summit 2018
Christian Schwendtner

GraphQL – A query language for your API

mit Christian Schwendtner (PROGRAMMIERFABRIK)

Werkzeuge für das Team

Für die Vue.js-Komponentenentwicklung muss die IDE die Single-File Components von Vue.js unterstützen. Darin werden HTML-Template, JavaScript und Styling für jede Komponente zusammengefasst, sodass sie gemeinsam bearbeitet und versioniert werden können (Listing 1).

<!-- code example for a single file component -->
<template>
  <div>
    <h1>This is a counter</h1>
    {{ counter }} <button v-on:click="increment">increment</button>
  </div>
</template>

<script>
export default {
  name: 'counter',
  data: () => ({
    counter: 0
  }),
  methods: {
    increment: function () {
      this.counter++
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>

Hierfür muss in der Regel ein zusätzliches Plug-in installiert werden, damit das Syntax-Highlighting entsprechend funktioniert. Sehr gute Unterstützung für Vue. js bekommt man in der JetBrains-Produktfamilie über das Vue.js-Plug-in (IntelliJ Ultimate, WebStorm, PHPStorm). Für VSCode existiert das Vetur-Plug-in, das vom Vue.js-Team bereitgestellt wird.

Beim Set-up neuer Projekte hilft das Kommandozeilenwerkzeug vue-cli. Es generiert eine Vorlage für neue Anwendungen inklusive Build- und Testautomatisierung. In Version 2 erstellt es Projekte anhand von Vorlagen zu Beginn der Entwicklung. Auch die neue Version 3 ist bereits als Beta verfügbar: Sie kapselt Build-Werkzeuge und zusätzliche Plug-ins so, dass auch während der Entwicklung neue Plug-ins hinzugefügt werden können und Upgrades einfacher möglich sind – eine wichtige Voraussetzung für langlebige Projekte.

Im Entwicklungsmodus ist im Build ein integrierter Hot-Reload-Mechanismus integriert: Sobald eine Änderung an einer Komponente in der IDE gespeichert wird, zeigt er die Änderung noch in der gleichen Sekunde im Browser an. Ein Neustart der Anwendung entfällt, und die Änderung kann sofort getestet werden. Beim Testen und Debuggen der Anwendung im Chrome-Browser hilft das Vue.js-Devtools-Plug-in. Damit können die Komponenteninstanzen auf einer Seite inspiziert und die Daten eingesehen und verändert werden (Abb. 1).

Abb. 1: Vue.js-Devtools im Einsatz

Abb. 1: Vue.js-Devtools im Einsatz

Bibliotheken, Widget-Sets, Rapid Application Development

Die Vue.js Awesome List gibt einen Überblick über das Ökosystem und sammelt Links zu Tutorials, Komponenten und Bibliotheken. Für viele Libraries existieren bereits fertige Anbindungen an Vue.js. Dort finden sich auch UI-Bibliotheken wie bootstrap-vue mit Bootstrap-Design oder Vuetify mit Material-Design. Auch kommerzielle UI-Bibliotheken sind inzwischen verfügbar. Was in der Liste fehlt, ist ein Anwendungsgenerator, der sowohl Backend als auch Frontend generiert, wie z.B. JHipster es tut. JHipster generiert ein Spring Boot Java Backend und ein dazu passendes Frontend auf Basis von Angular oder React, jedoch nicht mit Vue.js.

Was bedeutet das nun für die Enterprise-Entwicklung? Um einen Frontend-Prototyp für eine neue Anwendung zu erstellen, liefern die Beispiele und UI-Bibliotheken gute Vorlagen. Eine UI-Bibliothek ersetzt jedoch kein Usability-Konzept der Anwendung. Vielmehr benötigen die Entwickler Leitlinien, welche Komponenten sie für welchen Zweck benutzen sollen. Ein durchgängiger Generator würde zu Beginn eines Projekts Zeit sparen, doch bringt er nach Erfahrung des Autors viele zusätzliche Abhängigkeiten zu anderen Bibliotheken ins Projekt. Je mehr fachliche Logik implementiert wird, desto mehr tritt der generierte Code in den Hintergrund.

In Enterprise-Projekten, die einen gewissen Umfang und eine geplante Nutzungsdauer von mehreren Jahren haben, hat sich folgendes Vorgehen bewährt:

  1. Auf Basis eines Usability-Konzepts wird ein Screen- Design entworfen.
  2. Ein Design-Guide hilft den Entwicklern, das Screen- Design konsistent in der Anwendung umzusetzen und die gewünschte Corporate Identity einzuhalten. Ein CSS-Framework kann dabei eine Grundlage sein. Ein Beispiel für einen Design-Guide ist PatternFly, der von Red Hat in vielen Produkten genutzt wird. Ein JavaScript-Framework wird jedoch noch nicht vorgegeben.
  3. Das Entwicklungsteam kann die CSS-Klassen direkt nutzen oder eigene, wiederverwendbare Vue.js-Komponenten erstellen. Ein fertiges UI-Framework kann hier als Vorlage dienen, es wird jedoch selten den Design Guide ersetzen können.
  4. Je mehr Bibliotheken von Dritten eingebunden werden, desto schwieriger sind Upgrades von zentralen Bibliotheken. Manchmal hilft es jedoch, zunächst mit einer fertigen Bibliothek Erfahrungen zu sammeln,um dann eine eigene Komponente zu entwickeln, die den individuellen Anforderungen besser gerecht wird.

Stabilität und Weiterentwicklung

Anwendungen im Enterprise-Kontext haben eine Nutzungsdauer von mehreren Jahren. Das gilt sowohl für die Individual- als auch für die Produktentwicklung. Während dieser Nutzungsdauer passen Entwickler die Anwendung regelmäßig an, um Funktionen zu ändern und hinzuzufügen. Parallel dazu entwickeln sich auch die verwendeten Frameworks wie Vue.js weiter: Regelmäßige Updates der Bibliotheken beheben Fehler und bieten neue Funktionen.

Je stabiler die APIs sind, desto produktiver können die Entwickler sein. Vue.js Version 2 wurde im September 2016 veröffentlicht. Seitdem blieb das API stabil; in verschiedenen Minor-Versionen kamen lediglich einzelne Verbesserungen, wie z. B. in der Fehlerbehandlung, dazu. In Version  2.5 wurde die Unterstützung für TypeScript noch einmal deutlich verbessert. Diese langfristige API-Stabilität hat den Vorteil, dass viele Bibliotheken rund um Vue.js zur Verfügung stehen. Auch Einträge in Onlineforen wie Stack Overflow beziehen sich meist auf diese Version.

Die Migration von Version 1 auf Version 2 wurde vom Vue.js-Team vorbildlich unterstützt:

  • Die Änderungen am API waren vorher bekannt. Ein Teil dieser Änderungen konnte bereits bei der Verwendung von Version 1 vorweggenommen werden, um den Migrationsaufwand gering zu halten.
  • Ein Skript scannte die Anwendung, zeigte die Punkte an, die für Vue.js 2 zu ändern waren und verwies auf einen ausführlichen Migration Helper Guide.

Für 2018 ist Vue.js 3 geplant. Das API soll im Verhältnis zu Version 2 unverändert bleiben. Die Änderungen finden unter der Haube statt, um von modernen Browsern profitieren zu können. Parallel dazu soll Vue.js 2 weiterentwickelt werden, um weiterhin ältere Browser wie z. B. Internet Explorer 9 zu unterstützen. Auch wenn diese Aussagen keine absolute Sicherheit bieten, sind es doch gute Voraussetzungen für den Einsatz von Vue.js in Enterprise-Software.

Angular, React, Vue.js – was wäre, wenn?

Für eine Enterprise-Software, die mehrere Jahre weiterentwickelt werden soll, ist eine langfristige Planung der Roadmap des JavaScript-Frameworks im Frontend wichtig. Welches Framework ist damit für die Enterprise- Entwicklung am besten geeignet? Hinter Vue.js stand lange Zeit vor allem eine Person: Evan You. Inzwischen ist das Team gewachsen und wird von verschiedenen Sponsoren unterstützt. Bei den konkurrierenden Frameworks steht stattdessen jeweils ein großer Sponsor dahinter: Bei Angular ist es Google, bei React Facebook. Bei Angular und React folgen Major-Releases in schneller Folge.

Facebook entwickelt React vornehmlich weiter, um die Website des weltweit größten sozialen Netzwerks bauen zu können. Doch ist das nicht wirklich der Anwendungsfall einer typischen Enterprise-Anwendung. Angular liefert nach dem aktuellen Releaseplan zweimal im Jahr ein Major-Release, während jedes zweite Release einen Long-Term-Support von einem Jahr erhält. Bei Vue.js soll Version 3, die 2018 erscheinen soll, API-kompatibel zu Version 2 aus dem Jahr 2016 sein. Damit hat Vue.js von allen drei Frameworks den längsten Releasezyklus.

Die Entscheidung für eines der Frameworks fällt unter diesen Rahmenbedingungen schwer und sollte individuell abgewogen werden. Vue.js ist hier eine gute Wahl, da es auf eine breite Community aufbaut und die längeren Releasezyklen hat. Sollte der Support für Vue.js einmal eingestellt werden, bleibt noch die Möglichkeit, Korrekturen selbst durchzuführen – zumindest, um die Kompatibilität mit neueren Browsern zu gewährleisten. Dafür sollte das Framework möglichst klein sein. Jeweils gepackt und minifiziert kommen die Frameworks auf folgende Größen: Vue 2.x führt mit nur 21 kB vor Angular 5.x mit 70 kB und React/ReactDOM 16.x mit 33 kB.

Wartbarkeit, Pflege, Skalierbarkeit

Eine Anwendung wird dann wartbar, wenn sie strukturiert und automatisiert getestet werden kann. Die Strukturierung erfolgt bei Vue.js über Komponenten. Die erste Gliederung ergibt sich über die Seiten der Anwendung. Wird eine Seite zu groß, kann sie in Unterkomponenten heruntergebrochen werden. Werden Komponenten mehrfach verwendet, können sie wiederverwendbar als Bibliothek ausgelagert werden. Tests sind als Unit-Tests auf Komponentenebene und als Ende-zu-Ende-Tests für die komplette Anwendung möglich. Die Kommandozeilenversion vue-cli erzeugt hier entsprechende Beispiele.

Lesen Sie auch: Vue.js Tutorial: Einführung in das JavaScript-Framework

Große Anwendungen können von Code-Splitting mit webpack und einem State-Management via Vuex profitieren. Code-Splitting erlaubt es, dass bestimmte Teile der Anwendung erst dann initialisiert werden, wenn sie benötigt werden. Das reduziert die Ladezeit der Anwendung deutlich, wenn z. B. zusätzliche Bibliotheken nur an einigen wenigen Stellen in der Anwendung erforderlich sind. State-Management mit Vuex hilft dann, wenn es nicht mehr ausreicht, dass eine Elternkomponente die Daten lädt und die Kindkomponenten sie (ggf. über mehrere Hierarchien) anzeigen. Die Idee ist von Flux und Redux inspiriert und führt einen zentralen komponentenübergreifenden Zustand (State) ein (Abb. 2). Auf die darin enthaltenen Daten können mehrere Komponenten unabhängig voneinander lesend zugreifen und sie anzeigen (Render). Um den Zustand zu ändern, lösen die Komponenten Aktionen (Actions) aus, die Backend-Aktionen auslösen, aber vor allem Änderungen (Mutations) an dem Zustand bewirken können. Jede Änderung führt dann zu einem neuen Zustand, der dann wieder von den Komponenten angezeigt wird. Dadurch, dass die Komponenten nur lesend auf den Zustand zugreifen und Veränderungen des Zustands gekapselt sind, bleiben auch große Zustandsmodelle wart- und testbar. Die Vue.js Devtools unterstützen dabei, indem sie den Entwicklern erlauben, während des Debuggings wieder in vorherige Zustände zurückzuspringen (Time-travel Debugging).

Abb. 2: Überblick Vuex (Quelle: https://vuex.vuejs.org/en/intro.html)

Abb. 2: Überblick Vuex (Quelle: https://vuex.vuejs.org/en/intro.html)

Die weiteren Möglichkeiten von Vuex müssen gegen die zusätzliche Komplexität, die durch die neu eingeführten Konzepte entstehen kann, abgewogen werden. So ist es durchaus üblich, zunächst ohne Vuex zu starten und es später an den Stellen einzuführen, an denen konkreter Bedarf besteht. Zu diesem Zeitpunkt kann das Team auf seine Erfahrung mit Vue.js aufbauen. Meist wird Vuex für zentrale Datenobjekte einer Anwendung genutzt, wenn diese von mehreren Dialogen verwendet werden. In einer Kundenverwaltung wäre das z. B. der aktuelle Kunde, in einer Auftragsverwaltung der aktuelle Auftrag.

Während Consumer-Anwendungen in der Regel nur wenige Dialogelemente auf einer Seite haben und für gelegentliche Nutzung konzipiert sind, adressieren Unternehmensanwendungen oft Experten, die sich eine Vielzahl von Informationen in einem einzelnen Dialog wünschen. Dies stellt hohe Anforderungen an die Renderperformance des JavaScript-Frameworks und des verwendeten Browsers. Im Performancevergleich schneidet Vue.js gut ab: In den bisherigen Projekten aus meiner Praxis konnte es auch große Planungsübersichten performant darstellen.

Integration mit bestehenden Anwendungen und Bibliotheken

Wenn nicht auf der grünen Wiese entwickelt wird, muss sich die neue Vue.js-Anwendung in bestehende Anwendungen integrieren oder auch vorhandene Bibliotheken nutzen. So kann es notwendig sein, bestehende jQuery-Bibliotheken einzubinden. Teilweise müssen auch mehrere Elemente einer Seite mit Vue.js angesteuert werden. Beides ist mit Vue.js möglich, bei Letzterem hilft die Erweiterung portal-vue.

Einen Mitarbeiter eines Unternehmens möchte man in der Regel nur einmal für alle Anwendungen anmelden. Dafür sorgt ein Single-sign-on-(SSO-)Service. Im Unternehmenskontext muss sich der Anwender üblicherweise immer anmelden, bevor er die Anwendung benutzen kann. Daher kann die Initialisierung von SSO vor der Vue. js-Anwendung erfolgen. Ist der Nutzer noch nicht angemeldet, leitet ihn die SSO auf eine Anmeldeseite weiter. Erst wenn die Anmeldung abgeschlossen ist, wird Vue.js initialisiert. Listing 2 zeigt ein verkürztes Beispiel, das den Single-sign-on-Service JBoss Keycloak verwendet.

// code example for Vue.js-Initialization after single sign on
var keycloak = Keycloak('keycloak.json')
keycloak.init({onLoad: 'login-required'})
  .success(function (authenticated) {
    if (authenticated) {
      console.info('login successful')
      initVue() // implement this function to initialize Vue.js as usual
    } else {
      console.info('not authenticated')
    }
  })

Fazit

Vue.js erfüllt alle Anforderungen, die die Enterprise-Entwicklung stellt:

  • Leichte Erlernbarkeit dank einfacher, aufeinander aufbauender Konzepte und guter Dokumentation
  • Gute Upgradefähigkeit durch ein stabiles API und eine langfristige Releaseplanung
  • State-of-the-Art-Werkzeuge für Entwicklung, Build und Debugging
  • Gute Wartbarkeit durch Single-File Components und automatische Tests
  • Schnelles Rendering auch komplexer Ansichten
  • Skalierbarkeit für größere Anwendungen durch Mixins, Komponentenhierarchien und State-Management mit Vuex

Die Frameworks und Werkzeuge sind erwachsen geworden. Vue.js ist für die professionelle und langlebige Software geeignet. Damit ist es ein guter Kandidat für die Enterprise-Entwicklung, sowohl für die Individual- als auch die Produktentwicklung.

Verwandte Themen:

Geschrieben von
Alexander Schwartz

Alexander Schwartz arbeitet als Principal IT Consultant bei msg. Im Laufe der Zeit arbeitete er mit verschiedensten Server- und Webtechnologien. Auf Konferenzen und bei User Groups spricht er über seine Erfahrungen.

Kommentare

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu: