Agile Software Entwicklung

Part 2: Web Entwicklungs-Frameworks React JS, Vue JS und Angular JS im Vergleich- Software- Ökosystem und gemeinsame Technologien

by Moweex Admin 21 Jul 22 6 minutes

[Sassy_Social_Share]

Ökosystem 

Open-Source-Pakete sparen wertvolle Zeit bei der Entwicklung von Front-End- Anwendungen. Darüber hinaus sind sie oft besser als benutzerdefinierte Komponenten und Pakete da sie erprobt und getestet sind. Es ist wichtig, auf die Verfügbarkeit von gebrauchsfertigen Komponenten, Themes und anderen Tools zu achten, die die Einstellungen neuer Funktionen erleichtern.

React JS

Viele Front-End-Anwendungen sind auf eine globale Zustandsverwaltung angewiesen, um Informationen zu speichern, z.B. wer angemeldet ist sowie andere Benutzereinstellungen. Das beliebteste Projekt für JS-Zustandsmanagement ist Redux. Die meisten Entwickler verwenden, die offiziellen React-Bindings für Redux, die vom Redux-Team gepflegt werden. Aufgrund der Popularität von REact ist es extrem einfach, Eingabekomponenten und gebrauchsfertige Elemente zu finden. sie sind alle nur eine Google- oder GitHub-suche entfernt. Das React-Ökosystem umfasst auch React Native, mit dem Sie native iOS- und Android-Apps aus einer einzigen in React geschriebenen Codebasis erstellen können. React kann also eine gute Wahl für die Entwicklung mobilder Aoos mit Werbetechnologien sein. React ist Teil des MERN-Stacks, der aus MongoDB, ExpressJS, React und NodeJS besteht. Das Tolle an dieser Kombination ist, dass eine einzige Sprache – JS – die gesamte Anwendung steuert.

Vue JS

Auch wenn Redux in VUe verwendet werden kann, gibt es keine offiziellen Bindungen. Aber das sollte Sie nicht beunruhigen, denn Vuex ist die offizielle State-Management-Bibiliothek, die speziell für Vue-Anwendungen entwickelt wurde. Abgesehen davon, dass sie sich sehr gut in Vue integriert, ist sie mit dem Vue-Entwickler-Tools leicht zu debuggen. In den frühen Tagen von Vue war es schwieriger, fertige Komponenten zu finden. Seit die Community gewachsen ist, gibt es eine breite Palette von eingabekomponenten und fortgeschrittenen Elementen, die zur Beschleunigung der Frontend-Entwicklung verwendet werden können. Für die benutzerdefinierte, agile Softwareentwicklung von mobilen Anwendungen gibt es ein neues Projekt namens Weex. Weex wird von Alibaba entwickelt und verwendet, ist aber nicht so aufgereift und leistungsstark wie React Natiev. Da das Projekt in der Regel in China entwickelt und verwendet wird, ist es auch schwieriger Dokumentationen und Problemlösungen in englischer Sprache zu finden. Vue lässt sich gut mit Lavarel integrieren, weshalb sie oft zusammen verwendet werden. Lavarel bietet eine vollständiges  JS- und CSS-Framework, das die Verwendung von Vue in neuen Projekten ermöglicht.

AngularJS

Für die Zustandsverwaltung in AngularJS kann das NGRx-Projekt verwendet werden. Es wurde von Redux inspiriert, ist aber speziell für AngularJS konzipiert. Wie bei Vue und React gibt es viele gebrauchsfertige Komponenten, die Sie in Ihre Projekte importieren können. Der kleine Unterschied von AngularJS ist, dass es viele offizielle Komponenten im AngularJS Material Projekt gibt. Dies ist ein offizielles Projekt von Google, das Material-Design-Komponenten für AngularJS-Anwendungen bereitstellt. Mit NativeScript können Sue plattformübergreifende mobile Anwendungen in AngularJS erstellen. Es unterstützt auch auch Vue, aber die Unterstützung für AngularJS ist ausgereifter. AngularJS ist ein Teil des bekannten MEAN-Stacks, der AngularJS mit MongoDB, ExpressJS und NodeJS kombiniert. Ähnlich wie der MERN-Stack setzt er sowohl im Frontend als auch im Backend vollständig auf JS.

Gemeinsame Technologien 

AngularJS, Reat und Vue können alle für die benutzerdefinierte agiele Softwareentwicklung von Progressive Web Aoos (PWAs) verwendet werden. PWAs sind keine mobilen Apps, sondern Web-Apps, die Smartphone-Nutzer als Verknüpfung zu ihrem Startbildschirm hinzufügen können und die ein ähnliches Erscheinungsbild wie native mobile Apps bieten. Sie können auch Premium-Vorlagen und vorgefertigte Aoos für jedes Framework finden, aber AngularJS und React haben mehr Premium-Optionen zur Verfügung als Vue.

