Der Krieg der JavaScript-Frameworks ist vorbei

Und es gibt nur einen einzigen Sieger.

Die Teilnehmer: Der Krieg zwischen den Frameworks ist ein heißes Thema in der JS-Community. Backbone, Sencha und andere sind verschwunden. jQuery hat überraschenderweise immer noch eine große Community. Es gab auch Kandidaten wie Angular, bei denen es nicht gut lief.

jQuery: der älteste Teilnehmer. Es wurde beliebt, weil es Browser-Kompatibilitätsprobleme behob. Aber Anwendungen ließen sich damit nur schwer skalieren. Heute ist es nicht mehr Mainstream und nicht die beste Wahl.

AngularJS: befindet sich bereits im LTS-Modus und wurde ausgemustert. Es war ein großer Sprung im Framework-Ökosystem, und viele vermissen es. Es wird nicht mehr gepflegt und ist daher kein Teilnehmer mehr.

Angular:

• Entstand, um mit React zu konkurrieren. Wegen der Performance- und Robustheitsprobleme von AngularJS beneideten viele Programmierer React. Angular versuchte, AngularJS zu modernisieren und die Verbesserungen von ES6 zu nutzen, um mit React mitzuhalten.
• Die steile Lernkurve war die größte Hürde. Es erforderte viele Konzepte. Es erbte die Lernkurve von AngularJS, brachte aber neue Schwierigkeiten wie RxJS oder hierarchische Dependency Injection (DI) mit sich.
• Eine weitere Sorge war, dass viele Versprechen nicht eingehalten wurden. Zum Beispiel konnte man mit V2 zwar leicht Server-Side Rendering (SSR)-Seiten erstellen, doch Stand 24.02.2022 funktionieren sie nicht ohne JS.
• Das größte Problem sind Fragmentierung und Versions-Upgrades. Versions-Upgrades sind so schwierig, dass Nutzer das Risiko nicht eingehen. Das zeigt sich auch in den Statistiken auf der npm-Website.

VueJS:

• Für Entwickler war es die Antwort: leistungsfähiger als AngularJS, stabiler und einfacher zu benutzen als Angular. Das Template-System von Vue ist AngularJS sehr ähnlich, bewahrt also dessen Einfachheit und gewinnt zugleich an Stärke durch React.
• Allerdings hatte VueJS in Version 1 und 2 schwerwiegende Probleme. Es konnte nicht gut mit Arrays umgehen, und die Autoren gaben JavaScript die Schuld für die falsche Wahl des Update-Algorithmus. Zudem war es von Bibliotheken wie Vuex oder Redux abhängig.
• Dieses Problem wurde in Version 3 gelöst. Dennoch passte es nicht zur Community, andere für die eigenen Fehler verantwortlich zu machen.

SvelteJS:

• Ein wachsender Konkurrent. Macht große Versprechen. Behauptet, sein Hauptvorteil liege darin, Komponenten in eine imperative Sprache zu übersetzen. Ihrer Ansicht nach ist das besser als die Deklarationen von React.
• Die Nutzung ist einfach. Allerdings sind die als Ergebnis dieser Befehlsübersetzung entstehenden Konstrukte nicht so leicht vorhersehbar, wie sie aussehen. In manchen Fällen können Änderungen nicht korrekt erkannt werden. Dann kann der Zustand beschädigt werden, sodass die View nicht richtig aktualisiert wird. Diese Probleme sorgen für viele Bedenken, weshalb sich wie einst bei VueJS kaum ein Projekt mit SvelteJS rechtfertigen lässt.

StencilJS:

• Streng genommen kein Framework. Man kann Komponenten schreiben und sie in andere Frameworks umwandeln. Derzeit ist die Umwandlung in Angular, React, Vue und Web Components möglich.
• Es wirft die Frage auf: Ist das Code, der dem anderer Frameworks ähnelt? (siehe Original)

Mitosis:

• Wahrscheinlich haben Sie noch nie davon gehört, aber genau das ist der Grund für diesen Artikel. Das neueste Framework von Misko Hevery, dem Schöpfer von Angular.
• Verfolgt dasselbe Ziel wie StencilJS. Es übersetzt Komponenten in zahlreiche Frameworks.
• Ebenso stellt es die Frage: Ist das Code, der dem anderer Frameworks ähnelt? (siehe Original)

