Vue.js mit ASP.net Core - der neue Stack für moderne Web Apps?

Dienstag, 17. April 2018 – Reto Gurtner

Ist Neuer immer besser? Keineswegs! Konstant immer nur das Neuste einzusetzen kann genauso verfänglich sein, wie wenn man immer bei Altbewährtem bleibt. Wenn man wegweisende Softwarelösungen bauen will, gehört das Beurteilen und Einordnen von neuen Trends und Technologien zu einem integralen Bestandteil der Arbeit. Wir lieben, was wir tun. Daher ist die konstante Auseinandersetzung und Weiterbildung zu unseren Themen ein Dürfen und nicht ein Müssen. Neue Konzepte oder Technologien nur in der Theorie und im Labor auszuprobieren, ist uns in der Regel nicht erfolgsversprechend genug. Darum entscheiden wir immer wieder bewusst auch in Kundenprojekten neue Ideen, Konzepte und Technologien zu pilotieren und auf den Prüfstand zu legen. Wie gut das Realisieren von Single-Page Applications mit Vue.js und ASP.net Core funktioniert, haben wir uns in der jüngst realisierten PIM-Lösung versucht zu beweisen. Gerne teilen wir hier unsere Erfahrungen mit euch.  

Single-Page Applications als neuer Standard in der Webentwicklung

Das jüngste Produkt aus dem Hause bambit ist das PIM-System für das digitale Produktionformationsmanagement bei der ebi-pharm ag (siehe PIM-System für Vertriebsunternehmen aus der Schweiz). Obwohl es sich bei dem PIM-System um eine organisationsinterne Businessanwendung handelt, basiert diese Lösung zu 100% auf Webtechnologien: Die PIM-Lösung ist eine reine Web App (auch Webapplikation genannt) und wird von den Mitarbeitern komplett im Browser bedient.

Bild von dem bambit PIM-System mit vue.js

Auch, wenn die Kerntechnologien (HTML, CSS, JavaScript usw.) die gleichen sind wie bei einem B2B Onlineshop oder einer Online-Plattform, sind im Zusammenhang mit Web Apps etwas andere Voraussetzungen zu berücksichtigen. Die Anforderungen an Geschäftsregeln, Sicherheit, Browserkompatibilitäten, Benutzerzahlen, Verfügbarkeiten, Anwendergruppen usw. sind für Business-Webapplikationen anders ausgestaltet, als bei einer Online-Plattform, die von der breiten Öffentlichkeit bedient wird.

Für den Bau von Web Apps hat sich in den vergangen Jahren das Konzept der sogenannten Single-Page Application (kurz SPA) etabliert.

Im Gegensatz zu klassischen Webapplikationen (auch Multi-Page Applikation genannt) besteht eine Single-Page Application nicht aus mehreren einzelnen HTML-Seiten, die verlinkt werden: Single-Page Applications verfügen über ein einzelnes HTML-Dokument, das seine Inhalte dynamisch nachlädt. Die Daten werden dabei typischerweise im Hintergrund von einem Web API konsumiert.

Architektur Single-Page Application mit Web API im Backend

Vorteile des Architekturansatzes Single-Page Application mit Web API im Backend

Der Architekturansatz mittels Single-Page Application und Web API bringt verschiedene erhebliche Vorteile:

  • Auch für grosse Benutzerzahlen: Durch den Aufbau der Benutzeroberfläche im Webbrowser wird die Serverlast drastisch reduziert. Dank der losen Kopplung zwischen der Single-Page Application und dem Backend als Web API können zudem sehr flexible Skalierungsszenarien realisiert werden. Für eine umwerfende Performance und Benutzererlebnis steht so eine super Ausgangslage zur Verfügung.
  • Wiederverwendung: Das Aufteilen der Verantwortlichkeiten zwischen Single-Page Application und Web API ermöglicht, dass die Services des Web API problemlos auch von anderen Konsumenten (z.B. andere Applikationen, Prozessen oder Glieder in der Wertschöpfungskette) verwendet werden können. (Siehe auch Wie Web APIs helfen Wertschöpfungsketten zu verändern)
  • Portabilität (Hybride Web-Apps): Single-Page Applications sind einfach portierbar und können schnell von der reinen Browserapplikation in eine native Mobile Anwendung übersetzt werden. (z.B. via Einbettung in Apache Cordova).
  • Offlinefähigkeit: Oft sind Anwender von Businessapplikationen nicht konstant mit dem Internet verbunden. Zum Beispiel weil Sie vor Ort bei einem Kunden ohne Internetempfang sitzen oder das Hotel auf der Geschäftsreise eine zu langsame Internetleitung anbietet. Single-Page Applications sind fähig auch in einem Offlineszenario zu funktionieren.
  • Klare Aufteilung zwischen Frontend- und Backendentwicklung: Durch das Ziehen von klaren Verantwortungslinien können Entwicklungsarbeiten besser parallelisiert werden. Es ist möglich, dass die Frontendentwickler bereits die Benutzeroberfläche umsetzen und die REST-Endpoints aus dem Web API vorerst mit Prototypen faken. Alternativ kann das Backendentwicklungsteam bereist beginnen die REST-Endpoints zu realisieren ohne, dass die Frontendentwicklung bereits die Arbeit aufnimmt.

