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

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

Web Entwicklung • UPDATED ON Juli 29, 2022

Web Development Team

Author

Angular vs. Vue vs. React vs. Ember vs. Preact vs. Svelte vs. SolidJS (uff, das war ein Zungenbrecher, selbst nachdem jQuery aus der Liste entfernt wurde!) – das ist die Frage, die sich Entwicklerteams und Produktverantwortliche zu Beginn eines jeden neuen Webentwicklungsprojekts stellen müssen. Waghalsige könnten sogar die aufstrebenden neuen Frameworks Lit, Alpine.js, Solid und Stimulus mit ins Spiel bringen. Jedes der regelmäßig in der Industrie genutzten JavaScript-Frameworks oder -Bibliotheken sowie die neuen Optionen, die um die Gunst der Kunden kämpfen, haben ihre jeweiligen Stärken und Schwächen.

Unterschiedliche Entwickler, Produktverantwortliche und Führungskräfte haben ihre persönlichen Präferenzen und Ansichten zu verschiedenen Optionen, die sowohl geschäftlicher als auch technischer Natur sein können.

Von den JS-Frameworks und -Bibliotheken, die wir behandeln werden, hat Ember sicherlich seinen Zenit bereits überschritten und befindet sich nun auf dem Abwärtstrend, was die aktive Nutzung und Popularität angeht. Ende 2019, mit der Veröffentlichung von Ember Octane, bestand kurzzeitig Hoffnung auf einen Sprung zurück in den Mainstream; bis dato blieb es aber nur bei einer Nischenanhängerschaft. Auch wenn der Weg zurück steinig sein mag, ist es zum jetzigen Zeitpunkt einfach noch zu früh, überhaupt nicht mehr über Ember zu sprechen.

jQuery wurde dagegen in der vorherigen Ausgabe dieses Beitrags behandelt, aber in dieser Version komplett herausgenommen. Die Bibliothek wird zwar noch für einige Vorläuferversionen verwendet, um ältere Browser zu unterstützen, aber da der eigentliche Zweck der Abstraktionsschicht, nämlich die Lösung von Kompatibilitätsproblemen zwischen den Browsern, heutzutage hinfällig geworden ist, ist auch jQuery überflüssig geworden. Leb wohl, alter Freund! Wir werden dich nie vergessen!

Svelte und Preact bringen dagegen frischen Wind in die Webentwicklung. Es bleibt abzuwarten, ob sie die Vorherrschaft der „großen 3“ (React, Angular und Vue.js.) im Laufe ihrer Entwicklung ernsthaft infrage stellen können. Darüber hinaus stehen weitere schicke neue Frameworks wie Lit, Alpine.js, Solid.js und Stimulus zur Wahl, die aus technischer Sicht ihre Bewunderer haben, auch wenn sie derzeit für die meisten kommerziellen Anwendungen noch zu unbedeutend sind.

Das könnte sich jedoch in den nächsten Jahren ändern, da vor allem die „reaktive“ Solid.js im Vergleich zu den bestehenden Frameworks und Bibliotheken genügend Mehrwert bietet, um den Durchbruch in die Industrie zu schaffen. In der Praxis sieht es jedoch so aus, dass Unternehmen neue Frameworks und Bibliotheken ohne die Unterstützung eines Tech-Giganten, wie z. B. Googles aktive Unterstützung für Angular oder Facebooks für React, als strategisches Risiko betrachten, selbst wenn sie deren technische Qualitäten schätzen.

Das bedeutet nicht, wie Vue.js gezeigt hat, dass JavaScript-Frameworks die Unterstützung von Big Tech brauchen, um marktfähig zu werden. Allerdings zeigen React und Angular, dass die Ressourcen, die jenen zur Verfügung gestellt werden, die von einer solchen Unterstützung profitieren, einen Unterschied machen.

Wie man die optimalen JavaScript-Frameworks bzw. -Bibliotheken auswählt

Die fundierte Entscheidung über die Technologie für ein bestimmtes Front-End-Entwicklungsprojekt ist eine der ersten großen Aufgaben zu Beginn eines jeden Planungsprozesses. Es gibt eine Reihe verschiedener Faktoren, die die endgültige Entscheidung über die Auswahl des JS-Frameworks bzw. der JS-Bibliothek für ein bestimmtes Front-End-Projekt beeinflussen. Natürlich sind technische Qualitäten sowie die erforderlichen Funktionen ein wichtiger Faktor bei der Wahl zwischen React, Angula, Vue und den anderen Technologien. Es wäre jedoch zu simpel, einfach anzunehmen, dass sich die Wahl des JS-Frameworks für jedes Front-End-Projekt lediglich aus der Analyse der technischen Gegebenheiten ableiten ließe.

