JavaScript hat im Laufe der Zeit eine bemerkenswerte Zunahme seiner Beliebtheit erfahren. Die dazugehörige Community wächst stetig, und Entwickler kreieren täglich neue Werkzeuge und Ressourcen für diese Programmiersprache.
Die Fülle an Optionen kann überwältigend sein, insbesondere wenn es darum geht, das passende Tool, Framework oder Bibliothek für eine spezifische Aufgabe auszuwählen. Für nahezu jede Aufgabe in JavaScript gibt es mehrere Möglichkeiten, und gerade am Anfang kann die Entscheidung, welche Bibliothek oder welches Framework man lernen soll, eine Herausforderung darstellen.
Dieser Artikel hat zum Ziel, die Vorzüge der Nutzung verschiedener JavaScript-Frontend-Frameworks und Bibliotheken zu beleuchten und ein klareres Gesamtbild zu vermitteln. Er soll den Entscheidungsprozess bei der Auswahl des geeigneten Tools vereinfachen.
React
React ist keine Framework, sondern eine JavaScript-Bibliothek, die speziell für die Entwicklung von Benutzeroberflächen konzipiert wurde.
Sie ist Open Source und wird von Facebook sowie einer Gemeinschaft unabhängiger Entwickler gepflegt. Jordan Walke entwickelte React ursprünglich als internes Werkzeug für Facebook. Später wurde sie Open Source und im Jahr 2013 für die Öffentlichkeit freigegeben. Seitdem hat sie eine enorme Popularität erlangt.
Einige der Hauptmerkmale von React sind:
- Bereitstellung reaktiver, konfigurierbarer und wiederverwendbarer Komponenten
- Verwendung eines virtuellen DOMs
- Hohe Ausführungsgeschwindigkeit
- Komponentenbasierte Architektur
- Unidirektionale Datenbindung
- Wiederverwendbarkeit von Code
- Ein aktives und dynamisches Ökosystem
- Einfache Handhabung der Zustandsverwaltung
Installation und Verwendung
React kann im Frontend auf zwei unterschiedliche Arten eingesetzt werden.
Via CDN
Auf der offiziellen Seite finden Sie einen Skriptlink, den Sie in das Header-Tag Ihres HTML-Markups integrieren können. Wählen Sie die entsprechenden Links je nach Einsatzbereich.
Für die Entwicklungsumgebung:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
Für den Produktiveinsatz:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
Verwendung von Node.js
Für die Installation von React wird vorausgesetzt, dass Node.js bereits installiert ist. Geben Sie folgenden Befehl ein, um React zu installieren:
sudo npm i -g create-react-app –save-dev
Nach Abschluss der Installation geben Sie folgenden Befehl ein:
create-react-app meine-erste-react-applikation
Dieser Befehl installiert alle notwendigen Bibliotheken für die korrekte Ausführung von React, einschließlich eines Entwicklungsservers, Webpacks und Babel.
Navigieren Sie zum Ordner „meine-erste-react-applikation“ und führen Sie folgenden Befehl aus:
npm starten
Dies startet einen Entwicklungsserver auf Port 3000. Wenn Sie dann über Ihre Server-IP mit Port 3000 zugreifen, sollte eine ähnliche Ausgabe wie unten erscheinen.
React erfreut sich bei vielen großen Unternehmen immer größerer Beliebtheit. Wenn Sie am Erlernen von React interessiert sind, empfehle ich Ihnen diesen umfassenden Kurs.
Vue.js
Vue.js ist ein progressives JavaScript-Framework zur Entwicklung interaktiver Benutzeroberflächen und Single-Page-Anwendungen. Es handelt sich um ein Model-View-Framework, bei dem sich die Kernbibliothek auf die View-Schicht konzentriert. Vue ist bekannt für seine Fähigkeit, Single-Page-Anwendungen zu betreiben. Im Gegensatz zu React verwendet Vue rohes HTML anstelle von JSX.
Vue.js ist Open Source und wurde ursprünglich von Evan You entwickelt und im Februar 2014 veröffentlicht. Einige der wichtigsten Funktionen sind:
- Bereitstellung reaktiver und zusammensetzbarer View-Komponenten.
- Verwendung eines virtuellen DOMs
- Fokus auf die Kernbibliothek (z. B. Routing und Zustandsverwaltung)
- CSS-Scoping ohne CSS-in-JS
- Unidirektionale Bindung innerhalb von Komponenten
- Unterstützung für wichtige Add-ons
- Wiederverwendbarkeit von Code
Installation und Verwendung
Vue.js kann entweder über CDN oder mit Node.js im Frontend eingesetzt werden.
Um den CDN-Weg zu nutzen, fügen Sie folgendes Skript zum Head-Bereich Ihrer HTML-Seite hinzu:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Dieses Skript ist für Entwicklungszwecke gedacht, da es eine informative Konsolenmeldung enthält. Für den Produktiveinsatz verwenden Sie stattdessen:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Für die Verwendung mit Node.js installieren Sie Vue mit folgendem Befehl:
npm install vue
Ich empfehle Ihnen dringend, die offizielle Vue JS Dokumentation zu konsultieren, um mehr zu erfahren, oder diesen Kurs in Erwägung zu ziehen.
Angular
Angular ist ein strukturelles JavaScript-Framework für dynamische Webseiten. Es ermöglicht die Verwendung von HTML als Vorlagensprache und eine prägnante Darstellung von Anwendungskomponenten mithilfe von HTML-Syntax. Es ist ein Open-Source-Projekt, das von Google und anderen Mitwirkenden gepflegt wird.
Installation
Stellen Sie sicher, dass die neueste Version von Node.js installiert ist. Das erste, was wir installieren müssen, ist das Angular CLI-Tool:
npm install -g @angular/cli
Nach der Installation können wir mit folgendem Befehl ein neues Projekt erstellen:
ng new my-first-angular-app
Befolgen Sie die Anweisungen auf dem Bildschirm. Dies erzeugt einige Dateien und Ordner und verwendet das npm-Modul, um externe Bibliotheken herunterzuladen, die für die korrekte Ausführung von Angular notwendig sind.
Um die neu erstellte Anwendung zu starten, führen Sie folgenden Befehl aus dem App-Ordner aus:
ng server
Dadurch sollte der Server automatisch auf Port 4200 gestartet werden.
[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at https://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 https://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
Fazit
Die Wahl, was Sie lernen möchten, ist eher eine Frage der persönlichen Präferenz als ein „was ist besser“.
Alle oben genannten Frameworks und Bibliotheken sind ausgezeichnet. Hier eine kurze Zusammenfassung:
- Sie sollten Angular in Betracht ziehen, wenn Sie ein Framework suchen, auf das Sie sich verlassen können, ohne sich mit externen Abhängigkeiten auseinandersetzen zu müssen.
- React ist eine gute Wahl, wenn Sie eine schnelle PWA-Single-Page-Anwendung entwickeln möchten und mit JSX vertraut sind.
- React verfügt über die lebendigste Community und bietet aufgrund seiner breiten Nutzerbasis mehr Jobmöglichkeiten.
- Der Einstieg in React ist relativ einfach.
- React ist hochgradig anpassbar und behandelt jeden Teil der Benutzeroberfläche als eine eigenständige Komponente.
- Vue bietet ähnliche Vorteile wie React, jedoch ohne JSX.
- Der Stellenmarkt für Vue wächst stetig.
Hier ist eine Darstellung von Google Trends, die die Popularität der drei Frameworks im Vergleich zeigt.
Wenn Sie sich für die Frontend-Entwicklung interessieren, könnte dieser Udemy-Kurs für Sie von Interesse sein.