React:

• Eines der ältesten Frameworks, seit mehr als 10 Jahren im npm-Repository. Es hat sich stark verändert, ist aber größtenteils mit früheren Versionen kompatibel geblieben. Alle Veränderungen waren Verbesserungen. Manche sagen, dass React mit Hooks ein deutlich besseres Framework geworden ist.
• Seine größte Stärke liegt nicht in Hooks oder sichtbaren Features, sondern im Gegenteil. Es setzt aktuelle JS-Standards und JSX ein. Es ist damit eigentlich kein Framework mehr. Vielleicht war es das nie. React hat sich so sehr um Standards bemüht, dass es sich aus dem Code der Nutzer selbst entfernt.

Der Sieger ist also ...

• JSX. Auch React, aber vor allem die Philosophie hinter React. React selbst ist eine Bibliothek. Es lässt sich jedoch durch viele andere Bibliotheken wie Preact oder React Native ersetzen. Bei genauerem Hinsehen sind StencilJS oder Mitosis React sehr ähnlich, und das ist kein Zufall.
• "Das beste Framework ist das Framework, das sich aus dem Code der Nutzer selbst entfernt."
• React nutzt JS und JSX intensiv. Der Code der Nutzer ist nicht an React gebunden. Derselbe Code kann auch in anderen Frameworks ohne große Änderungen funktionieren.
• Deshalb ist React ohne Zweifel der Sieger der Framework-Kriege.
• Denn es ist kein Framework im Code der Nutzer.

[piriri11]

Wichtig ist doch, Bob Onkels Aussage „Heirate kein Framework“ so konsequent wie möglich beim Schreiben von Code umzusetzen — dann kann man doch mit React, Vue oder Angular gleichermaßen mit Freude entwickeln, oder nicht?

[polygon]

Wie sind die Aussichten für marko js?
Da es von eBay unterstützt wird, habe ich mich in letzter Zeit dafür interessiert, aber im Original wird es nicht einmal erwähnt...

[minhoryang]

Bei React heißt es: „Es hat sich stark verändert, ist aber größtenteils mit früheren Versionen kompatibel“ – ich habe diese Kompatibilität allerdings nicht oft erlebt.
Bei Angular heißt es: „Fragmentierung und Versions-Upgrades“ – aber in diesem Punkt habe ich oft eine reibungslose Erfahrung gemacht.

[roxie]

Ich denke, JSX sollte nicht als Framework, sondern als Spezifikation eingeordnet werden. Ich verstehe, was du sagen willst, aber die Einleitung ist viel zu lang, obwohl sie nicht nötig wäre, und vor allem ist der Titel Clickbait. Du verwendest einen Stil, der die Qualität des Artikels selbst herabsetzt.

[xguru]

Vielen Dank für die Zusammenfassung und die guten Kommentare~! Ich glaube, solche Gespräche werden anderen sehr helfen ;)

[plastic041]

Insgesamt wirkt der Artikel auf mich ziemlich seltsam.

Zuerst zum Svelte-Teil.
Im Original steht, dass es problematisch sei, wenn beim Aktualisieren eines Arrays etwas wie array[0] += 1 verwendet wird, weil dann kein Update erfolgt. Aber selbst in der offiziellen Svelte-Dokumentation steht, dass Arrays neu zugewiesen werden müssen, damit ein Update ausgelöst wird, und in React kann man ein Array doch von vornherein auf diese Weise ebenfalls nicht aktualisieren, oder?

Auch der VueJS-Teil.
Dort werden im Vergleich mit Angular die Nachteile von Vue angesprochen, aber ich verstehe nicht, was es bringen soll, funktionierenden Angular-Code neben nicht funktionierenden Vue-Code zu stellen und dann zu sagen, dass Vue nicht besonders gut sei.

[pppqqq]

