Welches JavaScript-Framework ist im Jahre 2020 das Richtige für Sie? Angular vs. Vue vs. React vs. Preact vs. Ember vs. Svelte

Web Entwicklung • PUBLISHED ON März 8, 2019 | MODIFIED ON November 6, 2020

Author

Web Development Team

Share on TwitterShare on FacebookShare on LinkedInShare on Email

Angular, Vue, React, Ember, Preact und Svelte haben alle ihre Stärken, aber was ist für Ihr nächstes Webentwicklungsprojekt am besten geeignet

Angular, Vue und Ember sind Beispiele für JS-Frameworks. Svelte, der neue Marktteilnehmer, wird dagegen als „Komponenten-Framework“ bezeichnet. Wir werden später genauer darauf eingehen, was dies tatsächlich bedeutet.

• Angular
• Ember JS
• Vue.js

Wann sollte man eine JavaScript-Bibliothek und wann ein -Framework für ein Entwicklungsprojekt auswählen?

Es gibt kein Richtig oder Falsch auf die Frage, wann eine JavaScript-Bibliothek und wann ein -Framework für ein bestimmtes Projekt ausgewählt werden sollte. Als Faustregel lässt sich jedoch festhalten, dass wenn die geschäftlichen und technischen Anforderungen es zulassen und man bereit ist, die Limitierungen des Frameworks zu akzeptieren, die Verwendung eines JS-Frameworks durchaus sinnvoll sein kann, um hierdurch eine höhere Ressourceneffizienz zu erzielen.

Wer jedoch mehr Kontrolle und Flexibilität wünscht und hierfür bereit ist, mehr Zeit mit der Entwicklung der App zu verbringen, für den könnte eine Bibliothek unter den gegebenen Umständen möglicherweise sinnvoller sein.

Angular, Vue.js, React, Preact, Ember, Svelte: Welches JavaScript-Framework ist 2020 am beliebtesten und warum?

Jeder, der sich in den kommenden Monaten an ein Webentwicklungsprojekt setzt, wird sich mit ziemlicher Sicherheit zwischen React, Angular, Vue.js, Ember, Svelte oder Preact entscheiden. Wir haben uns bereits mit der sehr vagen Frage befasst, wann man sich für eine JavaScript-Bibliothek wie React oder Preact entscheiden und wann man eher ein Framework wie Angular, Vue, Ember oder Svelte wählen sollte.

Im Folgenden werden wir uns die Stärken und Schwächen der einzelnen Optionen ein wenig genauer anschauen. Als Einführung ein kurzer Einblick in die derzeitigen Markttrends.

Kenntnisse und Meinungen der Entwickler über die Top 6 JavaScript-Frameworks und -Bibliotheken

Es gibt natürlich weitaus mehr Open-Source-JavaScript-Frameworks und -Bibliotheken als nur die sechs, auf die wir uns im folgenden Abschnitt konzentrieren. Backbone und Mithril wären hier beispielsweise zu nennen, die beide eine aktive und engagierte Anhängerschaft aufweisen können. Es ist jedoch sinnvoll, unsere Aufmerksamkeit lediglich auf diejenigen Frameworks und Bibliotheken zu lenken, die im „State of JavaScript-Bericht“ behandelt werden. Der Mangel an Entwicklern mit Fachkenntnissen in kleineren Frameworks und Bibliotheken macht es für Unternehmen unwahrscheinlich, diese zu verwenden.

Das folgende Bild zeigt den Bekanntheitsgrad der wichtigsten Frameworks und Bibliotheken bei Tausenden von internationalen JS-Entwicklern auf der ganzen Welt, die zum SoJS 2019-Bericht beigetragen haben. Hier zeigt sich deutlich, wie Ember in den letzten Jahren an Popularität eingebüßt hat und dass Vue.js an dessen Stelle getreten ist. Das Bild zeigt ebenfalls, dass Preact und Svelte, wie damals bereits Vue, schnell in die Szene eingestiegen sind und einen gewaltigen Einfluss auf die JS-Landschaft hatten.

Die nächste Grafik veranschaulicht die Meinung der Entwickler gegenüber den sechs verschiedenen JavaScript-Frameworks und -Bibliotheken, was ein wichtiger Hinweis darauf sein könnte, wie die Entwicklung in den nächsten Jahren voranschreiten könnte.

So zeigt sich zum Beispiel, dass React nicht nur sehr weit verbreitet ist, da fast 80% der JS-Entwickler hiermit programmiert haben, sondern dass die Zufriedenheit ebenfalls überaus hoch ist. Hierauf folgt Angular, wobei über 60% der JS-Entwickler das Framework verwendet haben.

Trotz der Beliebtheit von Angular unter den Geldgebern und Managern von Entwicklungsprojekten, zeigen die Entwickler selbst wenig Begeisterung. Von rund 58% der Entwickler, die Angular verwendet haben, geben fast zwei Drittel an, dass sie dies lieber nicht noch einmal tun würden.

Ihre Skepsis hat offensichtlich auch andere davon abgehalten, Erfahrungen mit Angular zu sammeln. Die Anzahl derer, die es noch nicht benutzt haben und die es in Zukunft auch nicht benutzen möchten, ist mehr als dreimal so hoch wie die Zahl derer, die Angular noch nicht benutzt haben, es aber erlernen möchten.

