React vs. Vue

Schon seit längerer Zeit hat sich React bereits in der JavaScript Frontend Welt etabliert und ist eine der meistgenutzten Librarys. Doch der Thron wackelt, denn eine weitere Library kämpft sich den Weg nach oben, nämlich Vue. React vs. Vue, welche Frontend Library ist besser?

Wie leicht ist der Einstieg?

React

React bietet auf der eigenen Website ein eigenes Einstiegstutorial an. Dieses leitet den Nutzer Schritt für Schritt durch die Erstellung eines beispielhaften Tic-Tact-Toe Spiels. Zusätzlich findet man dort eine umfassende Dokumentation mit allen Kernkonzepten. Aber auch die externen Angebote sind nicht zu verachten. Durch die mittlerweile sehr große Community lassen sich im Web unzählige Tutorials und Boilerplate Projekte finden.

Für die ganz faulen bzw. unerfahrenen gibt es das Projekt create-react-app. Diese Projektvorlage bindet eine Menge zusätzliche Pakete mit ein, ohne diese dem Nutzer im ersten Schritt sichtbar zu machen. Es funktioniert also wie eine Art Blackbox und überfordert den Nutzer nicht mit unnötigen Konfigurationen. Mehr Komfort findet man selten.

Vue

Auch Vue bietet einen Einsteigerguide inklusive Dokumentation auf der eigenen Website. Dieser ist recht übersichtlich gestaltet und man findet schnell alles was man wissen muss. Die Community ist zwar nicht ganz so riesig wie bei React, aber sie wächst stetig. Auch hier findet man schon viele Community Projekte als Einstiegshilfe.

Von offizieller Seite gibt es zwar kein Boilerplate Projekt, jedoch wird ein Vue CLI angeboten, mit dem sich Projekt-Skelette ganz einfach generieren lassen. Dafür kann man sich sein Projekt nach Belieben zusammenstellen und aus verschiedenen Paketen auswählen.

Komponenten vs. Templates

React

Reacts Dateieinheit ist die Komponente. Im Kern ist eine Komponente ein in sich geschlossenes Objekt, das seine eigenen Funktionen und Zustände hat, die von außen nicht zugänglich sind. Zur Anzeige wird die JSX-Syntax empfohlen, die stark an das herkömmliche HTML angelehnt ist. Innerhalb des JSX können JavaScript Zeilen eingebaut werden, die dem Funktionsaufruf oder dem „Conditional Rendering“ dienen.

Der Zustand einer Komponente wird in einem State festgehalten. Dieser ist immutable, was bedeutet, dass dieser nicht verändert werden kann. Bei Änderungen wird ein neues Zustandsobjekt erstellt, welches das vorherige ersetzt. Dadurch wird an den entsprechenden Stellen im JSX ein Neu-Rendern angestoßen. Allerdings werden hier nur die betroffenen Stellen ausgetauscht und nicht die gesamte Komponente.

Zusätzlich hat man die Möglichkeit den Lifecycle einer Komponente zu nutzen und sich hier in bestimmten Situation einzuhaken. z.B. Kann eine Zustandsänderung bewirkt werden, wenn die Komponente gemounted wird.

Vue

Vue arbeitet mit Template Dateien. Diese sind in drei Teile aufgeteilt: <template>, <script> und <style>. Im <template> Teil kann HTML Code zur Darstellung geschrieben werden. Das HTML wird durch Vue um Direktiven erweitert, die als Attribute an die Tags gehangen werden. Diese Direktiven ermöglichen das Einfügen von Bedingungen, Schleifen und Event-Handlern, sodass auch hier ein „Conditional Rendering“ möglich ist.

Im <script> Tag befindet sich ein einfaches JavaScript Objekt, welches Variablen, Funktionen und vieles mehr zur Verfügung stellt. Dieses Objekt kann nach belieben im Template eingesetzt werden. Funktionen können in Event-Handlern oder einfach zur Ausgabe genutzt werden. Die Variablen dienen zum einen der Ausgabe, zum anderen können sie aber auch als Model für Eingabefelder Verwendung finden. Vue bietet dafür eine Zweiwegebindung an, ähnlich wie man es aus Angular kennt. Ein Lifecycle ist hier nicht so umfangreich nutzbar, wie bei React. Durch die mounted() Funktion lassen sich aber die meisten Fälle abdecken, in denen man als Entwickler einhaken muss.

Das <style> Tag stellt einen Bereich für CSS zur Verfügung. Je nach Vorliebe des Entwicklers kann dieser Bereich zum stylen genutzt werden, aber auch der Einsatz von CSS Dateien ist ohne weiteres möglich.

Wer hat die bessere Performance?

React

Durch das Konzept des Virtuellen Doms ist React ganz vorne mit dabei in Sachen Renderperformance. Durch State-Änderungen sind DOM Manipulationen sofort ohne Wartezeit sichtbar, egal wie groß die Anwendung bereits ist. Serverseitiges Rendering (SSR) wird als Funktionalität mit angeboten, muss aber noch separat auf dem Server eingerichtet werden.

Vue

Obwohl React fast unschlagbar bei der Geschwindigkeit ist, ist Vue noch einen Tick schneller. Dadurch, dass der Core im Prinzip nur die Funktionen für die Zweiwegebindung und die Reaktivität zur Verfügung stellt, hat er eine sehr kleine Dateigröße. Dadurch fällt die initiale Ladezeit geringer aus. Beim Rendern selbst fällt kein Unterschied zu React auf. Auch hier werden die Änderungen, unabhängig von der Projektgröße, direkt angezeigt.

Persönlicher Eindruck

Ich habe nun einige Projekte sowohl in React, als auch in Vue umgesetzt. Objektiv betrachtet fiel die Entwicklungszeit mit Vue wesentlich geringer aus, als mit React. Das lag vor allem an dem einfachen Aufbau und der Handhabung der Variablen. Die Zweiwegebindung hilft an vielen Stellen extrem weiter. Es hat sich insgesamt mehr wie ein vollständiges System angefühlt, während ich bei React immer wieder das Gefühl hatte an einem Flickenteppich zu arbeiten. In vielen Fällen brauchte ich für React zusätzliche Pakete, die untereinander nicht immer kompatibel waren.

Das Konzept von Redux hat mir immer sehr gut im Einsatz mit React gefallen. Doch auch hier konnte Vue mit dem Paket Vuex nachziehen, welches ganz ähnlich funktioniert. Aber auch hier gab es wesentlich weniger Schreibarbeit, als bei Redux.

Als wäre das noch nicht genug, kann Vue mit einer exzelenten Style-Library glänzen, nämlich Vuetify. Dieses implementiert die Konzepte von Googles Material Design in einer solch komfortablen Weise, dass es sich anfühlt, als würde es out of the Box zu Vue dazu gehören.

Eine Sache, die mich an Vue stört ist jedoch der nicht so umfangreiche Lifecycle. Bei React hatte man hier die volle Kontrolle was wann passiert. Bei Vue ist man da auf die mounted() Funktion beschränkt. Vuex bietet da als Ergänzung aber eine „watch“ Funktion, die Funktionen bei Änderungen im Store triggern kann, was eine große Hilfe ist.

Fazit

Man hat es vielleicht schon herausgelesen, aber ich bin mittlerweile ein großer Vue Fan. Die Entwicklung von Single Page Applications war für mich noch nie so einfach. Schauen wir mal, ob React da mit zukünftigen Updates nachziehen kann.

Wenn ihr Interesse an einer Projektumsetzung mit Vue habt, dann schaut doch mal bei unseren Leistungen vorbei.