Jetzt ist der Markt mit einer großen Anzahl hervorragender Front-End-Front-Rahmen mit jeweils eigenen Vorzügen gefüllt. Es ist wirklich schwer zu wählen, welches Rahmen zu lernen ist oder welches Framework für Ihr nächstes Projekt am besten ist.
Dieser Artikel wird die fünf beliebtesten Front-End-JavaScript-Frameworks vergleichen, um einen hochrangigen Überblick über ihre Funktionen, Tools, Lernkurven und andere Vor- und Nachteile zu bieten.
Natürlich kann ich Ihnen nicht sagen, welches Framework "am besten" ist: Es hängt von Ihren subjektiven Gefühlen sowie von Ihrer aktuellen Ebene der JavaScript -Erfahrung und der Art der entwickelten Anwendung ab. Ich werde Sie jedoch schnell über die wichtigsten Konkurrenten informieren und Ihnen helfen, fundierte Entscheidungen darüber zu treffen, welchen Rahmen Sie für ein detailliertes Lernen wählen sollen.
Popularität wird auf der Grundlage der Framework -Nutzung in der JavaScript -Statusumfrage 2020 ermittelt. Die Umfrage hatte 23.765 Befragte, und die Wettbewerber wurden wie folgt eingestuft:
Ich habe in derselben Umfrage auch das "Rahmenbewusstsein" betrachtet:
Ich habe diese Ergebnisse auch mit der Rahmenverwendung in der Survey 2020 Stack Overflow Developer-Umfrage überprüft. Die Umfrage mit insgesamt 65.000 teilnehmenden Befragten stimmte im Wesentlichen mit den Ergebnissen der JavaScript-Statusumfrage überein-obwohl sie leider nicht zwischen Front-End- und Back-End-Frameworks unterschieden wurde.
Natürlich gibt es viele andere Metriken, auf die referenziert werden kann, z. Wenn Sie einige dieser Metriken kennenlernen möchten (zumindest für die drei besten Frameworks), lesen Sie bitte diesen Github -Gist.
, um den Vergleich dieser Frameworks interaktiv zu betrachten, siehe dieses Diagramm von NPMTrends.
Das kritischste Problem ist, dass sich das beliebteste Rahmen (React) in der Liste als "Bibliothek" definiert.
Ich möchte nicht in dieses Problem eingehen, da es bereits vollständige Artikel gibt, die die Unterschiede zwischen Frameworks und Bibliotheken erklären. In diesem Artikel werde ich die folgende Definition von Martin Fowler verwenden:
Bibliothek ist im Wesentlichen eine Reihe von Funktionen, die aufgerufen werden können und in der Regel heute in Klassen organisiert werden. Jeder Anruf funktioniert und gibt die Kontrolle an den Kunden zurück.
Der Rahmen verkörpert ein abstraktes Design mit mehr Verhaltensweisen, die in eingebaut sind. Um es zu verwenden, müssen Sie Ihr Verhalten in verschiedene Stellen im Framework einfügen, indem Sie Ihre eigene Klasse unterkressen oder einfügen. Der Code des Frameworks ruft dann Ihren Code an diesen Punkten an.
Meiner Meinung nach entspricht React eher dem Verhalten des Frameworks als der Bibliothek. Obwohl es technisch kein Framework ist, übernehmen Entwickler häufig viele Tools und Pakete aus ihrem Ökosystem, damit es funktioniert.
Der Hauptzweck von
React ist es, interaktive Benutzeroberflächen aus wiederverwendbaren Komponenten zu kombinieren. Es verwendet JSX (eine Syntaxerweiterung für JavaScript) für Vorlagen und implementiert ein Einweg-Datenflussmodell, um Komponenten mit Daten zu füllen. Immer wenn sich Komponentendaten ändert, verwendet React sein virtuelles DOM, um die Seite schnell und effizient zu aktualisieren.Entwicklertools sind sehr nützlich. Das React -Team hat eine CLI (Create React App erstellen) schnell und einfach neue Projekte sowie Entwickler -Tools -Erweiterungen für Chrome und Firefox errichtet. Es gibt viele Pakete von Drittanbietern, die verschiedene Aufgaben (wie Routing, Handhabungsformulare und Animationen) sowie einige auf React-basierte Frameworks wie Next.js und Gatsby erledigen können.
React folgt dem Konzept "einmal lernen, irgendwo schreiben". Es kann React Native in mobile Antriebsanwendungen verwenden und auf der Serverseite mit dem Knoten rendern. Dies bedeutet eine hervorragende SEO -Unterstützung, die mit der Einführung von Serverkomponenten immer besser und besser wird.
Eine der Hauptkritikpunkte von React ist, dass es zu uneingeschränkt ist: Es konzentriert sich nur auf die Sichtweise der Anwendung und überlässt alles andere dem Entwickler. Einige Menschen mögen diese Freiheit, aber andere - insbesondere neue Entwickler - können von diesem ermutigten unstrukturierten Kodierungsansatz überwältigt sein.
reagiert hat eine moderate Lernkurve. Es fördert die Verwendung verschiedener funktionaler Programmierparadigmen wie Invarianz und reinen Funktionen, was bedeutet, dass Entwickler diese Konzepte besser beherrschen, bevor sie versuchen, etwas Ernstes aufzubauen.
Wenn Sie mit dem nicht eingeschränkten Ansatz von React zufrieden sind und den größten Teil des Entwicklungsprozesses Entwicklern überlassen, ist es eine gute Wahl für datengesteuerte Anwendungen in jeder Größe.
Um die Leistungsprobleme und die Herausforderung zu lösen, große JavaScript -Anwendungen aufzubauen, hat Google AngularJs von Grund auf neu geschrieben und Angular 2 (jetzt kurz winkel) im Jahr 2016 veröffentlicht. Es gibt keinen einfachen Migrationspfad zwischen diesen beiden Versionen, daher werden AngularJs und Winkel zu zwei getrennten Frameworks. AngularJS wurde nun für die Wartung eingestellt und sollte nicht für neue Projekte verwendet werden.
Was Angular betrifft, ist es ein Schwergewicht in der Front-End-Framework-Welt. Unternehmen wie Google und Microsoft verwenden es in Produktionsumgebungen und wurden definitiv vollständig getestet. Es stehen auch viele Ressourcen online zur Verfügung (z. B. das Tutorial der hervorragenden Tour of Heroes), und es gibt auch viele Fragen zu Angular on Stack Overflow.
Im Gegensatz zu React, das nur Ansichtsschichten behandelt, bietet Angular eine vollständige Lösung zum Erstellen von Client-Anwendungen. Winkelkomponenten können die bidirektionale Datenbindung implementieren, sodass sie Ereignisse gleichzeitig anhören und Werte zwischen übergeordneten und untergeordneten Komponenten aktualisieren können. Vorlagen sind HTML -Snippets, mit denen die Verwendung einer speziellen Syntax viele der Merkmale von Angular nutzen kann. TypeScript ist die primäre Sprache für die Winkelentwicklung und macht diesen Rahmen besonders für Anwendungen auf Unternehmensebene geeignet.
Das Tool ist sehr nützlich. Angular bietet eine hoch polierte CLI, um Winkelanwendungen zu initialisieren, zu entwickeln, aufzubauen und aufrechtzuerhalten. Chrome- und Firefox Dev Tools -Erweiterungen stehen ebenfalls zur Verfügung, um die Debugg -Anwendungen zu debuggen. Angular liefert nativ Lösungen für viele häufige Aufgaben wie Formen und Routing, aber es gibt immer noch ein reiches Ökosystem von Bibliotheken von Drittanbietern.
Meiner Meinung nach ist Angulars Lernkurve die steilste aller hier aufgeführten Frameworks. Entwickler müssen mit TypeScript sowie Konzepten wie Dekorateure und Abhängigkeitsinjektion vertraut sein, um den Rahmen effektiv zu verwenden. Daher ist es für neue Entwickler nicht geeignet. Stattdessen ist es besser geeignet, um große Anwendungen zu erstellen.
Wenn Sie ein umfassendes Verständnis des Unterschieds zwischen React und Winkel haben möchten, siehe "React vs. Angular: eingehender Vergleich".
Bitte beachten Sie, dass diese Statistiken für VUE V2 gelten. Version 3 ist verfügbar, muss jedoch als Vue@Next installiert werden.
Der dritte Platz in unserer Liste ist Vue.js, ein Model-View-View-Modell (MVVM) Front-End-Frontwork zum Erstellen von Benutzeroberflächen und einzelner Seitenanwendungen. Es wurde von You Yuxi geschrieben und wurde erstmals 2014 veröffentlicht. Vue hat eine sehr loyale Entwicklergemeinschaft (zum Beispiel hat es mehr Github -Sterne als React), was wahrscheinlich daran liegt, dass er die von AngularJs hinterlassene Lücke füllt, nachdem sie in Angular umgeschrieben wurde.
vue wird von etwa 20 Kernteammitgliedern entwickelt und gepflegt, und obwohl es nicht direkt vom Internetgiganten unterstützt wird, nutzen Unternehmen wie Alibaba, Gitlab und Adobe es in Produktionsumgebungen. Die Dokumentation von Vue ist wohl das Beste aller Frameworks, und sein Forum ist auch eine großartige Ressource, um Hilfe bei Codeproblemen zu erhalten. Vue ist auch in der PHP -Welt beliebt und im Rahmen des Laravel -Frameworks erhältlich.
Einer der Verkaufspunkte von Vue ist, dass es von Anfang an nach und nach angenommen wurde. Dies bedeutet, dass Sie reguläre Webseiten Vue hinzufügen können, um seine Funktionalität zu verbessern, oder Sie können alles aussehen, um eine vollständige einseitige App zu erstellen. VUE.JS verwendet eine HTML-basierte Vorlagensyntax, mit der Sie die Eigenschaften einfach an das zugrunde liegende Datenmodell binden können. Es bietet auch eine einzelne Dateikomponente, die Vorlagen, JavaScript -Code und Scoped CSS in derselben Datei aufbewahrt.
Die Werkzeuge um Vue sind großartig. Es gibt eine offizielle CLI, um Vue -Anwendungen zu erstellen und zu entwickeln, und es gibt eine Entwickler -Tool -Erweiterung für Chrome und Firefox, um Debuggen zu unterstützen. Im scharfen Gegensatz zu React bietet VUE ein offizielles Paket für Routing und staatliches Management, das einen angenehmen Standardisierungsansatz bietet. Es gibt auch eine breite Palette von Tools von Drittanbietern sowie auf VUE-basierte Frameworks wie Nuxt.js und Gridsome (Vues Reaktion auf Reacts Next.js und Gatsby).
Die Barriere für die Verwendung von VUE ist niedrig, teilweise, weil es einen inkrementellen Ansatz für das Erstellen von Anwendungen verwendet, teilweise, weil sie auf HTML, CSS und JavaScript basiert - Techniken, die jedem Entwickler vertraut sein sollten.
vue ist eine ausgezeichnete Wahl für Anwendungen aller Größen. Es eignet sich für Entwickler mit weniger Erfahrung sowie für diejenigen, die es vorziehen, mehr Struktur und Anleitung aus dem Rahmen zu erhalten.
svelte konvertiert Ihre Anwendung beim Erstellen in einen idealen JavaScript -Code, anstatt Ihren Anwendungscode zur Laufzeit zu interpretieren. Dies bedeutet, dass Sie keine Leistung für die Abstraktion des Frameworks zahlen und bei der ersten Belastung nicht bestraft werden.Mit anderen Worten, es vermeidet das Konzept des virtuellen DOM, kompiliert jedoch Ihren Code in kleine, einfache JavaScript -Module, wenn er erstellt wird, die das DOM aktualisieren, wenn sich Ihr Anwendungszustand ändert. Wie Sie sich vorstellen können, macht dies die Anwendung schneller und nimmt weniger Platz ein. Svelte stellt das Rohverarbeitungsstatusmanagement wieder her und bietet Reaktionsfähigkeit außerhalb des Box.
Leider ist das Tool momentan ein bisschen Kopfschmerzen. Zunächst wurde Sapper (ein Anwendungsrahmen, das oben auf Svelte aufgebaut ist) zum Erstellen von Selte-Anwendungen mit vordefinierten Strukturen verwendet und mit einigen erweiterten Funktionen wie Routing und serverseitigem Rendering ausgestattet. Im November 2020 kündigten die Schöpfer von Sufle jedoch an, dass Version 1.0 von Sapper nie veröffentlicht wird und dass Suflekit jetzt die einzige empfohlene Möglichkeit ist, Anwendungen mit Sufle zu erstellen. Browser-Entwickler-Werkzeuge Erweiterungen für Chrom und Firefox sowie eine Vielzahl von Drittanbietermodulen, obwohl sie weitaus weniger als ein reiferer Rahmen sind.
Während die Lernkurve von Selte sehr niedrig ist, bleibt die Community klein und hat noch nicht den gleichen Anziehungskraft wie die drei hier genannten Rahmenbedingungen gewonnen. Aber Unternehmen wie IBM und die New York Times nutzen es in Produktionsumgebungen, und es ist definitiv ein Rahmen, auf das es in den kommenden Monaten und Jahren zu beachten ist.
Svelte ist noch nicht reif genug, daher ist es perfekt für kleine Projekte. Dies ändert sich jedoch. Sveltkit befindet sich in der offenen Beta -Phase und die Gemeinschaft wächst. Obwohl Svelte momentan immer noch ein Neuling ist, sollten Sie sich auf diesen Bereich konzentrieren ...
Es ist fast ein Jahrzehnt her und stammt aus React, Vue, Sufle und allen anderen Frameworks. Das Framework war noch nie an der Spitze der Front-End-Hype-Welle, aber es ermöglicht dem Team stillschweigend, Produkte stabil und kontinuierlich zu veröffentlichen-einschließlich Qonto und Clark, die beide die 50 besten Fintech-Unternehmen in Europa im Jahr 2020 sind. 🎜>Ähnlich wie bei Angular verfolgt Ember einen umfassenderen Ansatz für die Anwendungsentwicklung und bietet alles, was Sie benötigen, um moderne Front-End-JavaScript-Anwendungen zu erstellen. Dies umfasst Routing-Lösungen, Datenschichten und ein voll ausgestattetes modernes Testwerkzeug, das standardmäßig in jede Anwendung integriert ist. Es folgt einem sechswöchigen Release-Zyklus (wenn eine neue Nebenveröffentlichung veröffentlicht wird) und ist der Stabilität verpflichtet. Dies könnte ein echter Vorteil für Entwickler sein, die Anwendungen nicht kontinuierlich neu schreiben können, um nicht durch schneller wachsende Frameworks zurückgelassen zu werden.
Eine breite Palette von Werkzeugen entstanden um Ember, von der Ember-CLI (die offizielle Art, Ember-Anwendungen zu erstellen, zu bauen, zu testen und zu bedienen) an den Ember-Inspektor (das offiziell unterstützte Browser-Add-On, mit dem Sie Ihr einchecken können Anwenden Sie das Ember -Objekt an). Es gibt auch einige Bibliotheken von Drittanbietern, und die CLI bietet ein gemeinsames Format (d. H. Ember-Addons), um sie zu verteilen.
Embers Community ist nicht so groß wie die von React, aber seine Mitglieder sind sehr aktiv und haben ein Forum und einen Discord -Server, auf dem Sie Hilfe bei Codeproblemen suchen können. Ember ist das hier aufgeführte Framework, das hier aufgeführt ist, wobei der Ansatz "Übereinkommen über die Konfiguration" verwendet wird. Diese Plus -Entwickler müssen mit fortgeschritteneren Konzepten vertraut sein - wie Serialisierer und Adapter -, um ihre Lernkurve mit moderatem bis steilem.
Ember ist möglicherweise nicht für Anfänger oder kleine Projekte geeignet. Es hat viele bewegliche Teile und bietet keine große Flexibilität, wie man Dinge baut. Aber es leuchtet beim Aufbau reichhaltiger, komplexer Front-End-Anwendungen mit dem Team.
Dies ist mein Vergleich der fünf beliebtesten Front-End-Front-End-Frontworks auf dem heutigen Markt. Obwohl dies kein umfassender Blick auf die Funktionalität jedes Frameworks ist, hoffe ich, dass Sie eine Vorstellung davon haben, welche wichtigsten Konkurrenten für Ihr nächstes Projekt richtig sind oder welche Frameworks Ihre weitere Erkundung wert sind.
Wenn Sie Fragen oder Kommentare haben, warum nicht dem SitePoint -Forum zur Diskussion beitreten?
Bei der Auswahl eines Front-End-Frameworks müssen Sie Faktoren wie Lernkurve, Community-Unterstützung, Dokumentation, Flexibilität und Leistung berücksichtigen. Wenn Sie mit der Front-End-Entwicklung nicht vertraut sind, ist die Lernkurve wichtig. Einige Frameworks sind leichter zu lernen als andere. Die Unterstützung der Gemeinschaft ist wichtig, um Hilfe zu erhalten, wenn Sie auf Probleme stoßen. Große aktive Gemeinschaften bedeuten oft mehr Ressourcen und Tutorials. Eine gute Dokumentation kann den Lernprozess reibungsloser machen. Flexibilität bezieht sich auf die Fähigkeit des Frameworks, sich an verschiedene Projektanforderungen anzupassen. Schließlich wirkt sich die Leistung auf die Geschwindigkeit und die Benutzererfahrung der Anwendung aus.
Angular ist ein leistungsstarkes und featurereiches Framework, das von Google entwickelt wurde. Es ist bekannt für seine bidirektionale Datenbindung, Abhängigkeitsinjektion und modulare Architektur. Die Lernkurve ist jedoch im Vergleich zu anderen Rahmenbedingungen steil. Es ist perfekt für große und komplexe Anwendungen.
reags wurde von Facebook entwickelt und ist bekannt für sein virtuelles DOM, was die Leistung verbessert, indem direkte Vorgänge auf dem tatsächlichen DOM minimiert werden. Es basiert auf Komponenten, was die Wiederverwendbarkeit und Wartbarkeit fördert. Es hat auch eine riesige Gemeinschaft und eine große Bibliothek.
vue ist ein progressives Framework, was bedeutet, dass Sie es Schritt für Schritt annehmen können. Es ist leicht zu lernen und hat eine einfachere Grammatik als Angular und React. Es verfügt auch über eine virtuelle DOM- und Komponenten-basierte Architektur. Es ist perfekt für kleine und mittlere Projekte.
bidirektionale Datenbindung in Angular bedeutet, dass die Ansicht diese Änderung widerspiegelt und umgekehrt. Diese Synchronisation zwischen dem Modell und der Ansicht vereinfacht den Code und verbessert die Lesbarkeit.
Das virtuelle DOM ist eine leichte Kopie des tatsächlichen DOM. Wenn eine Änderung auftritt, wird das virtuelle DOM zuerst geändert. Der Differenzalgorithmus vergleicht dann das neue virtuelle DOM mit dem alten virtuellen DOM, und nur tatsächliche Änderungen werden im realen DOM aktualisiert. Dieser Prozess verbessert die Leistung.
Angular organisiert Code in Modulen, jedes Modul, das für eine bestimmte Funktion verantwortlich ist. Diese Trennung von Bedenken erleichtert den Code leichter zu warten und zu testen. Es fördert auch die Wiederverwendbarkeit und Skalierbarkeit des Codes.
Komponentenbasierte Architektur unterteilt die Benutzeroberfläche in unabhängige wiederverwendbare Komponenten. Jede Komponente hat eine eigene Logik und kontrolliert einen Teil der Benutzeroberfläche. Dieser Ansatz fördert die Wiederverwendbarkeit, Wartbarkeit und Testbarkeit des Codes.
Große und aktive Gemeinschaften können wertvolle Ressourcen, Tutorials und helfen, Hilfe zu erhalten, wenn Sie auf Probleme stoßen. Es zeigt auch die Popularität und das Lebensdauer des Rahmens. Angular, React und Vue haben alle starke Unterstützung der Gemeinschaft.
Leistung wirkt sich direkt auf die Geschwindigkeit der Anwendung aus. Langsame Anwendungen können Benutzer frustrieren und zu höheren Absprungraten führen. Die Auswahl eines Hochleistungs-Frameworks kann daher die Benutzererfahrung verbessern.
Das obige ist der detaillierte Inhalt vonDie 5 beliebtesten Front-End-Front-End-Frontworks verglichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Download-Adresse der offiziellen Website der Yiou Exchange-App
Python konfiguriert Umgebungsvariablen
IIS unerwarteter Fehler 0x8ffe2740 Lösung
So verwenden Sie Findbugs
So verbergen Sie den Laufwerksbuchstaben
So beheben Sie den 504-Fehler im CDN
Was tun, wenn das Laden der DLL fehlschlägt?
So ändern Sie das Passwort in MySQL
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