Die Zahlen stehen im starken Gegensatz zu Vue.js. Eine niedrigere, aber immer noch relativ hohe Anzahl von rund 45% der JS-Entwickler hat Vue bereits verwendet. Die meisten, die dies getan haben, stehen dem Framework positiv gegenüber und möchten es auch weiterhin verwenden. Von denen, die Vue.js noch nicht verwendet haben, möchten in Zukunft fast zweimal mehr Entwickler das Framework nutzen, als die, die hieran nicht interessiert sind.

Fast 10% der JavaScript-Entwickler haben noch nie von Ember gehört, was die Abnahme der Popularität und Relevanz bestätigt. Von den 12% der JS-Entwickler, die Ember tatsächlich verwendet haben, würde ein sehr kleiner Prozentsatz dies gerne noch einmal tun. Eine große Mehrheit von über 80% dagegen möchte in Zukunft nicht mehr mit Ember arbeiten. Und eine große Mehrheit der Entwickler, die von Ember gehört, es aber noch nie verwendet haben, sind auch nicht daran interessiert.

Bei den beiden jüngsten Marktteilnehmern ist die Meinung zu Svelte am positivsten. Nur ein winziger Prozentsatz von rund 7% der JavaScripts-Entwickler gibt an, dass sie Svelte nicht noch einmal verwenden würden. Der Rest steht dem neuen Framework positiv gegenüber. Von denen, die Svelte noch nicht benutzt, aber davon gehört haben, sind zweimal mehr daran interessiert, es in Zukunft zu nutzen. Hier ist davon auszugehen, dass der positive Ruf des Frameworks das Interesse vieler Entwickler geweckt hat.

Etwa das Gleiche gilt für Preact, mit Ausnahme derjenigen Entwickler, die die Bibliothek überhaupt noch nicht genutzt haben. Im Vergleich zum Hype um Svelte sind weniger Entwickler daran interessiert, Preact in Zukunft zu nutzen.

Nachfrage nach Entwicklern für Angular, Vue.js, React, Preact, Ember und Svelte im Jahre 2020

Proaktive JavaScript-Entwickler erforschen und lernen häufig neue Frameworks und Bibliotheken in ihrer Freizeit und verwenden diese in persönlichen Projekten. Der Übergang von einer Nischenerscheinung zum Mainstream bedeutet jedoch, dass Unternehmen und Organisationen das Framework oder die Bibliothek bei der Entwicklung neuer Anwendungen verwenden müssen.

Dies ist die ultimative Bewährungsprobe. Suchen Arbeitgeber nach Entwicklern von Svelte oder Preact? Gibt es auf dem Arbeitsmarkt überhaupt noch Nachfrage nach Ember-Fähigkeiten? Diesen Fragen gehen wir im Folgenden nach.

Anzahl der auf StackOverFlow ausgeschriebenen offenen Stellen für Angular, Vue.js, React, Preact, Ember und Svelte – August 2020

Anzahl der auf LinkedIn ausgeschriebenen offenen Stellen für Angular, Vue.js, React, Preact, Ember und Svelte – August 2020

Die Zahlen sprechen für sich. JavaScript-Entwickler sind international begehrt. Im Jahre 2020 werden aber nur 3 JS-Frameworks und -Bibliotheken verwendet – React, Angular und Vue.js.

Es gibt immer noch eine sehr begrenzte Nachfrage nach Entwicklern mit Erfahrung in Ember. Trotz des Interesses und der positiven Stimmung der JavaScript-Entwickler stellen Arbeitgeber keine Svelte- oder Preact-Entwickler ein – zumindest nicht in statistisch relevanten Zahlen.

Sobald der Bericht zum Stand von JavaScript des Jahres 2020 veröffentlicht wird, wird man sehen, ob die beiden neuen Marktteilnehmer zwischen 2019 und 2020 an Branchen- und Anhänger-Traktion verloren haben. Vielleicht stehen Svelte und Preact aber auch grade erst am Anfang. Vielleicht haben sie noch einen weiten Weg vor sich, bevor sie bei Projektsponsoren mit Blick auf die Zukunftssicherheit genug Vertrauen gewinnen können, um von Unternehmen und Organisationen übernommen zu werden.

Vergleich der Stärken und Schwächen von Angular, Vue.js, React, Preact, Ember und Svelte

Die Statistiken deuten ganz klar darauf hin, dass sich fast alle neuen Web- und App-Entwicklungsprojekte, die JavaScript verwenden, im Jahre 2020 zwischen React, Angular und Vue.js entscheiden werden – alles großartige Bibliotheken und Frameworks. Die anderen 3 haben ebenfalls alle ihre Vorzüge, werden jedoch im großen Ganzen noch nicht als wirtschaftlich tragfähig angesehen.

Dies kann wahrscheinlich auf Bedenken hinsichtlich Support und der Entwicklung der OS-Community für Ember, Svelte und Preact zurückgeführt werden. Die Tatsache, dass nicht genügend Entwickler über die Fähigkeiten und die Erfahrung verfügen, um eine nachhaltige Rekrutierung zu gewährleisten, trägt ebenfalls ihren Teil hierzu bei.