Sicherlich sind einige Stärken eines Frameworks in verschiedenen Front-End-Entwicklungsprojekten wichtiger als andere. Die beliebtesten JavaScript-Frameworks und -Bibliotheken sind jedoch alle dermaßen flexibel in ihrer Anwendung, dass die endgültige Wahl doch häufiger von umfassenderen Geschäftsentscheidungen und praktischen Gesichtspunkten abhängt.

Zu den zusätzlichen Faktoren, die sich im Entscheidungsprozess zwischen Frameworks häufig als entscheidend erweisen können, gehören:

• Organisationspolitik, nach dem Motto: „Wir verwenden grundsätzlich React für unsere Front-End-Entwicklung, es sei denn, es gibt einen besonderen Grund, warum die gewünschten Funktionen einer App nicht mit React erreicht werden können.“
• Verfügbarkeit von Entwicklungsressourcen: „Wir haben derzeit Angular-Spezialisten intern verfügbar“ oder „Unser IT-Outsourcing-Partner verfügt über ein Vue.js-Team, das kurzfristig mit der Arbeit beginnen kann.“
• Zukunftssicher: Es ist vergleichsweise einfacher, von React erstellte Apps mit der neuesten Version des Frameworks zu aktualisieren als mit Angular, Vue.js oder Ember. Die Frage nach der aktiven Unterstützung der Open-Source-Community auf mittel- bis langfristiger Basis stellt sich ebenfalls.
• Popularität unter Entwicklern: Es ist einfacher, Entwickler für die Arbeit mit den beliebtesten JS-Frameworks zu gewinnen und zu halten. Eine größere Anzahl von Entwicklern mit Erfahrung in einem bestimmten Framework kann auch dazu beitragen, die Kosten in einem angemessenen Rahmen zu halten.

Das Ziel dieses Blogs ist es nicht, objektiv festzustellen, welches der derzeit am häufigsten verwendeten JavaScript-Frameworks und -Bibliotheken die bestmölgiche Lösung ist. Der einfache Grund besteht darin, dass moderne Front-End JS-Ökosysteme bereits weit fortgeschritten sind –heutzutage kann man zwischen vielen starken Frameworks wählen, die die technischen Anforderungen der meisten Projekte erfüllen.

Wie bereits erwähnt, hängt die Entscheidung nicht nur von den technischen Vor- und Nachteilen ab, sondern fällt oftmals auf strategische und geschäftliche Faktoren zurück.

Im Folgenden werden wir uns sowohl die Trends in der Beliebtheit zwischen den wichtigsten Optionen wie React, Angular, Vue.js, Svelte und Preact ansehen als auch die Faktoren, die diese Trends beeinflussen. Das wird einen Einblick in die strategischen Überlegungen geben, die Ihre Entscheidung beeinflussen könnten.

Außerdem geben wir einen umfassenden Einblick in die technischen Stärken und Schwächen jedes einzelnen Frameworks. Andere Faktoren, wie strategische oder geschäftliche Überlegungen, die zur Wahl des Frameworks beitragen, werden für diesen Zweck als gleich angenommen.

Was genau sind JavaScript-Bibliotheken und -Frameworks?

Die Unterscheidung zwischen einer Programmiersprache, einer Bibliothek und einem Framework kann zunächst verwirrend sein. Führungskräfte mit wenig technischem Verständnis gehen oftmals davon aus, dass React, Angular, Vue.js, Ember und jQuery Programmiersprachen sind.

Natürlich sind sie das nicht. JavaScript ist die Programmiersprache und alle oben genannten sind Frameworks und Bibliotheken, die auf JS basieren. Aber Bibliotheken und Frameworks sind zu einem Standard in der modernen Web- und Anwendungsentwicklung geworden, weil ihre Verwendung die Softwareentwicklung einfacher, schneller und in direkter Folge auch billiger macht.

Aber was genau sind Bibliotheken und Frameworks?

Was ist eine JavaScript-Bibliothek?