Performance

Bei der Auswahl eines Frameworks eines Frameworks oder einer Bibliothek muss auch die Leistung berücksichtigt werden. In vielen Fällen muss man sich über die Leistung keine Gedanken machen, insbesondere nicht bei der Entwicklung von Frontend-Schnittstellen für kleinere Projekte. Je umfangreicher und komplexer ein Projekt jedoch wird, desdo mehr kann (und wird) die Leistung zu einem Problem werden. Es ist wichtig zu beachten, dass die Qualität der Frontend-Entwicklung und Einhaltung von Best Practices für die Web-Performance wichtiger sind als die Wahl des Frameworks. Da es jedoch einige Leistungskennzahlen und – unterschiede gibt, werden diese im folgenden Artikel näher betrachtet.

JavaScript framework benchmark: Angular vs. React vs. Vue

Die Ergebnisse des JS-Framework-Benchmarks zeigen, dass alle Frameworks bei den meistens Benchmarks, z.B. beim Erstellen oder Anhängen von Zeilen in einer Tabelle recht gut abschneiden. Vue ist bei der Auswahl von Zeilen deutlich langsamer als AngularJS und React. Auf der anderen Seite sind AngularHS und React nicht sehr effizient beim Austausch von Zeilen. Dies sind die einzig signifikaten Unterschiede in den Rendering-Benchmarks- und in den meisten Fällen werden sie keine sichtbaren Ergenisse produzieren. Da das Auswählen von Zeilen eine häufigere Funktionalität ist als das Austauschen von Zeilen, liegt Vue in diesem Benchmark auf dem dritten Platz hinter AngularJS und React, die sich den ersten Platz teilen.Was den Arbeitsspeicher und die Boot-Zeit angeht schneiden React und Vue sehr gzt ab, aber AngularJS ist etwas langsamer. AngularJS benötigt bis zu 150ms, um ein einfaches Skript zu straten, und benötigt mehr Arbeitsspeicher bei der Ausführung.

Perf Track: Angular vs. React vs. Vue

Perf Track von Google Chrome Labs zeigt Produktionsdaten von Tausenden von Websites. Diese Statistiken werden durch viele andere Dinge beeinflusst und nicht nur durch das gewählte Framework, aber sehen wir uns die Zahlen an.

Delay on first input

Bei allen drei Frameworks liegen mehr als 80 Prozent der Websites innerhalb des akzeptablen Bereichs für die Erstzugriffsverzögerung, die angibt, wie lange es dauert, bis der Benutzer mit der Seite interagiert.

JavaScript bytes

Die mit Abstand schlanksten Anwendungen sind die, die mit Vue entwickelt wurden. 68 Prozent der Vue-Anwendungen benötigen weniger als 1 MB an JS. AngularJS- und React-Anwendungen weisen dagegen tendenziell größere Codegrößen auf.

Wie man diese Kennzahlen nutzt 

Aus diesen Zahlen lässt sich ein Trend ablesen, aber man sollte nicht zu schnell Schlussfolgerungen ziehen. Die letzte Zahl könnte beispielsweise dadurch erklärt werden, dass Vue für die benutzerdefinierte, agile Softwareentwicklung von eher leichtgewichtigen Anwendungen verwendet wird, während AngularJS für größere Projekte eingesetzt wird. Die Statistiken können helfen, eine gute Entscheidung zu treffen, aber sie können nicht als Beweis dafür dienen, dass ein Framework schneller oder besser ist als ein anderes.

Erweiterte Funktionen 

Für fortgeschrittene Anwendungne sollte das verwendete Fronend-Framework in der Lage sein, einige Aufgaben auszuführen, die die Leistung verbessern und besser skalierbar sind. 

Zwei Schlüsseltechnologien sind serverseitiges Rendering (SSR) Virtualisierung.

React JS

React unterstützt das serverseitige Rendering mit dem offiziellen Paket ReactDOMServer. Für die Virtualisierung kann ein beliebiges Drittanbieter-Tool namens React Virtualized verwendet werden.

Vue JS

Serverseitiges Rendering wird auch in Vue mit dem offiziellen SSR-Paket unterstützt. DArüber hinaus kann auch das Nuxt.js-Framework verwendet werden, das auf Vue aufbaut und SSR unterstützt. Die Virtualisierungsoptionen in Vue sind leider nicht so stark. Vue Virtual Scroll List ist die beste Lösung für virtuelles Scrollen, aber es ist ein bisschen “buggy” und nicht so stabil wie die Optionen für React und AngularJS.

AngularJS

AngularJS hhat das offizielle AngularJS Universal-Paket für SSR und eine offizielle Komponente für virtuelles Scrollen und effizientes Rendern großer Listen.

[ratemypost]
Moweex Admin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor. Header one Header two Header three Header.

Show all articles by Moweex Admin
Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments