Wer 2019 mit Hilfe eines JavaScript Frameworks eine moderne Web App entwickeln will, hat im Grunde genommen die Qual der Wahl zwischen den Platzhirschen React, Angular und Vue. In der nun folgenden Gegenüberstellung werde ich die Frameworks Vue vs. Angular aus der Vogelperspektive vorstellen.

Abbildung - Vue vs. Angular : All-in-One Plattform und der Open Source Baukasten

Wozu braucht man JavaScript Frameworks?

In den Anfangszeiten von JavaScript war nicht daran zu denken, komplette Anwendungen damit zu entwickeln. Es war primär ein Gimmick, um im Browser beispielsweise Formulareingaben zu prüfen. Doch mit steigender Popularität der Sprache und dem Siegeszug von Open Source, ist JavaScript das Mittel der Wahl bei der Entwicklung von Webanwendungen.

Zwar können Anwendungen auch ohne Framework entwickelt werden, jedoch wäre dann der Feature-Durchsatz eines Entwicklungsteams auch entsprechend mager. Denn JavaScript Frameworks erlauben es dem Entwickler, sich auf die eigentlichen Use-Cases zu konzentrieren, anstatt bereits gelöste Probleme erneut zu lösen. Gleichzeitig sind aktuelle Frameworks so stark optimiert, dass eine eigene Umsetzung im Rahmen eines regulären Kundenprojektes jeden Kosten- und Zeitrahmen sprengen würde.

Entstehung und Historie

Von AngularJS zu Angular

Angular wurde im September 2016 erstmalig mit der Version 2 als Nachfolger von AngularJS veröffentlicht. Das aktuelle Release 8.0 wurde im Mai 2019 bereitgestellt.

Der Sprung von AngularJS auf Angular war eine komplette Neuentwicklung, um sich von konzeptionellem Ballast aus sechs Jahren AngularJS zu lösen.

Jedoch wurden die Anhänger von AngularJS durch die Neuentwicklung nicht im Regen stehen gelassen. Dafür sorgte ein geordneter Migrationspfad zu Angular 2. Außerdem wurde am 01. Juli 2018 die LTS (Long Term Support) Phase von AngularJS eingeläutet. Seit  diesem Zeitpunkt werden keine Features oder Fixes mehr implementiert, die einen Breaking-Change bedeuten würden. Stattdessen werden nur noch sicherheitskritische Bugs gefixt oder Änderungen vorgenommen, die Aufgrund von Browser- oder jQuery-Releases die Lauffähigkeit von produktiven Anwendungen gefährden würden.

Fun Fact: Gerade bei Angular ist das Wording oft missverständlich. So wurde ein Kollege von mir mal für eine Angular Schulung gebucht, gewünscht war aber AngularJS. Mit Angular sind im Grund genommen alle Versionen ab und inklusive Version 2 gemeint, und Angular 1 ist AngularJS.

Vue

Der Erfinder von Vue.js, Evan You, hat im Jahr 2013 bei Google Creative Labs gearbeitet. Sein damaliger Job drehte sich viel um Prototyping im Browser. Das Mittel zur Wahl war unter anderem AngularJS. Evan You gefielen die Konzepte von AngularJS zu Data-Binding und dem daraus resultierenden Update des DOM. Gleichzeitig wurden ihm durch das Framework andere Konzepte aufgezwungen, die für seine damaligen Anwendungsfälle keine Relevanz hatten.

Daraufhin beschloss Evan You, die für ihn relevanten Anteile zu extrahieren und diese ohne jeglichen Overload in ein eigenes Framework zu implementieren: Vue.js war geboren.

In seiner Freizeit war Evan nun damit beschäftigt, zunächst im Verborgenen an Vue.js zu arbeiten. Im Februar 2014 veröffentlichte er eine erste Version. Nachdem das Projekt immer mehr Zuspruch und Verbreitung fand, entschloss You sich im Februar 2016 dazu, vollständig an Vue.js zu arbeiten. Das letzte Major Release mit der Version 2 fand im September 2016 statt. Das aktuellste Minor Release (Version 2.6.0) wurde im Februar 2019 veröffentlicht.