Eine Bibliothek ist eine Sammlung von vorgefertigten „Codeschnipseln“, die häufig verwendete JS-Funktionen ausführen. Diese Schnipsel werden wie Legosteine verwendet, um komplexere Konfigurationen von Funktionen zu erstellen. Wenn Sie z. B. möchten, dass die Suchfunktion Ihrer Anwendung eine Funktion zum automatischen Vervollständigen bietet, wird ein Code-Schnipsel aus einer Bibliothek eingefügt.

Letztlich bieten Bibliotheken Codeschnipsel, die den Aufbau eines ganzen Projekts beschleunigen. Aber sie sind kein Allheilmittel, mit dem man eine komplexe Anwendung von Anfang bis Ende formatieren kann.

React, Preact, Solid und sowie das veraltete jQuery sind allees Beispiele für bekannte JavaScript-Bibliotheken.

Was ist ein JavaScript-Framework?

Ein JS-Framework ist dagegen eine vollständige Toolbox, mit der eine Webseite oder Anwendung erstellt werden kann. Um es zu verbildlichen: Bibliotheken können mit den Einrichtungsgegenständen eines Hauses verglichen werden, während ein Framework eher der Vorlage und den Teilen ähnelt, die zum Bau eines vorgefertigten Gebäudes verwendet werden.

Ein JS-Framework bietet demnach das Grundgerüst, um das sich ein gesamtes Webentwicklungsprojekt dreht. Das Framework bietet Seiten-Templates, in denen die Details in Form von benutzerdefinierten Codes eingefügt werden können. Dies unterscheidet sich von der Verwendung einer Bibliothek, bei der der Entwickler frei entscheidet, wo die Codeausschnitte hinzugefügt werden sollen.

Die Stärke eines Frameworks besteht darin, dass es neben Effizienz auch eine Organisationsgrundlage bietet. Der Code ist gut strukturiert und das Framework enthält sofortige Lösungen für häufig auftretende Codierungsprobleme. Der Nachteil eines Frameworks ist jedoch, dass es weniger Flexibilität erlaubt. Eine erweiterte Programmierung für eine verbesserte Benutzererfahrung beschränkt sich auf die Möglichkeiten des Frameworks.

Frameworks können zwar angepasst werden, aber der hinzugefügte Code muss den für das Framework spezifischen Regeln und Konventionen folgen, wodurch Freiheit und Flexibilität eingeschränkt werden. Es könnte argumentiert werden, dass tatsächlich kein JavaScript-Framework wirklich der strengen Definition eines „Frameworks“ entspricht, wie auf StackOverFlow passend erklärt wurde:

„Eines der charakteristischen Merkmale eines Software-Frameworks ist, dass sein Code vor Änderungen geschützt ist. In JavaScript ist dies eindeutig nicht der Fall. Alle Bibliotheken oder Frameworks, die in Ihren clientseitigen Code aufgerufen werden können, können geändert werden, obwohl dies gegen bewährte Methoden verstößt.“

Ein Framework:

• Nimmt Webanfragen entgegen
• Unterstützt Session-Handling
• Ruft Ihren Code auf, um Anfragen anzunehmen

Ein Framework ruft den Code Ihrer Anwendung auf. Wenn Sie jedoch eine Bibliothek verwenden, ruft Ihre Anwendung die Codeausschnitte aus der Bibliothek auf.

Das folgende Tutorial-Video von Java Brains bietet eine ausführlichere Erklärung zur Unterscheidung zwischen einer JavaScript-Bibliothek und einem JavaScript-Framework:

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 benutzt man eine JavaScript-Bibliothek, wann ein -Framework für Entwicklungsprojekte?

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, SolidJS: Welches JavaScript-Framework ist 2022 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.

Wer in den kommenden Monaten ein geschäftliches Webentwicklungsprojekt in Angriff nehmen will, wird mit ziemlicher Sicherheit die Wahl zwischen React, Angular oder Vue.js fällen. Ältere Projekte nutzen manchmal noch Ember, aber nur sehr wenige neue Technologien. Svelte und Preact gewinnen genug an Dynamik, dass sie von abenteuerlustigeren Projektträgern oder Entwicklungsteams in Betracht gezogen werden könnten, sofern die entsprechenden Fähigkeiten vorhanden sind.

Trotz der positiven Einschätzung ihrer technischen Qualitäten durch Entwickler, sind Solid, Alpine.js, Lit oder Stimulus in der kommerziellen Entwicklung eher die Ausnahme.

Wir haben uns bereits mit der allgemeinen Frage beschäftigt, wann man sich für eine JavaScript-Bibliothek wie React oder Preact und wann für ein Framework wie Angular, Vue, Ember oder Svelte entscheidet. Lassen Sie uns nun einen genaueren Blick auf die relativen Stärken und Schwächen der einzelnen Auswahlmöglichkeiten und ihre jeweiligen Anwendungsfälle werfen.

Als Einleitung dazu sollten wir einen Blick auf die allgemeinen Trends rund um die verschiedenen JS-Framework-Bibliotheken werfen.

Was halten JavaScript-Entwickler von den verschiedenen JavaScript-Frameworks und -Bibliotheken?

Natürlich gibt es noch mehr Open-Source-JavaScript-Frameworks und -Bibliotheken als die, die wir hier behandeln. Backbone und Mithril zum Beispiel haben aktive Communities und begeisterte Nutzer. Dennoch ist es sinnvoll, unsere Aufmerksamkeit auf die im State of JavaScript-Bericht behandelten Frameworks zu richten. Der Mangel an Entwicklern mit Fachkenntnissen in Nischen-Frameworks und -Bibliotheken bedeutet, dass es für Unternehmen ungewöhnlich ist, sie professionell zu nutzen. Wie bereits erwähnt, ist es für kommerzielle Projekte sogar eine Seltenheit, von den „Big 3“ React, Angular und Vue.js abzuweichen.

Das folgende Bild zeigt den Bekanntheitsgrad der wichtigsten Frameworks und Bibliotheken bei Tausenden von internationalen JS-Entwicklern auf der ganzen Welt, die zum State of JavaScript 2021-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ächsten beiden Grafiken zeigen, wie stark die verschiedenen JS-Frameworks und -Bibliotheken von den Entwicklern tatsächlich genutzt werden. Auch die Zufriedenheit der JS-Entwickler, die Frameworks und Bibliotheken verwendet haben, könnte ein wichtiger Hinweis darauf sein, wie weit verbreitet ihre Nutzung in einigen Jahren sein wird.

Wir sehen, dass React nicht nur sehr weit verbreitet ist – 80 % der JS-Entwickler haben bereits damit programmiert -, sondern dass auch die Zufriedenheit hoch ist: 84 % der Befragten gaben an, dass sie es gerne wieder verwenden würden. An zweiter Stelle folgt Angular: 54 % der JS-Entwickler haben mit diesem Framework gearbeitet. Dies ist jedoch ein Rückgang von 56 % im Jahr 2020 und 58 % im Jahr 2019.

Trotz der relativen Beliebtheit von Angular bei denjenigen, die für Entwicklungsprojekte bezahlen und diese verwalten, zeigen die Entwickler selbst eine relativ große Skepsis in ihrer Einstellung zu Angular. Nur 55 % geben an, dass sie es wieder verwenden würden, ein Wert, der nur von Ember noch unterboten wird. Die Tatsache, dass die Nutzung des Frameworks langsam, aber stetig zurückgeht, könnte eine Folge dessen mangelnder Beliebtheit bei den Entwicklern sein.

Dies steht im Gegensatz zu Vue.js, dessen Nutzung zwischen 2016 und 2021 von 10 % auf 51 % gestiegen ist. Das mag damit zusammenhängen, dass die Stimmung gegenüber Vue.js weitgehend positiv ist: 80 % derjenigen, die Vue.js verwendet haben, sagen, dass sie es wieder tun würden. 50 % der JavaScript-Entwickler, die Vue.js bisher nicht verwendet haben, geben an, dass sie es gerne ausprobieren würden.

Von den neueren JS-Frameworks und -Bibliotheken, die an Zugkraft gewinnen, sind die Zufriedenheitswerte mit Svelte und Solid mit 90 % besonders hoch. Das trägt dazu bei, dass Svelte immer häufiger eingesetzt wird: 20 % der JS-Entwickler haben bereits damit gearbeitet, verglichen mit nur 8 % im Jahr 2019 und 15 % im Jahr 2020.

Solid ist ein Neuzugang im SoJS-Bericht 2021 und wurde bisher nur von 3 % der befragten Entwickler verwendet. Man darf gespannt sein, ob die hohe Zufriedenheit unter den bisherigen Entwicklern, die Solid verwendet haben, sich in einer steigenden Nutzung in zukünftigen Auflagen niederschlägt.