Abgesehen von strategischen und geschäftlichen Überlegungen – was sind die eigentlichen technischen Stärken und Schwächen unserer sechs führenden JavaScript-Frameworks und -Bibliotheken?

Angular

Angular ist ein JavaScript-Framework, das auf TypeScript und der zweiten großen Iteration des Frameworks basiert, welches AngularJS seit seiner Veröffentlichung im Jahr 2016 auslaufen lässt. Als AngularJS im Jahre 2010 erstmals von Google veröffentlicht wurde, sorgte es als eines der ersten auf JS-basierten Front-End-Frameworks für Aufsehen.

Die 2013 von Facebook veröffentlichte React-Bibliothek, ein flexibleres Framework, machte auf die Einschränkungen von AngularJS aufmerksam, woraufhin sich Entwickler mehr und mehr von AngularJS entfernten.

Ein gutes Beispiel dafür, warum ein gesundes JavaScript-Ökosystem von Konkurrenz und rivalisierenden Tools und Standards angetrieben wird, gab Google bei der Veröffentlichung von React, indem der Konzern als Antwort hierauf ein neues SPA-Framework (Single-Page-Application) erstellte, das unter dem Namen „Angular“ veröffentlicht wurde.

Alle Angular-Versionen bis 1.x sind AngularJS, und alle Versionen ab 2.x sind Angular. Im Gegensatz zu JS-Bibliotheken wie React ist Angular ein End-to-End-Framework, das alle Hauptkomponenten bietet, die zum Erstellen einer Web-App für Unternehmen erforderlich sind.

Die Einschränkungen, die Angulars rigoroser Struktur beiwohnen, aber dennoch auch als dessen Stärke betrachtet werden können, haben letztendlich dazu geführt, dass React in den letzten Jahren an Popularität auf Kosten Angulars dazugewonnen hat. Viele Entwickler behaupten, dass Vue.js das überlegenere Framework darstellt. Vue.js wurde von Ex-Googler Evan You mit dem Ziel entwickelt, die nach seiner Meinung vorhandenen Schwachstellen von Angular auszubessern.

Wenn man sich noch einmal die Grafik über die Meinung der Entwickler zu JavaScript vor Augen hält, wird dies offensichtlich. Angular ist jedoch bei Unternehmen nach wie vor beliebt, da es durch die Unterstützung von Google als zukunftssicher gilt. Und letztendlich ist das Framework immer noch eine verlässliche Option, die bei weitem nicht als schwaches Werkzeug betrachtet werden kann.

Der K & C-Entwickler Alex Chugaev macht deutlich, warum er für Anwendungen auf Unternehmensebene Angular gegenüber React und Vue bevorzugt. Angular habe sich als zuverlässig bewährt und wird auch in den kommenden Jahren nach wie vor eine wichtige JavaScript-Ressource sein.

Dieses Video von Fireship vergleicht die Stärken und Schwächen von Angular, React und Vue.js und spricht sich für Angular aus. Es bietet ebenfalls eine sehr wertvolle kritische Analyse über den Datensatz, der im State of JavaScript-Bericht 2019 verwendet wurde.

Die Stärken von Angular

• Modularität;
• Die Verwendung von Komponenten und Modulen;
• Die Verwendung von Abhängigkeitsinjektionen (Dependency Injections);
• Es gibt viele sofort verwendbare Vorteile, wie Router, Formularvalidierung, HttpClient, u.v.m.;
• Ein hohes Maß an Kontrolle;
• Im Gegensatz zu React ermöglicht Angular die normale Verwendung von HTML und CSS mit all ihren Funktionen und Vorteilen;
• Angular CLI ist eines der besten Kommandozeilen-Tools in der JavaScript-Landschaft;
• Durch TypeScript und die Trennung des Templates von Styling und Business Logic eignet sich die Angular-Entwicklung besonders für eine großangelegte Codebasis von Apps für Unternehmen.
• Integrierte Funktionen wie die DOM-Sanitation machen Angular zum sichersten Front-End-Framework.
• Die Unterstützung von Angular durch Google entspricht möglicherweise nicht ganz den Ressourcen, mit denen Facebook React unterstützt; diese sind jedoch mehr als ausreichend, um sicherzustellen, dass das Framework zukunftssicher ist und auch weiterhin auf dem neuesten Stand bleibt. Neuere Ergänzungen wie Lazy Loading und Differential Loading zur Verbesserung der Ladezeit von Modulen sowie Angular 9s neue Rendering-Engine Ivy zur Verbesserung der Startzeit, der Reaktionszeit und zur Reduzierung der Bundle-Größe sind weitere Pluspunkte.

Die Schwächen von Angular

• Für unerfahrene Entwickler kann es sich als ein wenig schwierig erweisen, mit Angular zu arbeiten, insbesondere wenn sie keinen starken Hintergrund in TypeScript haben. Für weniger erfahrene Personen ist die Nutzung jedoch immer noch einfacher verglichen mit React.
• Bisher unterscheidet sich jede neue Version erheblich von der vorherigen, was zu Misstrauen führt und eine vorausschauende Migrationen von Apps auf die neueste Version von Angular erschwert. Dies ist insbesondere zwischen AngularJS und Angular der Fall, zwischen denen nicht direkt gewechselt werden kann.
• Abhängigkeitsinjektionen können zeitaufwändig sein und die Erstellung von Abhängigkeiten für Komponenten ist ebenfalls nicht einfach.
• Ein Entwickler ist eingeschränkt, wenn er eine Single-Page-Application erstellen möchte. Es ist nicht möglich, diese einfach in die Full-Stack- oder in eine Multi-Page-Application abzulegen.
• Angular ist ein Schwergewicht. Mit mehr als 500 KB ist es im Allgemeinen keine optimale Wahl für kleinere Anwendungen.