Abbildung - Evan You Quelle: https://github.com/yyx990803

Bild: Evan You (Quelle: https://github.com/yyx990803)

Team

Aus eigener Erfahrung kann ich berichten, dass es bei der Auswahl des Frameworks für ein neues Projekt zu hitzigen Diskussionen zwischen Entwicklern und Management kommen kann. Zum einen geht es für gewöhnlich um hohe Budgets und zum anderen um die Zukunft eines Produkts oder einer ganzen Firma. Aus diesen Gründen spielt auch das Team oder die Firma sowie die hoffentlich langfristige Wartung eines Framework eine gewichtige Rolle bei der Wahl des Tech-Stacks.

Angular

Die Firma hinter Angular ist keine geringere als Google. Damit verbunden ist also ein großer finanzieller Spielraum und ein entsprechend großes Team.

Neben einer riesigen Entwicklerschaft von Google selbst wird Angular seitens einer großen Open Source Community gepflegt und erweitert. Das Team von Google umfasst laut der About-Page von angular.io ungefähr 40 Mitglieder sowie ausgewählte Open Source Collaborators sowie Google Development Experts.

In der Vergangenheit haben immer wieder einmal wichtige Entwickler wie z.B. Victor Savkin oder Jeff Cross das Angular Team verlassen, um sich neuen Aufgaben zu stellen. Das bemerkenswerte daran ist, das selbst der Weggang von zentralen Entwicklern auf Grund des hohen Bus-Faktors (Kennzahl zur Abschätzung von Projektrisiken) keine negative Auswirkungen hat.

Abbildung - Ein Teil des Teams hinter Angular (Quelle: https://angular.io/about?group=Angular

Ein Teil des Teams hinter Angular (Quelle: https://angular.io/about?group=Angular

Vue

Vue.js wurde von einer Einzelperson (Evan You) ins Leben gerufen, und große Teile des Frameworks wurden über lange Zeit primär von ihm betreut. Deswegen gab es immer wieder einmal Artikel oder Meinungen, dass dies eine reine One Man Show wäre und beim Rückzug von Evan You das Framework keine Zukunft hätte.

Abbildung - Der Contributor Graph von Vue.js auf GitHub (Quelle: https://github.com/vuejs/vue/graphs/contributors)

Der Contributor Graph von Vue.js auf GitHub (Quelle: https://github.com/vuejs/vue/graphs/contributors)

In einem Interview sagt You, dass er im Moment daran arbeite, die Abhängigkeit von seiner Person zu entkoppeln, um auch eine Zukunft des Frameworks ohne ihn zu ermöglichen.

“I personally don’t want to be responsible for everything. I want the project to be able to evolve, even if some day I stop working on it. So part of my work right now is to make that happen” – Evan You

Das Team um Evan You ist mittlerweile enorm gewachsen und hat einige prominente Unterstützer von namhaften Firmen gefunden: Sarah Drasner (Netlify), Natalia Tepluhina (GitLab) oder Pine Wu (Microsoft). Neben dem eigentlichen Core-Team gibt es eine riesige Entwickler-Community, die dem Framework unter die Arme greift. Finanzielle Unterstützung erhält das Vue Team über Funding-Plattformen wie Open Collective oder Patreon.

Releasezyklen

Angular

Angular liefert zuverlässig alle sechs Monate ein neues Major Release und innerhalb dieses Zeitraums ungefähr ein bis drei Minor Versionen. Da auch die Entwickler von Angular keine Glaskugel besitzen, werden ggf. Features oder APIs entfernt oder geändert. Dabei wird eine sehr umstiegsfreundliche Deprecation-Strategie verwendet.

So werden APIs zunächst als deprecated markiert und zeitgleich ein entsprechender Migrationspfad angeboten. Das als deprecated markierte Feature wird aber noch mindestens zwei weitere Major Releases im Framework verbleiben, um einen möglichst sanften Übergang zu ermöglichen. Beispielsweise wurde in Version 4.3 die neue HTTP API @angular/common/http eingeführt und das bestehende Paket @angular/http in Version 5.0 als deprecated markiert, aber erst in Version 8.0 entfernt.

Diese Konstanz und Vorgehensweise erlauben eine recht komfortable Planung von Versionssprüngen und entsprechender Maintenance.

Vue

Die Releases von Vue.js sind nicht wirklich planbar, getreu dem Motto “It’s done when it’s done”. So wurde beispielsweise Version 2.6.0 im Februar 2019 veröffentlicht und Version 2.5.0 im Oktober 2017 sowie 2.4.0 im Juli 2017. Zwischen Minor Versionen können also durchaus Monate oder auch Jahre liegen — wobei sich diese Aussagen nur auf den Vue Core beziehen. Was das bedeutet und wie die Paketstruktur des Frameworks aufgebaut sind, lesen Sie im weiteren Verlauf.

Fun Fact: Da Evan You großer Anime-Fan ist, sind seit Version 2.0.0 alle Major und Minor Releases nach Anime-Titeln benannt. So trug Version 2.0.0 den Codenamen Ghost in the Shell, und das letzte Minor Release 2.6.0 hörte auf den Namen Macross.

Projekt-Setup

Setup und Wartung einer Projektinfrastruktur wie Buildsystem, Unit Tests, statischer Codeanalyse und ggf. Deployment sollten im Idealfall minimalen Aufwand erzeugen. Die Realität und vergangene Projekte (zumindest aus meiner Erfahrung heraus) zeigen, dass die Projektinfrastruktur doch einigermaßen komplex wird und mit fortschreitender Projektlaufzeit zunehmend stiefmütterlich behandelt wird. Darüber hinaus haben Entwickler oft keine Lust, sich stunden- oder gar tagelang um diese Themen zu kümmern. Aus diesem Grund möchte ich explizit das Setup von Projekten mit Vue oder Angular beleuchten.

Angular – Von Boilerplates zur Angular CLI

Als Angular 2 im Jahr 2016 veröffentlicht wurde, hatten Entwickler die Qual der Wahl aus einem Sammelsurium an Boilerplate-Projekten für das Projekt-Setup. Der Nachteil dieses Ansatzes, der in aller Regel auf einem Fork des entsprechenden GitHub Projekts basierte, war die langfristige Wartbarkeit.

Ab Dezember 2015 wurde hinter den Kulissen bereits damit begonnen, die Angular CLI zu entwickeln. Diese basierte anfänglich auf einem Fork der Ember CLI und sparte den Entwicklern des Angular Teams laut eigener Aussage ein komplettes Jahr an Arbeit.

Fun Fact: Die frühen Releases der Angular CLI trugen die Namen von historischen Persönlichkeiten der Informatik. So waren beispielsweises Version 1.1.0 nach Ada Lovelace, 1.3.0 nach Grace Hopper und 1.5.0 nach Alan Turing benannt.

Abbildung - Die Angular CLI Webseite (Quelle: https://cli.angular.io/)

Die Angular CLI Webseite (Quelle: https://cli.angular.io/)

Leistungsumfang des Angular CLI

Die Angular CLI bietet ein breites Spektrum an Funktionen, angefangen mit dem Projekt-Setup inklusive vorkonfigurierten Build (aktuell basierend auf Webpack), Test- sowie Linting-Infrastruktur.

Der größte und langfristige Nutzen der CLI stellen allerdings die Angular Schematics dar. Ein Schematic ist ein template-basierter Generator, der komplexe Logik unterstützt. So werden die mitgelieferten Generation Schematics beispielsweise genutzt, um neue Code-Teile wie Komponenten oder Services zu generieren. Der Komfort dieser Lösung besteht unter anderem darin, dass Abhängigkeiten zu bestehendem Code erkannt und berücksichtigt werden. Außerdem erfolgt die Generierung von neuem Quellcode auf Basis des Angular Styleguides.

Die Angular CLI bietet außerdem die Möglichkeit, eigene Schematics zu erstellen oder bestehende Schematics der Open Source Community zu verwenden. Diese werden dann ggf. mit eigenen CLI Kommandos assoziiert und direkt durch die Angular CLI ausgeführt.

Der Enterprise Ansatz mit NX

Die Firma Nrwl, unter Leitung der Ex-Angular Teammitglieder Victor Savkin und Jeff Cross, hat mit NX ein Toolkit veröffentlicht, dass es erlaubt, auf Basis der Angular CLI ein sogenanntes Mono-Repo zu betreiben.

Der eigentliche Charme dieser Lösung besteht darin, Anwendung(en) in Apps und Libs aufzuteilen. Für diese Apps und Libs können dann Abhängigkeiten definiert werden, z.B. Lib A darf nicht mit Lib B reden.

Dieser Ansatz ist gerade für große, ineinander verwobene Projektlandschaften interessant, da er viele Round-Trips mit NPM Link oder Git Submodules bei ansonsten verteilten Repositories vermeidet. Auf YouTube gibt es ein sehenswertes Video, das NX und dessen Mono-Repo ansatz veranschaulicht.

Vue

Vue CLI

Das Projekt-Setup für Vue.js erfolgt auf komfortable Weise mit der Vue CLI. Hierbei kann zwischen verschiedenen Konfigurationen für Transpiler (Babel oder Typescript), Linting, Codeformatierung oder Framework für Unit-Tests (Jest oder Mocha) gewählt werden. Dabei steht die CLI von Vue der von Angular in Nichts nach. Wer ein neues Projekt nicht über die Kommandozeile sondern lieber mit Hilfe einer formschönen GUI erstellen möchte, kann dies mit der Vue CLI ebenfalls tun.

Abbildung - Die Vue CLI UI (Quelle: https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui)

Die Vue CLI UI (Quelle: https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui)

Ein Vue CLI Projekt kann über Plugins beliebig erweitert werden. Dank einer langen Liste an Plugins kann so eine Anwendung in wenigen Schritten zur Progressive Web App oder Electron-App aufgerüstet werden. Dabei ist zu beachten, dass das entsprechende Setup (beispielsweise für Electron) immer nur einen minimalen Umfang hat und als Startpunkt für individuelle Anpassungen zu verstehen ist.

Einzig die Möglichkeit zur schnellen Generierung neuer Anwendungsteile ist nicht in die Vue CLI integriert. Hierfür können vorhandene Tools wie Hygen verwendet werden, welche aber meiner Erfahrung nach nicht an den Komfort der Angular CLI herankommen.

Boilerplates

Da Vue bezüglich Styleguide und Dateistruktur relativ freizügig ist, gibt es eine Vielzahl von Boilerplate-Projekten zur Verwaltung von Vue-Projekten.

Hierbei lohnt sich ein Blick ins Vue Enterprise Boilerplate von Vue Core Mitglied Chris Fritz, sowie vuesion (ehemals vue-starter). Letzteres ist insofern interessant, da es initial mit einem nahezu 100%igen Lighthouse Score ausgeliefert wird. Lighthouse ist ein Audit-Tool von Google, welches Webseiten/-apps u.a. in den Kategorien Performance, Barrierefreiheit und Best Practices bewertet.

Abbildung - Lighthouse Score von vuesion (Quelle: https://github.com/vuesion/vuesion#lighthouse-score)

Lighthouse Score von vuesion (Quelle: https://github.com/vuesion/vuesion#lighthouse-score)

Ich konnte gute Erfahrung damit sammeln, bei Bedarf bestimmte Lösungsansätze aus Boilerplates in ein Vue-CLI-Projekt zu übertragen.

Aufbau der Frameworks und Ökosystem

Wenn man sich beliebige Enterprise Applikationen oder kommerzielle Webseiten ansieht, sind die Anforderungen an Features doch recht homogen.

Grundsätzlich geht es darum, den Applikations-State über den DOM zu aktualisieren. Darüber hinaus hat eine App in der Regel mehrere Unterseiten, die über Routing verwaltet werden. Die Daten werden für gewöhnlich über HTTP oder Websockets zum Frontend transportiert, und natürlich sollten Formulare nicht fehlen, sowie ein paar Animationen, um den Anwender gekonnt durch die App zu lotsen.

Angular als All in One Framework

Wer sich entschließt, mit Angular eine Applikation zu entwickeln, wird in den allermeisten Fällen auf die mitgelieferten Pakete setzen und dabei nichts vermissen. Angular läuft NPM-seitig im Scope @angular und kapselt die verschiedenen Features in dedizierten Paketen.

Der Kern

Im Paket @angular/core werden alle essentiellen Bausteine ausgeliefert, die es braucht, um eine minimale Applikation zu konstruieren. Enthalten ist beispielsweise die komplette Funktionalität zur Erstellung von Direktiven und Komponenten, Rendering und Event-Handling. Darüber hinaus sind in diesem Paket die Change Detection sowie die ausgefuchste Dependency Injection von Angular zu finden.

Routing

Das Thema Routing wird durch das Package @angular/router abgedeckt. Hierbei gibt es eine Vielzahl von Konfigurations- und Optimierungsmöglichkeiten wie z.B. Lazy Loading (nachladen von Applikations-Teilen zur Laufzeit) oder Route Guards (Beschränkung des Zugriffs auf bestimmte URLs). Das Routing ist so mächtig, dass es dafür sogar ein dediziertes Buch vom (ehemaligen) hauptverantwortlichen Entwickler Victor Savkin gibt.

Formulare

Der Klassiker einer jeden Businessanwendung sind sicherlich Formulare. Angular bietet mit dem Paket @angular/forms zwei Möglichkeiten zur Formularverarbeitung: Mit “Template-driven forms” können Angular-Formulare schnell über das HTML Template definiert und ausgesteuert werden.

Eine zweite und wesentlich mächtigere Art bieten die “Reactive Forms”, welche zunächst über TypeScript definiert und anschließend mit dem HTML Template verknüpft werden.

In beiden Fällen können eine Vielzahl von vordefinierten Validatoren verwendet werden.

HTTP Handling

Zwar ist Server Side Rendering wieder in Mode, doch werden die allermeisten Apps in freier Wildbahn fleißig Daten per HTTP transportieren. Das mitgelieferte Package @angular/common/http liefert den HttpClient, welcher auf Basis von RxJS Observables (wird im Abschnitt Lernkurve erklärt) Daten von A nach B bringt. HTTP Anfragen können beispielsweise im Fehlerfall automatisch wiederholt oder noch nicht abgeschlossene Abfragen bei erneuter Abfrage abgebrochen werden.

Animationen state-basiert steuern

Wer Animationen jenseits von Hover-Effekten realisieren möchte, wird mit dem Animations Paket @angular/animations seine Freude haben. Hierbei lassen sich auch komplexe Animationen state-basiert und wiederverwendbar (da in TypeScript definiert) umsetzen. Unter der Haube setzt Angular dabei auf die Web Animations API (WAAPI) auf, mit welcher sich Animationen im Detail kontrollieren lassen. Bei älteren bzw. nicht unterstützten Browsern wird das WAAPI durch einen Polyfill emuliert.

Das Baukastenprinzip von Vue

Vue bezeichnet sich selbst als “The Progressive JavaScript Framework” und dies trifft beim Blick auf die Paketstruktur sowie das Ökosystem definitiv zu. Denn Vue ist im Grunde genommen das Epizentrum eines unermesslichen Open Source Baukastens und deckt selbst “nur” zentrale Kernbereiche einer modernen WebApp ab.

Evan You’s Schatz

Die ursprüngliche Vision von Evan You war es, ein auf das minimum reduzierte Framework zu erschaffen. Das Paket “vue” enthält deshalb auch nur die absolut notwendige Unterwäsche zur Entwicklung einer Webanwendung.

Geliefert wird unter anderem die Möglichkeit zur Definition von Komponenten, Rendering sowie Event-Handling. Darüber hinaus ist die sogenannte Reactivity enthalten, welche mittels eines Virtual DOMs dafür sorgt, dass immer der aktuelle State im Browser angezeigt wird.

Fun Fact: Evan You ist für mehr als 2,000 von 3,000 Commits des Vue (Core) verantwortlich.

Routing

Zwar stehen beim Thema Routing eine Handvoll Pakete zur Auswahl, in der Regel wird die Wahl aber auf den offiziellen Router für Vue, den “vue-router”, fallen. Dieses Paket wurde ursprünglich von Evan You erstellt, wird mittlerweile aber von verschiedenen Mitgliedern des Vue Teams betreut. Beim Thema Funktionsumfang steht der vue-router dem Angular Router in Nichts nach und bietet u.a. Lazy Loading und Navigation Guards (bei Angular Rout Guards genannt).

HTTP

War die Wahl des Pakets beim Routing noch einigermaßen klar, so stehen beim Thema HTTP Abfragen bereits über ein Dutzend Pakete zur Auswahl. Für den recht bekannten HTTP Client Axios stehen zur vereinfachten Integration in Vue-Projekte beispielsweise diverse Wrapper-Pakete zur Verfügung.

Animationen

Out of the box bietet Vue verschiedene Möglichkeiten um Animationen zu realisieren.

Die einfachste Variante stellen CSS Klassen dar, die Vue zu bestimmten Zeitpunkten des Lifecycle an die DOM Knoten von Elementen hängt. Über diese Klassen können dann CSS Transitions definiert werden um z.B. Komponenten mit einem Einfahr-Effekt zu versehen.

Eine komplexere Variante stellt die Verwendung von JavaScript Hooks dar. Hierbei können Animationen über JavaScript gesteuert werden. Das kann entweder über eigenen Code oder über die Einbindung von Drittanbieter Bibliotheken wie GSAP oder Velocity.js erfolgen.

Styleguide

Wer nicht gerade als einsamer Wolf sein Dasein als Softwareentwickler fristet, wird sich früher oder später Gedanken über einen Code- oder Projekt-Styleguide machen. Deswegen  dürfen die mitgelieferten Styleguides der beiden Frameworks bei meinem groben Überblick nicht fehlen.

Liebevolle Strenge

Wer keine Lust auf langatmige Diskussionen über das noch so kleinste Detail der Codebase wünscht, wird den Angular Styleguide lieben. Dieser gibt so ziemlich alle Leitplanken vor und lässt wenig Spielraum für eigene Entscheidungen. Dies erlaubt unter anderem ein schnelles Onboarding von neuen Entwickeln, die bereits Angular-Erfahrung mitbringen.

Der Vorteil dieses restriktiven Ansatzes ist ein abgestimmt ineinander greifendes Tooling (Angular CLI mit den Schematics) und der mitgelieferte Codelyzer. Letzterer ist ein Paket zur statischen Codeanalyse auf Basis von TSLint für Angular-basierte Projekte.

Abbildung - Die codelyzer Webseite (Quelle: http://codelyzer.com/)

Die codelyzer Webseite (Quelle: http://codelyzer.com/)

Laissez faire

Ganz im Gegensatz zu Angular gibt der Vue Styleguide in der Regel Empfehlungen zur Verwaltung von Vue.js Projekten. So differenziert der Style Guide zwischen den Prioritäten A (Essential), B (Strongly Recommended), C (Recommended) und D (Use with Caution). Ein Blick in den Styleguide ist in allen Fällen hilfreich, da jede Empfehlung sinnig argumentiert und illustriert ist.

Ein guter Einstieg zur statischen Codeanalyse für Vue Projekte stellt der ESLint Plugin vuejs/eslint-plugin-vue dar, welcher im Grund die Empfehlungen des Vue Styleguides abbildet.

Lernkurve

Bezeichnend für die Lernkurve in Bezug auf Vue vs. Angular sind die zwei Bücher in meinem Regal. So könnte der 1000 seitige Angular Wälzer durchaus zur Selbstverteidigung eingesetzt werden und die schnittige Vue Referenz geht mit zugekniffenen Augen auch noch als Windfächer durch.

Abbildung - Workbooks zu Angular und Vue.js Up&Running

Angular

Ich habe als Coach bereits vielen Entwicklern den Einstieg in Angular ermöglicht und kann sagen, dass selbst gestandene Softwareentwickler rauchende Köpfe bekommen. So ist es bei Angular in der Regel nicht getan, nur die Features des Frameworks zu überblicken und zu verinnerlichen — was auf Grund des riesigen Frameworks und vielen Details viel Zeit kostet.

Außerdem kann eine Angular App nur auf Basis von TypeScript entwickelt werden. So war TypeScript für AngularJS nur eine Art Sidekick, und bei der Neuschreibung von Angular wurde komplett auf TypeScript gesetzt.

Ein weiterer Aspekt ist die integrale Verzahnung von Angular mit RxJS — also Reactive Extensions for JavaScript. Die Portierung der reaktiven Programmierung für JavaScript ist ein elegantes Mittel, um den Datenfluss in Angular Applikationen zu steuern. Aufgrund der vielen hundert Operatoren von RxJS ist es selbst für erfahrene Entwickler oft schwer, den Überblick zu behalten. Abhilfe schafft hier unter anderem RxMarbles als interaktiver Guide der gebräuchlichsten Operatoren. Eine andere hilfreiche Ressource ist der Operator Decision Tree, welcher mit Hilfe eines Wizards den Weg durchs Dickicht der Operatoren weist.

Abbildung - Ein interaktives RxJS Marbles Diagram (Quelle: https://rxmarbles.com/#withLatestFrom)

Ein interaktives RxJS Marbles Diagram (Quelle: https://rxmarbles.com/#withLatestFrom)

Vue

Um mit Vue starten zu können, reichen solide Kenntnisse von HTML/CSS und JavaScript. Mit Vue eine Applikation zu entwickeln ist im ersten Moment erfrischend einfach und intuitiv. Jedoch kann hier der Teufel im Detail, vor allem beim Verdrahten der unterschiedlichen Bibliotheken und Toolings, liegen (ich spreche hier aus eigener Projekterfahrung).

Im Grund genommen genügt es, die offiziellen Vue Docs durchzuarbeiten, um das ABC des Frameworks zu erlernen. Wer dennoch gern einen Neuzugang im Buchregal wünscht, dem kann ich “Vue.js Up & Running” empfehlen.

Einen lesenswerten Artikel zur Einführung in Vue.js hat Vanessa Böhner hier veröffentlicht.

Vue vs. Angular – Fazit

Die gute Nachricht vorweg: mit beiden Frameworks lassen sich komplexe Anwendungen entwickeln. Ich habe mit Angular und Vue.js positive Erfahrungen gemacht, sodass ich beide jederzeit wieder einsetzen würde. Grundsätzlich sollte man in beide Frameworks hineinschnuppern und sich anschließend entscheiden. Im Falle von Angular ist dies leider mit einem gewissen Mehraufwand verbunden.

Aus meiner Erfahrung heraus haben Entwickler mit Java- oder .NET-Background einen schnelleren Zugang zu Angular und TypeScript. Durch das All-in-One Paket von Angular reduziert sich das Setup auf ein Minimum, und das enge Styleguide-Korsett erstickt unnötige Diskussionen frühzeitig.

Auf der anderen Seite konnte ich feststellen, dass Anfänger die Einfachheit und damit verbundene steile Lernkurve von Vue.js schätzen. Gerade die eher offen gehaltenen Vorgaben des Styleguides lassen hierbei viel Spielraum für eigene Projektstrukturen.

Nico Koenig

Nico König
ist Trainer und Consultant für Web-Technologien in Nürnberg. Als Gründer und Geschäftsführer von fullstax unterstützt er Unternehmen durch individuelle Trainings und Software Engineering. In seiner nicht vorhanden Freizeit organisiert Nico unter anderem die FrankenJS und New Devs On The Block.
Nico Koenig

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/