Svelte und Solid sind auch die beiden JS-Alternativen, an denen die meisten Entwickler, die noch nicht mit ihnen gearbeitet haben, interessiert sind. So gaben 68 % der befragten Entwickler an, dass sie Ersteres und 56 % Letzteres unbedingt erlernen möchten.

Ein Beweis dafür, dass Ember veraltet ist, ist auch die Tatsache, dass es unter allen untersuchten Frameworks und Bibliotheken mit nur 21 % den niedrigsten Zufriedenheitsgrad aufweist sowie die Erkenntnis, dass nur 12 % der Entwickler ein Interesse zeigen, Ember zu erlernen, was weniger ist als bei allen anderen Alternative.

Nachfrage nach Angular, Vue.js, React, Preact, Svelte, Solid usw. Entwicklern im Jahr 2022

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? Werfen wir einen Blick auf die Nachfrage nach Fähigkeiten in den verschiedenen JavaScript-Frameworks im Jahr 2022.

Ein interessantes Bild ergibt sich aus der Anzahl der auf LinkedIn ausgeschriebenen Jobangebote, in denen die verschiedenen JS-Frameworks und -Bibliotheken aufgeführt sind. Bei der verwendeten Methode wurde der Standort auf die USA festgelegt, da dies der größte Einzelmarkt für IT-Fachleute ist und somit der beste Proxy für die weltweite Nachfrage darstellt. Der Filter der Plattform lässt keine Suchanfragen zu, bei denen kein Standort angegeben wird, so dass alle international ausgeschriebenen Stellen erfasst werden.

Wenn es um die kommerzielle Nachfrage nach Entwicklern mit Kompetenzen in den hier besprochenen JS-Frameworks und -Bibliotheken geht, liegen React und Angular mit 85.596 bzw. 65.384 Stellenangeboten, die diese Fähigkeiten als Anforderungen auflisten, weit vorne. Es besteht auch eine solide Nachfrage nach Vue.js-Entwicklern, mit 19.025 ausgeschriebenen Stellen in den USA.

Darüber hinaus ist die kommerzielle Nachfrage trotz der Begeisterung der JS-Entwickler für einige der neueren Frameworks und Bibliotheken begrenzt. Tatsächlich gibt es immer noch mehr Nachfrage nach Ember-Entwicklern (2680 ausgeschriebene Stellen) als nach einem der neueren Technologien. Dies ist vermutlich hauptsächlich auf ältere Anwendungen zurückzuführen, die mit Ember entwickelt wurden.

Es besteht eine gewisse kommerzielle Nachfrage nach Solid-Entwicklern (1657 ausgeschriebene Stellen) und in geringerem Maße nach Svelte (421 offene Stellen) und Preact (125 offene Stellen). Es ist jedoch bemerkenswert, wie wenige dieser Stellen im Vergleich zu denen, die React, Angular und Vue.js erfordern, angeboten werden. Die ausgeschriebenen Stellen für Entwickler mit Erfahrung in Alpine.js, Lit und Stimulus liegen im niedrigen zweistelligen oder einstelligen Bereich, was darauf hindeutet, dass die Unternehmen diese Technologien noch nicht für die von ihnen zu erstellenden Anwendungen als geeignet erachten. Das könnte sich in den kommenden Jahren ändern, aber im Moment scheint Solid, das jüngste der neuen Frameworks und Bibliotheken, am ehesten in der Lage zu sein, ernsthafte gewerbliche Bedeutung zu erlangen. Allerdings befindet es sich noch in der Anfangsphase eines möglichen Durchbruchs.

Vergleich der Stärken und Schwächen sowie deren Anwendungsbereich der beliebtesten JS-Frameworks und -Bibliotheken

Die Marktnachfrage nach Entwicklern mit Erfahrung in den Frameworks und Bibliotheken, die in den State of JS 2021-Berichten behandelt werden, deutet darauf hin, dass fast alle neuen Web- und App-Entwicklungsprojekte, die JavaScript für ihre Benutzeroberflächen verwenden, sich für eines von React, Angular oder Vue.js. entscheiden wird. Es handelt sich dabei um effiziente, ausgereifte und leistungsstarke Technologien, die sich deshalb auf dem Markt durchgesetzt haben.