React

React ist eine JavaScript-Bibliothek für die UI-Entwicklung, obwohl sie der Einfachheit halber häufig auch als Framework bezeichnet wird. Facebook hat ursprünglich React erstellt und übernimmt ebenfalls die Verwaltung, was der Bibliothek viel Glaubwürdigkeit verleiht. Uber, Netflix, PayPal, Airbnb, Twitter, Walmart und viele andere „Giganten“ verwenden React, was sich besonders als ein probates Medium für größere und mittelgroße Projekte anbietet.

React ist ein komponentenbasiertes Webframework mit einseitigem Datenfluss. Es hat einen großen Einfluss auf die Front-End-Webentwicklung und ist 2020 das dominierende Framework bzw. die Bibliothek, die für JS-Anwendungen verwendet wird. React kann die Einführung von Konzepten wie funktionale und deklarative Programmierung sowie immutable state zugeschrieben werden, die in der Front-End-Entwicklung bis dato nicht üblich waren. Der andere große Erfolg von React ist die Einführung des virtuellen DOMs, das maßgeblich zur Verbesserung der Benutzererfahrung und der App-Leistung beigetragen hat.

Die Stärken von React

• Die Optimierung erfordert keinen großen Aufwand.
• Flexibilität. React ist zusammen mit React-Core eine komponentenbasierte Bibliothek für die View-Layer, die eine nahezu vollständige Flexibilität und Anpassung der Apps bietet.
• Die Flexibilität von React zeigt sich auch darin, dass es nur wenige Barrieren für die Interaktion mit verschiedenen Bibliotheken und Projekten gibt.
• Die Bibliothek wird ihrem Slogan „Learn Once, Write Anywhere“ durchaus gerecht und kann zur Entwicklung von Web-, Mobil- (React Native) und Desktopanwendungen (Electron) sowie zur Back-End-Entwicklung mit Node.js verwendet werden.
• React verwendet JavaScript ES6, das im Vergleich zu TypeScript für Angular eine nicht allzu steile Lernkurve aufweist.
• React wurde entwickelt, um Inhalte basierend auf JSX zu rendern. Es kann sowohl in SPA- als auch in SSR-Architekturen zum Einsatz kommen, was es zu einer sehr starken Lösung für diese Art von Entwicklung macht. Das serverseitige Rendering ist dem der Konkurrenz überlegen und bietet zudem eine sehr gute SEO-Unterstützung.
• React aktualisiert effizient und rendert die richtigen Komponenten, wenn sich Daten ändern. Deklarative Ansichten machen den Code lesbar und einfach zu debuggen.
• Durch die Unterstützung und Verwendung von Facebook stellt der Technologieriese erhebliche Ressourcen für die kontinuierliche Weiterentwicklung zur Verfügung. Das bedeutet auch, dass sich die Funktionen bei einer der größten und meistbesuchten Anwendungen der Geschichte, Browser und mobile-native, bewährt haben.
• React ist weiterhin innovativ und verbessert sich ständig. Zu den jüngsten Beispielen gehören React-Fibre für eine verbesserte Nebenläufigkeit (Concurrency), React Hook für eine Reduzierung des Boilerplate-Codes und Suspense für ein besseres Rendering.

Die Schwächen von React

• React ist recht simpel gehalten, aber das Kompilieren eines gesamten Frameworks basierend auf React kann zu einer Herausforderung werden.
• Flexibilität ist ein zweischneidiges Schwert: Die Freiheit, die React bietet, kann dazu führen, dass Zeit verschwendet wird, um sich für den besten Ansatz bei verschiedenen Aufgaben zu entscheiden.
• Die Verwendung der JSX-Syntaxerweiterung zum Mischen von HTML und JavaScript hat auch seine Kehrseite. Die Komplexität kann als Hindernis für eine effektive Nutzung der Bibliothek angesehen werden, insbesondere für Nachwuchsentwickler.
• Die React-Entwicklung umfasst die Verwendung von einer Vielzahl von Assembly-Tools, um gut zu funktionieren und um mit anderen Webentwicklungstools kompatibel zu sein.
• Schlechte Dokumentation ist ein Kritikpunkt, der häufig bei React-Bibliotheken geäußert wird. In einer sehr aktiven Community und mit Unterstützung von Facebook werden regelmäßig Updates und Tools veröffentlicht, aber häufig mangelt es an der zugehörigen Dokumentation. Dies kann es Entwicklern erschweren, sich mit neuen Funktionen auseinanderzusetzen, was sich wiederum auf die Bibliotheksintegration auswirken kann.

Preact

