3 Bestes JavaScript Framework / Bibliothek für die Front-End-Entwicklung

JavaScript hat im Laufe der Jahre zunehmend an Popularität gewonnen, die Community wächst rasant und Entwickler entwickeln und entwickeln täglich Tools für die Sprache.

Dies macht es überwältigend, zu entscheiden, welches Tool / Framework / welche Bibliothek für eine bestimmte Aufgabe verwendet werden soll, da es immer mehrere Optionen für buchstäblich alles gibt, was Sie in JavaScript tun möchten. Zunächst ist es immer noch schwierig zu entscheiden, welche Bibliothek oder Rahmen lernen.

Dieser Artikel konzentriert sich auf die Entmystifizierung des Vorteils der Verwendung mehrerer JavaScript-Front-End-Frameworks / -Bibliotheken und gibt letztendlich ein klareres Bild davon. Es soll den Entscheidungsprozess für die Auswahl erleichtern.

React

Reagieren ist kein Framework, sondern eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.

Es ist Open Source und wird von Facebook und einer Community einzelner Entwickler gepflegt. React wurde ursprünglich von geschrieben jordan walke als internes Tool bei Facebook. Es war später Open Source und wurde 2013 der Öffentlichkeit zugänglich gemacht. Danach hat es eine breite Popularität erlangt.

Einige der Funktionen umfassen Folgendes.

Bietet reaktive, anpassbare und wiederverwendbare Komponenten
Verwendet ein virtuelles DOM
Extrem schnell
Komponentenbasiert
Einweg-Datenbindung
Wiederverwendbarkeit des Codes
Dahinter steckt ein lebendiges, florierendes Ökosystem
Bequeme Handhabung der Zustandsverwaltung

Installation / Verwendung

React kann auf zwei verschiedene Arten im Frontend verwendet werden.

Über CDN
Verwenden von Node.JS

Über CDN

Sie können sich auf ihre beziehen offizielle Seite um einen Skript-Link zu erhalten, den Sie in das Header-Tag Ihres HTML-Markups aufnehmen können. Wählen Sie die Links nach Zweck aus.

Wenn Sie beispielsweise in einer Entwicklungsumgebung verwenden, gilt Folgendes:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Und für die Produktion

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Verwenden von Node.JS

Ich gehe davon aus, dass Sie NodeJS bereits installiert haben. Geben Sie zum Installieren von React einfach den folgenden Befehl ein.

sudo npm i -g create-react-app --save-dev

Geben Sie nach Abschluss der Installation den folgenden Befehl ein

create-react-app my-first-react-application

Mit dem obigen Befehl werden alle erforderlichen Bibliotheken installiert, die für die ordnungsgemäße Ausführung von React erforderlich sind. Dazu gehören ein Entwicklungsserver, ein Webpack und ein Babel.

Navigieren Sie zu der my-first-react-application Ordner und führen Sie den folgenden Befehl aus

npm start

Mit dem obigen Befehl wird ein Entwicklungsserver auf Port 3000 gestartet. Wenn Sie dann über Port 3000 auf Ihre Server-IP zugreifen, sollten Sie Folgendes sehen.

React wird von einer Reihe großer Unternehmen immer beliebter und bedarfsgerechter. Wenn Sie am Lernen interessiert sind, würde ich empfehlen, dies zu nehmen kompletter Kurs.

Vue.js

Vue.js ist ein fortschrittliches JavaScript-Framework zum Erstellen interaktiver Benutzeroberflächen und einseitiger Anwendungen. Es ist ein Modellansichts-Framework mit der Kernbibliothek, das sich auf die Ansichtsebene konzentriert. Vue ist beliebt, da es die Möglichkeit bietet, Anwendungen mit nur einer Seite zu betreiben. Im Gegensatz zu React verwendet Vue unformatiertes HTML und nicht JSX.

Vue.js ist Open Source und wurde ursprünglich von erstellt Evan Du und im Februar 2014 veröffentlicht. Im Folgenden sind einige der Funktionen aufgeführt.

Es bietet reaktive und zusammensetzbare Ansichtskomponenten.
Verwendet ein virtuelles DOM
Konzentriert sich weiterhin auf die Kernbibliothek (z. B. Routing und Statusverwaltung).
Das Scoping in CSS wird ohne CSS-In-Js behandelt
Einwegbindung innerhalb von Komponenten.
Unterstützung für wichtige Addons
Wiederverwendbarkeit des Codes

Installation / Verwendung

Sie können Vue.js im Frontend entweder über das CDN oder mit Node.js verwenden

So verwenden Sie die CDN Wegkönnen Sie das folgende Skript zu Ihrem HTML-Seitenkopf hinzufügen.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Das obige Skript eignet sich für Entwicklungszwecke, da es eine wichtige Konsolenmeldung enthält. Für die Produktion sollten Sie jedoch die folgende verwenden.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Und zu Verwendung mit Nodejskönnen Sie mit installieren npm Befehl.

npm install vue

Ich rate Ihnen dringend, den offiziellen Vue JS zu lesen Dokumentation um mehr zu erfahren oder diesen Weg einzuschlagen.

Angular

Angular ist ein strukturelles JavaScript-Framework für dynamische Seiten. Es ermöglicht die Verwendung von HTML als Vorlagensprache und die Verwendung von HTML-Syntax, um Anwendungskomponenten klar und präzise auszudrücken. Es ist ein Open-Source-Projekt, das von Google und anderen Mitwirkenden gepflegt wird.

Installation

Stellen Sie sicher, dass die neuesten Nodejs installiert sind. Als erstes müssen wir das Angular CLI-Tool installieren.

npm install -g @angular/cli

Nach der Installation können wir mit dem folgenden Befehl ein neues Projekt erstellen.

ng new my-first-angular-app

Folgen Sie den Anweisungen auf dem Bildschirm. Dies generiert einige der Dateien und Ordner und verwendet die npm Modul zum Herunterladen von Bibliotheken von Drittanbietern, die für die ordnungsgemäße Ausführung von Angular erforderlich sind.

Führen Sie zum Starten der neu erstellten Anwendung den folgenden Befehl im Ordner "apps" aus.

ng server

Dadurch sollte der Server an Port 4200 automatisch gestartet werden.

[root@lab my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

Conclusion

Was Sie also lernen möchten, ist eher eine persönliche Präferenz als eine „bessere“ Sache.

Alle oben aufgeführten Frameworks / Bibliotheken sind großartig. Hier ist eine kurze Zusammenfassung;

Sie sollten Angular lernen, wenn Sie ein Framework möchten, auf das Sie sich verlassen möchten, ohne sich mit externen Abhängigkeiten befassen zu müssen.
Sie sollten React lernen, wenn Sie eine schnelle PWA-Anwendung für einzelne Seiten erstellen möchten und sich mit JSX auskennen.
React hat aufgrund seiner großen Community die lebendigste Community und mehr Beschäftigungsmöglichkeiten.
Die Reaktion ist relativ einfach.
React ist hochgradig anpassbar und behandelt jedes Teil der Benutzeroberfläche als Komponente.
Vue hat die gleichen Vorteile wie React, jedoch ohne JSX.
Der Arbeitsmarkt für Vue wächst stetig.

Hier ist ein Diagramm zu Google Trends, das einen Vergleich der Beliebtheitsrate der drei zeigt.