Die anderen hier erwähnten Technologien, einschließlich der neuen sowie der in Ungnade gefallenen älteren Technologien wie Ember, haben zwar auch ihre Vorzüge, werden aber in den meisten Fällen nicht als marktfähige Lösung angesehen.

Dies ist sowohl auf strategische Überlegungen als auch auf technische Vorzüge zurückzuführen, insbesondere im Hinblick auf die neueren JS-Frameworks und -Bibliotheken. Der Umfang der Ressourcen, die den Entwicklern zur Verfügung stehen, und die Größe und Aktivität der Open-Source-Gemeinschaften sind nicht mit denen zu vergleichen, von denen React, Angular und Vue.js profitieren. Ebenso wichtig ist die Zuversicht der Projektträger, dass sie in der Lage sein werden, Entwickler einzustellen, die mit dem gewählten JS-Framework oder der Bibliothek jetzt und in der Zukunft nachhaltig arbeiten können.

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 vs. 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..

Angular Stärken

• Modularität;
• Die Verwendung von Komponenten mit Modulen;
• Die Verwendung von Dependency Injection;
• der umfangreiche Katalog von fertigen Komponenten;
• Das hohe 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 Command-Line-Tools in der JavaScript-Landschaft.
• Durch TypeScript und die Trennung von Template, Styling und Business-Logik eignet sich die Angular-Entwicklung besonders für die große Code-Basis von Enterprise-Apps.
• Integrierte Funktionen wie DOM-Sanitisation machen Angular zum sichersten Frontend-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.

Angular Schwächen

• 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, insbesondere im Kontext einer dynamischen UX.

React Stärken

• 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-Fiber für eine verbesserte Nebenläufigkeit (Concurrency), React hook für eine Reduzierung des Boilerplate-Codes und Suspense für ein besseres Rendering.

React Schwächen

• 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.

Vue.js

Vue.js wurde zuerst im Jahre 2014 veröffentlicht und anschließend im Jahre 2016 neu veröffentlicht. 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 (inklusive Angular) 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 Open-Source-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:

Vue.js Stärken

• 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 sowie 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.
• Mit jeder neuen Version wird Vue.js „schneller, kleiner, wartungsfreundlicher und leichter nativ zu gestalten“.

Vue.js Schwächen

• Vue.js ist noch relativ neu und hat nicht die Unterstützung bzw. den finanziellen Rückhalt eines der großen Tech-Unternehmen wie Angular (unterstützt von Google) und React (unterstützt von Facebook). Vue.js wird häufiger für große Unternehmensprojekte zugunsten von Angular oder React eingesetzt, aber es fehlt noch ein wenig an der Art von Unterstützung, die Unternehmen suchen, weshalb es meist in kleineren Projekten eingesetzt wird.
• Vue ist besonders in China beliebt, was bedeutet, dass ein großer Teil der Inhalte, Plugin-Beschreibungen und -Anleitungen sowie Community-Diskussionen über das Framework auf Chinesisch sind.
• Komplexität der Reaktivität. Die in Vue implementierte Zweiweg-Datenbindung zur Verwaltung von DOM-Updates ist ein praktisches Werkzeug, um Komponenten synchron zu halten. Das Reaktivitätssystem gibt nur die Datenpakete wieder, die durch die Aktivierung einer Komponente durch einen Benutzer ausgelöst werden. Beim Lesen dieser Daten werden oft Fehler gemacht, die eine Reduzierung der Daten erfordern. Das Problem ist bekannt, und es gibt eine umfangreiche Dokumentation, in der erklärt wird, wie Reaktivität richtig eingerichtet werden sollte.
• Kleineres Ökosystem an Plugins und Tools im Vergleich zu React oder Angular.
• Mangel an erfahrenen Vue.js-Entwicklern. Es ist ein Henne-Ei-Problem, denn weniger Vue-Entwickler können Unternehmen von dem Framework abbringen, während eine geringere Kundennachfrage mehr Entwickler davon abhält, es zu lernen. Aber auch dies ist eine Schwäche, die im Laufe der Zeit immer weniger ausgeprägt sein dürfte.

Auffällig ist, dass die „Schwächen“, die Vue.js zugeschrieben werden, fast alle mit dem Entwicklungsstand des Frameworks in Bezug auf die Größe der Community (obwohl es auch für seine Qualität bekannt ist) und den Support auf Unternehmensebene zusammenhängen. Auf technischer Ebene gibt es kaum Mängel zu beklagen, was darauf hindeutet, dass Vue.js wahrscheinlich weiter an Popularität gewinnen wird.