Konkreter Technologie-Stack für das PIM-System von bambit

VueJs und ASP.net Core

Web API im Backend - .NET Core mit ASP.net Core und EntityFramework Core

Unsere Projekte basieren grösstenteils auf der Microsoft .NET Technologie. Daher war es naheliegend, dass wir auch in diesem Projekt auf etwas setzen, dass wir bereits aus dem Effeff kennen. Neu war für uns aber der Einsatz von Purem .NET Core (ohne .NET Framework) in einem produktiven Projekt.

.NET Core ist eine Softwareplattform, die komplett Open Source ist (siehe Microsoft .NET Schneller an der Lösung dank Open Source) und hat zudem zum Ziel das klassische Microsoft .NET Framework schrittweise zu erneuern. Für die Realisierung des Web API kam zusätzlich ASP.net Core zum Einsatz. Für den Zugriff auf die Datenbank war die Verwendung von EntityFramework Core das naheliegendste.

Single-Page Applications Framework - Vue.js

Die Auswahl an möglichen Frameworks für die Realisierung von Single-Page Applications (SPA) ist gross. Populäre Varianten sind Angular, Knockout.js oder React. Relativ neu ist Vue.js.

Als wir mit der Realisierung des PIM-Systems begonnen haben, hatten wir uns bewusst der Frage gestellt, ob wir Angular, React oder Vue.js einsetzen wollen. Angular und teilweise auch React war unter unseren Frontend-Entwicklern bekannt. Die Erfahrungen damit waren aber durchzogen. Angular wurde als eher veraltet eingestuft. React verfügt über eine erhebliche Lernkurve. Ohne Vue.js näher zu kennen, hat uns die angebliche Einfachheit auf Anhieb fasziniert. Die Idee, dass eine Benutzeroberfläche in einzelne Komponenten zerlegt wird und diese Komponentendeklarationen (HTML, CSS, JavaScript) in einem einzelnen File zusammengefasst werden können (siehe https://vuejs.org/v2/guide/single-file-components.html) hat uns sehr gut gefallen. Besonders reizvoll war auch, dass Vue.js uns die bestmögliche Flexibilität punkto HTML- und CSS-Aufbau bietet und mit WebPack bereits ein erprobtes und gut dokumentiertes Build-System für unser Frontend zur Verfügung steht.

Wir haben uns daher dazu entschieden Vue.js eine Chance zu geben.

Fazit nach der ersten Projektphase

.net Core, ASP.net Core und EntityFramework Core

Seit unserem ersten Projekt mit ASP.net Core (damals noch unter dem Namen ASP.net 5 bekannt) hat sich einiges getan. Viele Drittframeworks werden mittlerweile auch für .net Core und nicht mehr nur für das .net Framework angeboten. Die Einarbeitung in ASP.net Core war für unsere Backendentwickler sehr schnell vorgenommen. Besonders gut gefällt uns die Leichtigkeit und Flexibilität der ASP.net Core Entwicklung: Die Konzepte hinter dem Middleware-Ansatz ermöglichen sehr flexibel auf den LifeCycle eines HTTP-Requests Einfluss zu nehmen. Generell ist es erfreulich, wie gut das neue Framework von Microsoft dokumentiert ist: Dokumentation öffnen. Einzig EntityFramework Core hinkt dem grossen Bruder (EntityFramework) in gewissen Teilen noch hinterher. Trotzdem ist dieses Setup eine Technologiebasis, die wir gerne für weitere Projekte wieder einsetzen werden.

Vue.js

Könnten wir noch einmal mit dem Projekt beginnen würden wir wieder auf Vue.js setzen.

Die anfängliche Lernkurve, die auch Vue.js mit sich bringt (in unserem Fall ca. 3 Wochen total für einen geübten Frontend-Entwickler) hat sich im Verlauf des Projektes mehrfach ausbezahlt. Als wir Vue.js mal korrekt aufgebaut hatten (passende Grundstruktur, passende Komponentenzerlegung, Routing etc.), haben wir einen unglaublichen Entwickungsspeed aufgenommen. Besonders die Wiederverwendbarkeit von den atomar gehaltenen Komponenten (z.B. Passwortfeld, Dateiupload, AutoComplete etc.), mit dem dazugehörigen HTML, CSS und JavaScript vereint, hat uns nun eine Basis geschaffen, auf der wir sehr schnell geschäftskritische Eingabemasken aufbauen konnten. Die Komponenten sind mittlerweile so weit abstrahiert und dokumentiert, dass auch ein neuer Entwickler sehr schnell in das Projekt eingeführt werden kann. Der berühmte Copy-and-Paste-Effekt kommt dank der Komponentisierung schnell zum Tragen. Würden wir das Frontend des PIM-Systems noch einmal mit Vue.js bauen? Unsere Antwort ist über das ganze Projektteam hinweg klar: JA!

vue.js und spa Experten aus Bern

Auf der Suche nach Vue.js und Single-Page Application Experten?

hier mehr erfahren