Es gibt sie in großer Auswahl und es werden immer mehr: Javascript Frameworks, die es dir ermöglichen, stabile und leistungsfähige Webapplikationen zu bauen. Manche Frameworks funktionieren ähnlich, sehen aber komplett verschieden aus, andere gleichen sich, aber pflegen unterschiedliche Prinzipien. Einen eigenen Stil haben sie alle. Entsprechend gibt es bei den Entwicklern unterschiedliche Vorlieben. Was ist das Framework deines Vertrauens? In diesem Artikel werden wir Ember.js und Vue.js auf den Grund gehen und dabei vergleichen, was sich für welche Art von Projekt besser eignet.

‍

Ember.js

Ember ist ein Elefant. Es feiert dieses Jahr seinen zehnjährigen Geburtstag und ist damit älter als manch seiner Zeitgenossen wie React oder Angular. Für einen Elefanten zugegeben recht jung. Aber Ember ist auch groß. Und schwer. Vielleicht ist es nicht sehr wendig, aber es bietet dir für jedes Problem eigenständige Ansätze mit vielzähligen internen Werkzeugen. Dabei ist Ember in seiner beständigen Art, Dinge zu lösen, sehr zuverlässig.

Ein bisschen mehr zu Ember und seiner Funktionsweise erfährst du jetzt.

Ember basiert auf dem Model-View-View-Model Prinzip (MVVM). MVVM ist eine Variante des Model-View-Controller Prinzips (MVC), wo die Benutzeroberfläche ihre eigene Logik hat. Funktionen für die Interaktion mit der Webapplikation werden im ViewModel bereitgestellt. Per Datenbindung an die Inhalte, die aus dem Model kommen, wird das Model regelmäßig neu berechnet und diese Änderungen an die View weitergegeben. Mit diesem Prinzip kannst du die View leichter austauschen und die Benutzeroberfläche unabhängig von der View testen. 

‍

‍

‍

‍

Embers Ausstattung ist breit. Jedes Projekt ist in Components, Controllers, Models, Routes, Templates und CSS gegliedert. Über definierte Konsolen-Eingaben kannst du diese Teile so generieren, dass sie automatisch in einer für Ember verständlichen Ordner-Struktur im Projekt auftauchen. Es ist wichtig, dass du dich in der Architektur des Frameworks zurecht findest, denn dann kannst du die Komponenten nach deinem Wunsch miteinander interagieren lassen, um zum Ziel zu kommen. Für die, die sich außerhalb der Standard Funktionen verwirklichen wollen, bietet Ember die Möglichkeit, sich eigene Helper, Services, Mixins und weitere zu definieren. 

Was Ember nun so schwer macht, ist der riesige Overhead, der bei jedem einzelnen dieser Elemente mitkommt. Erzeugt man eine neue Komponente, erbt man dabei von einem bestehenden Ember-Objekt. Alle Bestandteile sind sozusagen in Ember Objekte eingepackt und diese auszupacken kostet Zeit und Energie, was sich ein bisschen in der Performanz zeigt.  

‍

Vue.js

Vue ist das schlanke Gegenstück dazu. Es ist schnell und leicht und modern. Seine Flexibilität kennt kaum Grenzen, aber dafür ist man dabei auch mehr auf sich selbst angewiesen. Die Funktionen und Zusammenhänge, die du brauchst, musst du dir selbst zusammenbauen. 

Vue verwendet den Virtual DOM. Ein DOM ist ein Document Object Model und meint damit eine Repräsentation der Website, also die Baumstruktur, die sich aus dem HTML-Konstrukt ergibt. Äste repräsentieren die Beziehungen untereinander und die HTML-Elemente werden als die Knoten des Baumes dargestellt. Der virtuelle DOM ist nun sozusagen eine Kopie des eigentlichen DOMs, aber viel kleiner und mit weniger detaillierten Informationen. Änderungen werden zuerst am virtuellen DOM vorgenommen und dann wird der richtige DOM benachrichtigt. Die beiden werden auf Unterschiede verglichen und der tatsächliche DOM wird erst dann in einem Schritt angepasst. Damit umgeht man, dass sich die Seite zu oft neu aufbaut und damit der gesamte Update-Prozess extrem lang dauert. 

‍

Im Gegensatz zu Ember hält Vue keine starren Architektur-Vorschriften für dich bereit. Du benutzt Javascript, Html und CSS. Wie auch bei Ember ist es hier so gedacht, dass du deine Applikation in einzelne Bestandteile zerlegst, die du gesondert voneinander hegen und pflegen kannst. Alles was man dafür braucht, ist eine Javascript-Datei, in der man den Komponenten definiert. Dazugehörige Daten und Funktionen und sogar die Erscheinungsweise können einfach ohne großen Schnickschnack dort festgelegt werden und Vue versteht, was es mit den Informationen machen muss. Im Normalfall hast du eine übergeordnete HTML-Datei, in der du die definierten Komponenten in den bekannten Tags aufrufen kannst.

Will man seine HTML Struktur mit ein bisschen mehr Logik versehen, bietet Vue dafür genügend Attribute, die man seinen Tags mitgeben kann, um dort beispielsweise Konditionen oder Schleifen aufzurufen. Desweiteren bietet Vue eine vollautomatische Berechnung von sogenannten computed Eigenschaften, deren Abhängigkeiten in Ember hingegen erst manuell deklariert werden müssen.

“Fehlende Flexibilität”, wie es bei Ember zutrifft, klingt zwar erstmal negativ, aber hat den ganz starken Vorteil, dass deine Webseite das machen wird, was sie soll. Wer sich an Embers Regeln hält, wird ein stabiles Ergebnis erzeugen. Deshalb benutzen vor allem Firmen wie Netflix, LinkedIn oder Microsoft Ember für umfangreiche Projekte. Embers Community wächst langsam, denn dieses Framework komplett kennenzulernen dauert eine gewisse Zeit. Vue hingegen ist schnell verständlich und eignet sich sehr gut für kleine Projekte.

‍

Fazit

Wie du schon siehst, haben Ember und Vue einen recht unterschiedlichen Charakter. Je nach deinen eigenen Vorlieben wirst du dich bei Ember aufgehobener oder bei Vue freier fühlen. Begleitet wird man bei beiden sehr gut mit hilfreichen Dokumentationen. Probiers doch mal aus!