Der obige Absatz wurde ursprünglich im Jahr 2018 mit der ersten Veröffentlichung dieses Artikels geschrieben. In den vier Jahren seither ist die Entwicklung von Vue ungefähr dem vorhergesagten Pfad gefolgt. Wenn wir uns auf die State of JS 2021-Daten beziehen, die in den obigen Diagrammen gezeigt werden, ist die Nutzung des Frameworks unter JavaScript-Entwicklern von 32 % auf 51 % gestiegen. Der große Sprung in der Nutzung fand zwischen 2018 und 2019 statt, aber seitdem hat Vue weiter an Boden gewonnen, wenn auch langsamer.

Interessanterweise ist die Zufriedenheit der JS-Entwickler mit Vue.js von 91 % im Jahr 2018 auf 80 % im jüngsten Bericht gesunken, während Vue.js immer häufiger eingesetzt wird. Auch hier gab es die größte Veränderung zwischen 2018 und 2019, als die Nutzung des Frameworks rasant anstieg. Dies deutet darauf hin, dass die Zufriedenheit von Entwicklern maßgeblich davon beeinflusst wird, wie häufig sie ein bestimmtes Framework oder eine Bibliothek in einem kommerziellen Kontext verwenden.

Der Zufriedenheitsgrad mit der Solid-Bibliothek liegt derzeit bei 90 %, die Nutzung ist jedoch gering. Basierend auf dem Verhaltensmuster von Vue kann man davon ausgehen, dass je mehr Entwickler Solid kommerziell nutzen, desto unzufriedener werden sie. Behalten wir diese Theorie in den nächsten Jahren im Auge!

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 veröffentlichen von 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 oder einbettbare Komponenten, bei denen die Leichtigkeit im Vordergrund steht.

Preact Stärken

• 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.

Preact Schwächen

• 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.

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 in Anwendungen verwenden.

Ember Stärken

• 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 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.

Dieser Blogbeitrag, in dem wir Angular vs Ember direkt miteinander vergleichen, könnte für Sie interessant sein.

Ember Schwächen

• 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.

Der sprunghafte Anstieg der Zahl der JS-Entwickler, die Svelte verwenden, von nur 8 % im Jahr 2019 auf 20 % im Jahr 2021, ist bemerkenswert, und wenn es seinen derzeitigen Kurs beibehält, könnte es bald als Mainstream und kommerziell tragfähige Alternative zu React, Angular und Vue angesehen werden.

Svelte Stärken

• 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.

Svelte Schwächen

• 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 Stellenangebote speziell für Svelte-Entwickler, wobei diese stetig zunimmt, wie bereits in
• Es gibt nur wenige offene Stellen speziell für Svelte-Entwickler, obwohl die Zahl steigt, wie wir bereits bei der Untersuchung der Stellenangebotsdaten gesehen haben.

Solid

Solid ist ein deklaratives Open-Source-JavaScript-Framework, das für die Erstellung großer Benutzeroberflächen mit maximaler Kontrolle über die Reaktivität konzipiert wurde. Es wurde 2018 von Ryan Carniato entwickelt. Es hat JS-Entwickler schnell beeindruckt, die darin ein sehr gutes Gleichgewicht zwischen Pragmatismus und Leistung sehen. Das Framework baut auf TypeScript auf und unterstützt dieses auch.

Es weist viele Ähnlichkeiten mit React auf, z. B. dass Komponenten JS-Funktionen sind, die JSX für die Benutzeroberfläche zurückgeben, und dass der Datenfluss in eine Richtung geht. Die größte Abweichung von React besteht darin, dass Solid einen Compiler verwendet, der dem von Svelte ähnelt und den Code in Vanilla JavaScript umwandelt, um dem DOM so nahe wie möglich zu kommen, anstatt ein Virtual DOM zu verwenden.

Solid gilt als das erste wirklich reaktive JS-Framework mit Funktionskomponenten, die nur einmal aufgerufen werden. Das erlaubt Entwicklern Dinge zu tun, die in anderen Frameworks und Bibliotheken nicht möglich sind, wie z.B. die vorhersehbare Verwendung von Intervallen auf der obersten Ebene.