Ich halte das für eine durchaus berechtigte Kritik. Der Unterschied zwischen Neuzuweisung und Mutation ist für Einsteiger ein verwirrender Punkt, und da sowohl Svelte als auch Vue eine eigene Syntax verwenden, die JavaScript ähnelt, ist es nachvollziehbar, dass Stellen kritisiert werden, an denen das Verhalten nicht den Erwartungen entspricht.

Besonders Vue aktualisiert den Status über Proxys, wenn set ausgelöst wird. Auf den ersten Blick wirkt das einfach, aber es gibt viele Möglichkeiten, in Fallen zu tappen, deshalb kann ich die Kritik an diesem Punkt sehr gut nachvollziehen.

React ist bei solchen Problemen deutlich freier, weil ein State-Update nicht durch Neuzuweisung erfolgt, sondern explizit durch den Aufruf einer setUpdate-Funktion. Dadurch bietet es unidirektionale Updates innerhalb des JavaScript-Standards, sodass Verwechslungen wie die zwischen einer teilweisen Änderung eines Arrays und einer Neuzuweisung von vornherein kaum entstehen.

[tequila]

Das ist eher eine Randbemerkung, aber Vue 3 unterstützt solche Array-Updates reaktiv, und ich habe den Eindruck, dass der Artikel nur die alte Vue-Version einseitig heftig kritisiert und dann grob darüber hinweggeht ... ^^;; Dass so etwas in React nicht funktioniert, ist nun wirklich kein kleiner Nachteil, aber ich habe das Gefühl, dass auf solche Eigenschaften nicht richtig eingegangen wird, haha.

[tenshi]

Im Original gab es auch viele Kommentare, darunter viele, die auf verschiedene Probleme hingewiesen haben.

[riddler]

Der Abschnitt zu StencilJS und Mitosis mit der Erklärung „Ist es Code, der dem Code anderer Frameworks ähnelt?“ war verwirrend, deshalb habe ich mir den Originaltext angesehen. Offenbar wird dort gefragt, ob der in diesen beiden Frameworks verwendete Code nicht so aussieht, als hätte man ihn schon in anderen Frameworks gesehen.

Vermutlich war gemeint, dass die Schreibweise des Codes der von React ähnelt.

[jjpark78]

Die Bewertung von VueJS ist wirklich zu hart..

Von der Abhängigkeit von Redux ist React schließlich auch keineswegs völlig frei..

Gemessen an der Nutzerbasis stimmt es zwar, dass React mit großem Abstand auf Platz 1 liegt,

aber aus technischer Sicht kann man es nicht als ein Projekt bezeichnen, das schlechter als React ist.

[cckn1985]

Geht es bei dem Punkt, der hier vor allem zu VueJs angesprochen wird, nicht eher um die „Haltung, die Verantwortung für die von ihnen selbst verursachten Probleme auf JS abzuwälzen“, als um die Abhängigkeit von externen Bibliotheken?

Ich denke, es stimmt tatsächlich, dass die öffentliche Meinung zu vueJS nicht besonders gut ist.

Wenn Sie den Haupttext lesen, ist der Teil, in dem die Abhängigkeit von Vuex und Redux erwähnt wird, so zu verstehen, dass zur Lösung der in VueJS 2 entstandenen Probleme Bibliotheken wie Vuex und Redux praktisch „unverzichtbar“ waren.

[jjpark78]

Das steht zwar auch schon in mehreren Kommentaren zum Original,

aber wenn die Komplexität zunimmt, werden bei Vue wie auch bei React State-Management-/Caching-Bibliotheken wie Redux alle zur „Pflicht“.

Stimmt, beim Original zu VueJS ist das ein Nachteil, und bei React wurde das „absichtlich“ nicht erwähnt.

Das Verhalten der Community ist aus meiner Sicht nicht besonders wichtig..

[road4one]

Bei React ist Redux nicht zwingend erforderlich. Man kann den State auch mit der Context API oder useReducer verwalten. Ich finde allerdings nicht, dass das ein Argument dafür ist, dass React besser als Vue wäre.

[cckn1985]

Ja, haha, insgesamt scheint das kein besonders guter Artikel zu sein.

Der Autor hat sein Fazit offenbar schon vorher festgelegt und macht andere Frameworks schlecht, um genau zu diesem Schluss zu kommen.