Das Ziel von Preact als JavaScript-Bibliothek ist es, die Stärken von React in einem kleineren, leichteren Paket anzubieten. Als SPA-Tool umfasst Preact grade mal 3 KB im Vergleich zu 30 KB bei React. Die Bibliothek wurde von Googler Jason Miller mit Unterstützung einer Gruppe von Mitwirkenden erstellt und wird unter anderem von Uber, Lyft, Tencent, Groupon und Domino‘s verwendet.

Das kürzlich veröffentlichte Preact X hat den Code der Bibliothek noch weiter bereinigt und neue Funktionen und Kompatibilitätsverbesserungen hinzugefügt, um noch mehr Bibliotheken von Drittanbietern zu unterstützen.

Aufgrund der Größe und Geschwindigkeit von Preact eignet es sich im Allgemeinen am besten für leichte mobile Web-Apps oder Web-Widgets und -Einbettungen, für die React zu schwer sein könnte. Aufgrund seiner minimalistischen Natur wird Preact im Allgemeinen für kleinere Projekte in Betracht gezogen, bei denen die Leistung im Vordergrund steht.

Die Stärken von Preact

• Schnellstes virtuelles DOM im JavaScript-Ökosystem und eine der kleinsten Bibliotheken.
• Die einfache und vorhersehbare Diff-Implementierung von Preact ist ein weiterer Grund für die hohe Geschwindigkeit.
• Ein effektiver Memory-Speicher trägt zur allgemeinen Effizienz von Preact bei.
• Einfache Apps können im Browser ausgeführt werden, ohne dass Build-Tools verwendet werden müssen.
• Preact bietet eine dedizierte CLI;
• Verwendet die API von React;
• Kann in React-Projekte integriert werden.

Die Schwächen von Preact

• Die Hauptschwäche von Preact ist ein direktes Ergebnis seiner größten Stärke als viel leichtere und schnellere Alternative zu React. Als Federgewicht fehlt es an Funktionen.
• Ein bemerkenswerter Unterschied zu React besteht darin, dass „this props“ und „this.state“ direkt an die Render () Methode übergeben werden. Dies kann später zerstört werden.
• Basierend auf dem „addEventListener“ des Browsers bietet Preact keine Unterstützung für synthetische Ereignisse.
• Der Basiskern von Preact unterstützt keine PropType-Validierung. Das bedeutet, dass diese aus dem „preact/compat“-Modul importiert werden muss.
• Unit-Testing, für die React die von Airbnb entwickelte Enzyme-Testing-Utility verwendet, ist zwar möglich, erfordert jedoch einige Webpack-Konfigurationen und ist mit weiteren Einschränkungen verbunden.

Vue.js

Vue.js wurde zuerst im Jahre 2014 veröffentlicht und anschließend im Jahre 2016 neu gestartet. Vue beschreibt sich selbst als „intuitive, schnelle und integrierbare MVVM zur Erstellung interaktiver Schnittstellen.“ Wir bei K & C können diesen Attributen im Allgemeinen zustimmen.

Vor allem die folgende Beschreibung von Vue in einem Blog-Artikel auf Packt hat es uns angetan:

„Vue nimmt eine interessante Position im Triumvirat der Frontend-JavaScript-Frameworks ein. Nicht in dem Maße gehyped wie React und nicht so etabliert wie Angular, hat es sich in den letzten Jahren still und leise auf seine Stärken konzentriert und eine engagierte und enthusiastische Community von Entwicklern aufgebaut.“

Das Hauptziel besteht darin, Ideen für die Entwicklung der Web-Benutzeroberfläche (Komponenten, deklarative Benutzeroberfläche, Hot-Reloading, Timetravel-Debugging usw.) verständlicher zu machen. Weniger dogmatisch, ist es grade für junge Entwickler im Vergleich zu anderen Frameworks weitaus einfacher zu lernen.

Wie bereits erwähnt, wurde Vue.js von Evan You, einem ehemaligen Google-Ingenieur erstellt, der sich zum Ziel gesetzt hat, die Stärken von Angular und React zu kombinieren und gleichzeitig ihre jeweiligen Schwächen auszugleichen.

Obwohl Vue.js sowohl nach Angular als auch nach React erschienen ist, gewann es sehr schnell an Bedeutung und wurde von Alibaba, Nintendo, Expedia und mehreren anderen Unternehmen verwendet. Somit wurde gleichzeitig klargestellt, dass es sich hierbei alles andere als um ein Framework nur für SPAs handelt. Die Tatsache, dass Vue.js nicht die Unterstützung eines großen Technologiekonzerns genießt, macht den wachsenden Erfolg umso erstaunlicher und wirft die Frage auf, ob es mit derselben finanziellen Unterstützung von Angular und React nicht noch beliebter gewesen wäre.

Die Unabhängigkeit von Vue.js wird jedoch auch von vielen Menschen in der Webentwicklungs-Szene als etwas Positives wahrgenommen. Es hat nämlich dazu geführt, dass eine besonders große freiwillige Support-Gemeinschaft rund um Vue entstanden ist. Probleme und Fragen werden in der Regel viel schneller beantwortet als dies bei den großen, von Unternehmen unterstützten Frameworks wie Angular und React der Fall ist.

Ein weiterer positiver Nebeneffekt ist ein klarer Code bzw. eine API, die nicht „over-engineered“ wurden. Im Folgenden ein großartiges Video über Vue.js für alle, die eine kurze, leicht verdauliche Zusammenfassung des Frameworks suchen:

Die Stärken von Vue.js

• JavaScript-Code, Templates und CSS-Code werden nicht wie in React gemischt.
• Es ist möglich, ES5, ES6 sowie TypeScript zu verwenden (jedoch kann die Einrichtung schwieriger sein).
• Wie auch bei React interagiert Vue sehr gut mit anderen Bibliotheken oder sogar ganzen Projekten.
• Dies macht eine progressive App-Entwicklung möglich. Mit Vue.js können umfangreiche ältere JavaScript-Codebasen schrittweise modernisiert werden. Dies ist ein großer Vorteil für komplexe Migrationsprojekte.
• Die Dokumentation ist leicht verständlich und gut strukturiert. Die Open-Source-Community beantwortet aktiv Fragen oder hilft bei Problemen, was den Einstieg erleichtert.
• js ist gleichzeitig sowohl End-to-End-Framework als auch View-Layer, die die Statusverwaltung ermöglicht.
• Wir haben erwähnt, dass das Ziel von Vue.js darin bestand, die Stärken von React und Angular zu kombinieren. Das vielleicht bemerkenswerteste Beispiel hierfür ist die reaktive bidirektionale Datenbindung (wie Angular) sowie Virtual DOM, Event Sourcing (wie React).
• Somit unterstützt Vue.js sowohl JavaScript als auch TypeScript.
• Vue ist mit einer heruntergeladenen ZIP-Datei von nur 18 KB ein echtes Leichtgewicht. Das Herunterladen und Installieren der Bibliothek ist schnell und die geringe Größe wirkt sich ebenfalls positiv auf die Geschwindigkeit der Webseite sowie auf UX und SEO aus.
• js durchläuft momentan eine weitere wichtige Aktualisierung, wie das Upgrade von der ursprünglichen Version 2014 und 2.0 im Jahre 2016 – Vue.js 3.0 steht in den Startlöchern. Es ist bereits in der Beta-Version verfügbar. Vue 3 wird nach Aussagen der Gründer schneller, kleiner, wartungsfreundlicher und einfacher, native zu programmieren.

Die Schwächen von Vue.js

• Vue.js ist noch relativ neu und verfügt nicht über den Support oder die finanzielle Unterstützung der großen Tech-Player wie Angular (unterstützt durch Google) und React (unterstützt durch Facebook). Um bei großen Projekten auf Unternehmensebene häufiger anstelle von Angular oder React eingesetzt zu werden, fehlt Vue.js noch immer diese Form der Unterstützung, daher findet Vue vor allem bei kleineren Projekten am häufigsten Verwendung.
• Vue ist in China besonders beliebt, was bedeutet, dass ein erheblicher Teil des Inhalts, der Plug-In-Beschreibungen und -Anweisungen sowie der Community-Diskussionen zum Framework auf Chinesisch stattfinden.
• Komplexität der Reaktivität. Die in Vue implementierte bidirektionale Datenbindung zur Verwaltung von DOM-Updates ist ein praktisches Tool, um Komponenten synchron zu halten. Das Reaktivitätssystem rendert nur die Datenblöcke neu, die von einem Benutzer durch Komponentenaktivierung ausgelöst werden. Bei dieser Form des Datenlesens werden häufig Fehler gemacht, bei denen Daten reduziert werden müssen. Dies ist ein bekanntes Problem und es gibt zahlreiche Dokumentationen, in denen erläutert wird, wie die Reaktivität ordnungsgemäß eingerichtet werden sollte.
• Kleineres Ökosystem von Plugins und Tools im Vergleich zu React oder Angular.
• Mangel an erfahrenen Vue.js-Entwicklern. Es ist die typische Henne-Ei-Situation, aber weniger Vue-Entwickler können Unternehmen davon abhalten, das Framework zu verwenden, während eine geringere Kundennachfrage Entwickler davon abhält, Vue.js zu erlernen.

Es ist interessant zu sehen, dass die Vue.js zugeschriebenen „Schwächen“ fast alle mit dem Entwicklungsgrad des Frameworks in Bezug auf die Größe der Community (obwohl es auch für seine Qualität bekannt ist) und der Unterstützung auf Unternehmensebene zusammenhängen. Auf technischer Ebene sind Beschwerden über Mängel weniger ersichtlich, was darauf hindeutet, dass Vue.js wahrscheinlich weiterhin an Popularität gewinnen wird.

Ember

Das Ember Open-Source-Framework stammt noch aus der Zeit von Apple Music. Inspiriert nach dem Prinzip „Convention over Configuration“ ist Ember vor allem als umfangreiches Repository bekannt, das als Wörterbuch zur App-Entwicklung dient. Es berücksichtigt Konventionen anstatt mit Konfigurationen zu jonglieren und ermöglicht eine bidirektionale Datenbindung.

Ember ist seit seiner Veröffentlichung im Jahre 2012 durch wenig wesentliche Änderungen gegangen, was bedeutet, dass es sich hierbei um ein streng rückwärtskompatibles Framework handelt. Auf der anderen Seite wird das Framework alle sechs Wochen aktualisiert und legt weiterhin stark Wert auf Stabilität. Netflix, Apple und Microsoft sind nur einige der Unternehmen, die Ember verwenden.

Die Stärken von Ember

• Einfach auf dem System zu konfigurieren;
• Ember ist ein End-to-End-Framework, das sich auf „Convention over Configuration“ konzentriert.
• Ember wird von einer Vielzahl großer Technologieunternehmen und -marken unterstützt, darunter Yahoo und LinkedIn. Das bedeutet, es wurde nicht an die Bedürfnisse von nur einem Unternehmen angepasst.
• Die Datenbibliothek ermöglicht den gleichzeitigen Zugriff auf Daten über mehrere Quellen hinweg und richtet asynchrone Beziehungen ein.
• Ember CLI wird allgemein als die beste CLI aller JavaScript-Frameworks angesehen. Es hilft dabei, die richtigen Codes zu generieren und sie mit der richtigen Struktur unter Berücksichtigung von Abhängigkeiten zu erstellen.
• Ember Inspector ist eine praktische Browser-Erweiterung, mit der Entwickler die Apps in Echtzeit überwachen und bearbeiten können.
• Die MVVM-Architektur (Model-View-ViewModel Pattern) von Ember ist bei den Benutzern beliebt. Das Framework bietet ebenfalls eine bidirektionale Datenbindung.
• Die kürzlich veröffentlichte Ember Octane-Iteration hat einen ersten HTML- und Komponentenansatz mit verbesserter Unterstützung für Statusverwaltung und Reaktivität eingeführt.
• Ember profitiert von einer aktiven Community, die regelmäßig zum Ember Observer beiträgt, einer Website, auf der Lösungen für allgemeine Aufgaben zusammengefasst werden.

Die Schwächen von Ember

• Ein sehr eigensinniges Framework erschwert die individuelle Anpassung.
• Eines der schwergewichtigsten Frameworks;
• Schwer zu meistern;
• Zu komplex für kleine Projekte;
• Langsame Veröffentlichung neuer Versionen mit nur wenigen neuen Optionen.
• Ember ist eng mit jQuery verbunden, was für Entwickler, die einen Standardabruf oder Axios für AJAX-Anforderungen bevorzugen, als Nachteil angesehen werden kann. In Ember Octane ist jQuery jedoch standardmäßig nicht mehr enthalten.
• Die sinkende Popularität erschwert es, gute Ember-Entwickler zu finden.

Svelte

Svelte wurde im Jahre 2016 von Software-Ingenieur Rich Harris durch einen Geistesblitz geboren, der auf die Idee kam, ein JavaScript-Framework ohne eine Framework-spezifische Laufzeit zu erstellen. Dies wurde erreicht, indem Svelte den Framework-spezifischen Code in sauberes JavaScript, HTML und CSS kompilierte und diesen in den Browser übertrug. Der Ansatz war in der Softwareentwicklung nicht unbekannt, dafür aber im Kontext der Front-End-Entwicklung revolutionär.

Die zweite einzigartige Qualität von Svelte ist die erstklassige Unterstützung der Reaktivität. Dies ermöglicht eine verbesserte Leistung, ohne dass hierzu ein virtueller Dom erforderlich ist. Dadurch ist das Rendering von Svelte das schnellste aller JS-Frameworks.

Svelte ist komponentenbasiert (HTML, CSS und JS), leichtgewichtig und in TypeScript geschrieben. Entscheidend ist jedoch, dass das Framework keine Kenntnisse über TypeScript erfordert, um es vollständig nutzen zu können.

JavaScript-Entwickler sind beeindruckt und obwohl es für Svelte noch sehr früh ist, stößt es auf großes Interesse und gewinnt in Front-End-Entwicklungskreisen immer mehr an Bedeutung. Einige Optimisten gehen sogar so weit und behaupten, Svelte könne React als führende JS-Ressource ersetzen. Wie bei Vue ist jedoch anzunehmen, dass es mangels Unterstützung großer Tech-Konzerne zu Engpässen kommen wird – trotz der technischen Vorzüge.

Die Stärken von Svelte

• Für Entwickler ohne viel JS-Erfahrung ist es einfach, mit Svelte zu arbeiten.
• Für das Kompilierungszeit-Framework ist keine Framework-spezifische Laufzeit erforderlich und Svelte hat die kleinste Bundle-Größe aller JS-Frameworks.
• Schnellstes Rendering eines Frameworks dank Dom-Rendering via reaktiver Programmierung.
• Das komponentenbasierte Framework von Svelte ermöglicht die Erstellung von Benutzeroberflächen durch zusammensetzbare und wiederverwendbare Komponenten. Das Ergebnis zeigt sich in weniger Boilerplate-Codes und reduzierter Entwicklungszeit.
• Wie React-Core ist auch Svelte eine View-Layer und nicht eigensinnig.
• Sowohl clientseitiges als auch serverseitiges Rendering werden unterstützt. Gute SEO-Unterstützung.
• Svelte ist plattformübergreifend und kann zur Entwicklung von Web-, nicht nativen Mobil- und Desktop-Apps verwendet werden.

Die Schwächen von Svelte