Daten, die sich ändern, werden vom Framework beobachtet und chirurgisch an der genauen Stelle im DOM aktualisiert, wenn sie sich ändern, anstatt die gesamte Komponente neu zu rendern, wodurch sie wirklich reaktiv wird. Die verschachtelte Reaktivität wird über Speicher erreicht, deren Rückgabewerte ein Proxy-Objekt sind, dessen Eigenschaften nachverfolgt werden können.

Solid Stärken

• SolidJS nutzt viele der ergonomischen Eigenschaften von React und minimiert gleichzeitig die Gefahr von Unklarheiten und Fehlern, die sich auf den Code von Hooks auswirken können.
• Vorhersagbare Ausgabe.
• Leichtgewichtig – das Framework umfasst nur 6,4kb
• Blitzschnelle Laufzeit – nur einen Bruchteil langsamer als Vanilla JS und besser als Svelte oder Preact.
• Durch seine kompakte Größe und Geschwindigkeit ist Solid ideal für die Erstellung von JS-Widgets, die Host-Websites nur minimal beeinträchtigen.
• Tolle Erfahrung für Entwickler. Solid unterstützt Typescript, Hooks, Suspense-ähnliche Funktionen, SSR, SSG, und Sie können es leicht mit modernen Tools bündeln.
• Gleichauf mit Svelte als schnellstes Framework für Time To Interactive (TTI).
• Alle Teile von Solid sind unabhängig voneinander wiederverwendbar, was es möglich macht, eine Vielzahl von verschiedenen Projekttypen damit zu erstellen, und aufgrund der Einfachheit des reaktiven Systems von Solid ist es sehr einfach, jedes andere Zustandssystem in Solid-Komponenten einzuhängen.

Solid Schwächen

• Da es sich um ein noch sehr neues Framework handelt, gibt es nur wenige Solid-Bibliotheken, -Tools und -Ressourcen von Drittanbietern.
• In Solid sind alle Rendering- und DOM-Interaktionen ein Nebeneffekt des reaktiven Systems. Das bedeutet, dass es zwar möglich ist, Dinge wie Exit-Animationen ähnlich wie bei React oder Vue mit dem reaktiven Lebenszyklus zu behandeln, aber das Framework verfolgt das DOM nicht wirklich auf eine Weise, die außerhalb der eigenen Referenzen des Benutzers zugänglich ist.
• Solid macht weniger Diffing als jede andere Bibliothek da draußen, was ein Grund ist, warum es so leistungsfähig ist. Die Kehrseite der Medaille ist, dass Solid in den wenigen Fällen, in denen Diffing tatsächlich wertvoll ist, wie Hot Module Replacement (HMR), das Arbeiten erschweren kann.
• Da Solid deklarativ ist, wird das Debuggen zu einer größeren Herausforderung. Templates sind leicht zu debuggen, da Solid alle DOM-Operationen offen legt, so dass alle Probleme erkannt werden können. Aber Fehler, die an anderer Stelle auftreten, was die meisten Fehler sind, können schwer zu finden sein.

Angular, Vue, React, Preact, Ember, Svelte oder Solid? Welche sollten Sie für Ihr nächstes JavaScript-Projekt wählen?

Was sollten Sie für die Entwicklung Ihrer App wählen? Angular, Vue, React, Preact, Ember, Svelte oder Solid? 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. Evan, der Macher von Vue, hat gesagt, dass er Vue zwischen React und Angular einordnet, was den Kompromiss zwischen Konsistenz und Flexibilität angeht.
• 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.
• Ihre Lösung ist SolidJS, wenn Geschwindigkeit und Leichtgewichtigkeit Ihre Priorität sind und Sie mit einem vielversprechenden neuen Framework experimentieren möchten. SPAs sind ein großartiges Testfeld für Solid, ebenso wie Web-Widgets.

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 – Münchner Consultants für Webentwicklung

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.

Krusche & Company ist ein in München ansässiges Nearshore-IT-Outsourcing-Unternehmen, das sich auf Webentwicklung, DevOps und Cloud spezialisiert hat – mit über 20-jähriger Erfahrung. Wir unterstützen und ermöglichen die digitalen Ziele unserer Partner, von professionellen Enterprise-Portalen für einige der bekanntesten europäischen Marken bis hin zu schlanken MVPs für vielversprechende Start-ups sowie allem, was dazwischen liegt.

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.