• Mangel an Marktreife. Svelte ist noch sehr jung und verfügt über wenige Anwendungsbeispiele oder Tools von Drittanbietern. Der Mangel an Tooling und Tooling-Support ist derzeit der Hauptkritikpunkt an Svelte.
• Die Anzahl der Funktionen ist immer noch begrenzt, was bedeutet, dass viel Code geschrieben oder Tools von Drittanbietern für komplexere Entwicklungsprojekte verwendet werden müssten.
• Im Vergleich zu den ausgereiften und führenden JS-Frameworks und -Bibliotheken hat Svelte immer noch eine kleine Community, eine nicht ausgereifte Dokumentation und es fehlt an Unterstützung, die die meisten Projekte auf Unternehmensebene benötigen.
• Child-Komponenten können nicht mit scoped Styles angepasst werden.
• TypeScript wird nicht unterstützt.
• Es gibt nur wenige offene Stellen speziell für Svelte-Entwickler.

Angular, Vue, React, Preact, Ember oder Svelte? Was sollte man für das nächste JavaScript-Projekt auswählen?

Was sollten Sie für die Entwicklung Ihrer App wählen? Angular, Vue, React, Preact, Ember oder Svelte? Wie oben beschrieben, hat jedes Framework oder jede Bibliothek ihre eigenen Stärken und Schwächen. Die richtige Wahl hängt von den Anforderungen der Anwendung ab und wird häufig auch mindestens so stark von den Entwicklerressourcen und geschäftlichen Überlegungen beeinflusst.

Aber wir möchten uns nicht aus der Affäre ziehen, indem wir nach einem so umfassenden Review die Antwort komplett offen lassen. Deshalb gibt es hier einige Faustregeln, die Sie bei der Entscheidung unterstützen können:

• Ihre Lösung ist Angular, falls Sie TypeScript mögen und es bevorzugen, in einem klar definierten Framework nach einem bestimmten Ablauf zu arbeiten. Dies gilt vor allem für größere Apps auf Unternehmensebene, für die Stabilität, Support und ein großer Pool erfahrener Entwickler im Vordergrund steht.
• Ihre Lösung lautet React, falls Sie Flexibilität brauchen, große Ökosysteme und JS bevorzugen, nicht zwischen verschiedenen Paketen wählen möchten, Ihren eigenen Ansatz suchen und hierzu modernste Technologien benötigen. Wie im Fall von Angular sprechen auch hier ein großer Pool von React-Entwicklern sowie eine starke Unterstützung und Stabilität für die Bibliothek.
• Ihre Lösung ist Preact, falls Sie auch React in Betracht ziehen, aber der Meinung sind, dass die Leistungsvorteile, die sich aus der Leichtigkeit ergeben, wichtiger als die eingeschränkten Funktionen sind.
• Ihre Lösung ist Vue.js, falls Sie nach einer weniger steilen Lernkurve suchen, um Junior-Entwickler zu rekrutieren, ein leichtgewichtiges Framework benötigen oder saubere HTML-Dateien benötigen. Hier gilt es zu berücksichtigen, dass Vue zwar mittlerweile gut etabliert ist, aber der Pool vor allem an erfahrenen Entwicklern noch nicht so groß ist wie bei Angular oder React.
• Ihre Lösung ist Ember, falls Sie persönlich gerne mit dem Framework arbeiten, nicht übermäßig besorgt sind, Ember-Entwickler noch in ein paar Jahren relativ einfach einstellen zu können und Zukunftssicherheit nicht unbedingt als ein strategisches Muss betrachten.
• Ihre Lösung ist Svelte, falls Sie bereit sind, den technischen Stärken Vorrang gegenüber mangelnder Reife zu gewähren und sich entweder keine Sorgen machen müssen oder ein Risiko bezüglich eines noch immer kleinen Kreises an erfahrenen Entwickler eingehen möchten.

Und wenn Sie sich immer noch nicht entscheiden können, probieren Sie sie einfach alles unter verschiedenen Bedingungen aus. Sie werden zu Ihren eigenen Schlüssen kommen.

Krusche & Company – Webentwicklungsberatung mit Sitz in München

Krusche & Company ist eine in München ansässige Agentur für Webentwicklung, DevOps, Cloud und digitale Transformation mit über 20 Jahren Erfahrung. Wir unterstützen und setzen die digitalen Ziele unserer Partner um – von Unternehmensportalen für einige der bekanntesten europäischen Marken bis hin zu schlanken MVPs für vielversprechende Start-ups und alles dazwischen.

Unser Modell umfasst deutsches Management, regionale Tech-Talente und bietet eine einzigartige Mischung aus Qualität, Kontrolle und Preis. Wir legen denselben hohen Stellenwert auf hervorragende Kommunikation wie auf die Exzellenz unseres Tech-Stacks.

Falls Sie eine Teamerweiterung oder ein dediziertes Team für Ihre Softwareentwicklungskapazitäten, Cloud-native Entwicklungs-, Migrations- oder Architekturdienste sowie DevOps benötigen, zögern Sie nicht, sich mit uns in Verbindung zu setzen. Wir würden gerne mehr von Ihren Projektanforderungen erfahren und gemeinsam mit Ihnen besprechen, wie wir Sie dabei unterstützen können, Ihre Ziele genau nach Ihren Wünschen, pünktlich und kostengünstig umzusetzen.