Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Wichtige JavaScript-Bibliotheken und Frameworks, die Sie kennen sollten

by
Length:LongLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

JavaScript ist schon über 20 Jahren und es ist die Sprache, die sich ständig weiterentwickeln. Die Sprache hat in letzter Zeit ein rasantes Wachstum erlebt, weshalb ich mich frage, ob die modernen Front-End JavaScript-Technologien, die heute bekannt sind, einige Jahre später relevant sein werden.

Trotzdem ist es wichtig, weiter gehen und mit den neuesten Werkzeugs und Frameworks arbeiten, um einen besseren Entwicklungsworkflow zu erzielen. In diesem Artikel werden verschiedene JavaScript-Bibliotheken, Frameworks und Werkzeugs betrachten, die Sie jetzt lernen sollten.

Einführung

Die JavaScript-Umgebung ist riesig geworden. Es gibt ein eigenes Ökosystem aus Bibliotheken, Frameworks, Werkzeugs, Paketmanagern und neuen Sprachen, die bis zu JavaScript kompiliert werden können. Interessant ist npm, der De-facto-Paketmanager für JavaScript, auch die größte Softwareregistrierung der Welt. Hier ist ein Auszug aus einem Beitrag, der im Januar 2017 auf Linux.com veröffentlicht wurde.

Mit über 350.000 Paketen enthält die npm-Registrierung mehr als das Doppelte der nächstgrößten Paketregistrierung (das Apache Maven-Repository). Tatsächlich ist es derzeit die größte Paketregistrierung der Welt.

Acht Monate schneller Vorlauf, und derzeit befinden sich etwa 500.000 Pakete in der npm-Registrierung. Das ist ein massives Wachstum im Vergleich zu anderen Paket-Repositories.

A comparison of different package registries based on number of modules
Quelle: ModuleCounts.com

Als Front-End JavaScript Entwickler ist es wichtig, mit den modernen JavaScript-Werkzeugs und -Bibliotheken Schritt zu halten. Wenn eine Technologie populär wird, ist die Nachfrage nach ihr hoch, was wiederum mehr Codierungsaufträge bedeutet, die das höchste Gehalt in der Branche zahlen. Deshalb habe ich eine Liste der beliebtesten JavaScript-Technologien zusammengestellt, die Sie meiner Meinung nach kennen sollten.

Bibliotheken

Eine Bibliothek ist ein wiederverwendbarer Code, der bestimmte Funktionen bietet. Es ist eine Sammlung von Funktionen, Objekten und Klassen, die Sie in Ihrer Anwendung verwenden können. Eine Bibliothek abstrahiert verschiedene Ebenen, sodass Sie sich nicht um deren Implementierungsdetails kümmern müssen.

Sie können eine Bibliotheksfunktion aufrufen und einige Parameter übergeben. Die Bibliothek führt sie aus und gibt das Steuerelement an Sie zurück. Es gibt jedoch keine strukturellen Einschränkungen, die die Verwendung der Bibliothek einschränken. Beliebte JavaScript-Bibliotheken sind:

React

React ist eine JavaScript-Bibliothek, die von den Entwicklern von Facebook und Instagram erstellt wurde. Laut der Stack Overflow Survey 2017 wurde React unter Entwicklern zur beliebtesten Technologie gewählt. React gilt auch als das beliebteste JavaScript-Projekt, das auf der Anzahl der GitHub-Sterne basiert.

Warum bekommt React die ganze Aufmerksamkeit? Mit React ist es möglich, eine interaktive Benutzeroberfläche mithilfe eines deklarativen Ansatzes zu erstellen, bei dem Sie den Status der Anwendung steuern können, indem Sie sagen, dass die Ansicht so aussehen sollte. Es wird ein komponentenbasiertes Modell verwendet, bei dem die Komponenten wiederverwendbare UI-Elemente sind und jede Komponente ihren eigenen Status hat.

React a JavaScript library for building interactive views

React verwendet ein virtuelles DOM, sodass Sie sich nicht um die direkte Manipulation des DOM kümmern müssen. Weitere bemerkenswerte Funktionen von React sind der Einwegdatenfluss, die optionale JSX-Syntax und ein BefehlszeilenWerkzeug zum Erstellen eines React-Projekts ohne Build-Konfiguration.

Wenn Sie der Meinung sind, dass React das nächstbeste ist und React lernen möchten, lesen Sie unsere Tutorial-Reihe zum React Crash-Kurs für Anfänger.

jQuery

jQuery ist eine Bibliothek, die JavaScript zugänglicher und die DOM-Manipulation einfacher als zuvor gemacht hat. Die sanfte Lernkurve und die einfache Syntax von jQuery führten zu einer Generation neuer clientseitiger Entwickler. Vor einigen Jahren galt jQuery als solide Lösung für die Erstellung robuster Websites mit browserübergreifender Unterstützung. Die Kernfunktionen von jQuery wie die DOM-Manipulation basierend auf CSS-Selektoren, die Ereignisbehandlung und das Tätigen von AJAX-Aufrufen haben die Popularität des Unternehmens gesteigert.

jQuery library for DOM manipulation using JavaScript

Die Dinge haben sich jedoch geändert und die JavaScript-Umgebung hat sich stetig weiterentwickelt. Einige Funktionen von jQuery wurden in die neuere ECMAScript-Spezifikation aufgenommen. Die heute verwendeten neuen Bibliotheken und Frameworks haben auch eine native Methode zum Binden des DOM, sodass keine einfachen DOM-Manipulationstechniken mehr erforderlich sind. Die Popularität von jQuery nimmt ab, aber ich sehe nicht, dass sie so schnell verschwindet.

D3: Data-Driven Dokumente

D3 (oder D3.js) ist eine leistungsstarke JavaScript-Bibliothek zur Erstellung interaktiver Visualisierungen unter Verwendung von Webstandards wie SVG, HTML und CSS. Im Gegensatz zu anderen Visualisierungsbibliotheken bietet D3 eine bessere Kontrolle über das endgültige visuelle Ergebnis.

D3 bindet die Daten an das DOM und führt dann die Transformation zum Dokument durch. Es hat auch ein eigenes Ökosystem, das aus Plugins und Bibliotheken besteht, die seine Grundfunktionalität erweitern. Die Bibliothek gibt es seit 2011 und es gibt unzählige Dokumentationen und Tutorials, die Ihnen den Einstieg erleichtern können.

D3 interactive visualization for the web

Wenn Sie einfache Visualisierungen erstellen möchten, ohne zu viel Zeit in sie zu investieren, sollten Sie Chart.js lesen. Wir haben eine Einführungsserie zu Chart.js, die die meisten Visualisierungen abdeckt, die Sie mit Chart.js erstellen können

Frameworks

Ein Framework verfügt über eine Architektur, die den Kontrollfluss in Ihrer Anwendung bestimmt. Das Framework beschreibt das Skelett und gibt an, wie alles organisiert werden soll. Die grundlegenden Funktionen, die erforderlich sind, um die Anwendung zum Laufen zu bringen, werden Ihnen ebenfalls zur Verfügung gestellt. Darüber hinaus müssen Sie die Entwurfsprinzipien und -muster des Frameworks befolgen. Der Unterschied zwischen einem Framework und einer Bibliothek besteht darin, dass Sie eine Bibliothek aufrufen, während das Framework Sie aufruft.

Ein Framework besteht häufig aus vielen Bibliotheken und weist einen höheren Abstraktionsgrad auf. Funktionen wie Ereignisbehandlung, AJAX-Aufrufe, Vorlagen- und Datenbindung sowie Tests sind in das Framework integriert.

Angular

AngularJS war einst die beliebteste JavaScript-Technologie unter Front-End-Entwicklern. Es wurde von Google und einer Community von Einzelpersonen und Unternehmen unterstützt. Trotz der Popularität hatte AngularJS seinen eigenen Anteil an Fehlern. Das Angular-Team arbeitete zwei Jahre lang an einer neueren Version von Angular, die schließlich im September 2016 veröffentlicht wurde.

Angular framework for mobile and desktop

Die Angular 2-Version war eine grundlegende Neufassung von AngularJS. Einige der Funktionen von Angular 2 umfassen:

  • TypeScript über JavaScript als Standardsprache
  • komponentenbasierte Architektur
  • verbesserte Leistung sowohl auf mobilen als auch auf Webplattformen.
  • Bessere Werkzeug- und Gerüstoptionen

Ein Upgrade von Angular 1.x auf Angular 2 ist jedoch teuer, da Angular 2 ein völlig anderes Tier ist. Dies ist einer der Gründe, warum Angular 2 nicht die gleiche Akzeptanzrate wie sein Vorgänger aufweist. Angular und AngularJS gehören laut Stack Overflow (2017) weiterhin zu den am häufigsten verwendeten Technologien. Das Angular-Projekt hat ungefähr 28.000 Sterne auf GitHub.

Vue.js

Vue.js ist ein leichtes JavaScript-Framework, das in diesem Jahr im Trend liegt. Es ist das beliebteste JavaScript-Framework auf GitHub in Bezug auf die Anzahl der GitHub-Sterne. Vue behauptet, ein weniger einfühlsames Framework zu sein und daher für Entwickler leicht nachzuholen. Die HTML-basierte Vorlagensyntax von Vue bindet das gerenderte DOM an die Instanzdaten.

Vuejs The progressive JavaScript framework

Das Framework bietet mit seinem virtuellen DOM und wiederverwendbaren Komponenten eine reaktionsähnliche Erfahrung, mit der Sie sowohl Widgets als auch ganze Webanwendungen erstellen können. Darüber hinaus können Sie auch die JSX-Syntax verwenden, um die Renderfunktionen direkt zu schreiben. Wenn sich der Status ändert, verwendet Vue.js ein Reaktivitätssystem, um festzustellen, was sich geändert hat, und rendert die minimale Anzahl von Komponenten neu. Vue.js unterstützt auch die Integration anderer Bibliotheken in das Framework ohne großen Aufwand.

Ember.js

Ember.js ist ein Front-End-Framework, das auf dem MVVM-Muster (Model-View-ViewModel) basiert. Es folgt der Konvention über den Konfigurationsansatz, die bei serverseitigen Frameworks wie Ruby on Rails und Laravel beliebt ist. Ember.js integriert gängige Redewendungen und Best Practices in das Framework, sodass Sie eine Anwendung ohne großen Aufwand zum Laufen bringen können.

Emberjs a framwork for creating ambitious web apps

Der Ember-Stapel umfasst normalerweise:

  • Ember CLI: Bietet grundlegende Gerüstoptionen und unterstützt Hunderte von Add-Ons.
  • Ember Data: Eine Datenpersistenzbibliothek, die für die Verwendung mit jedem Server-Backend konfiguriert werden kann.
  • Ember Inspector: Eine Erweiterung für Chrome und Firefox.
  • Liquid Fire: Ein Add-On für Übergänge und Animationen.

Werkzeuge

Ein Werkzeug ist eine Sammlung von Routinen, die Sie im Entwicklungsprozess unterstützen. Im Gegensatz zu einer Bibliothek führt ein Werkzeug normalerweise eine Aufgabe im Clientcode aus. Es nimmt Ihren Code als Eingabe, führt eine Aufgabe aus und gibt dann eine Ausgabe zurück. Zu den häufig verwendeten Werkzeugs gehören Transpiler und Build-Werkzeugs, Asset-Minifier, Modulbündler und Gerüstwerkzeuge.

Werkzeugs: Allzweck-Task-Runner

Allzweck Purpose Task Runners sind die Werkzeuge, mit denen bestimmte sich wiederholende Aufgaben automatisiert werden. Zu den beliebten Allzweck-Task-Runner gehören:

Gulp

Gulp ist ein JavaScript-Werkzeug, das als Task-Runner und als Build-System in der Webentwicklung verwendet wird. Kompilierung, Code-Minimierung, Bildoptimierung, Unit-Tests, Flusen usw. sind sich wiederholende Aufgaben, die automatisiert werden sollten. Gulp erleichtert das Schreiben von Aufgaben, selbst für Personen, die mit JavaScript weniger vertraut sind.

Gulp verwendet Pipelines, um die Daten von einem Plugin zu einem anderen zu streamen, und das Endergebnis wird in einen Zielordner ausgegeben. Gulp bietet eine bessere Leistung als Grunt, da keine temporären Dateien zum Speichern von Zwischenergebnissen erstellt werden, was zu weniger E/A-Aufrufen führt.

Automate and enhance your workflow using Gulp

Grunt

Grunt ist ein Task Runner und ein AutomatisierungsWerkzeug für JavaScript. Grunt verfügt über eine Befehlszeilenschnittstelle, mit der Sie benutzerdefinierte Aufgaben ausführen können, die in einer Datei namens Gruntfile definiert sind. Grunt hat Tausende von Plugins zur Auswahl, die die meisten sich wiederholenden Aufgaben abdecken sollten, denen Sie begegnen würden. Mit Grunt können Sie alle Aufgaben unter einem einzigen Befehl ausführen, was Ihnen das Leben erleichtert.

Grunt the JavaScript task runner

npm

Bei Gulp und Grunt müssen Sie Zeit damit verbringen, ein neues Werkzeug zu lernen und zu beherrschen, was Zeit kostet. Das Einfügen zusätzlicher Abhängigkeiten in Ihr Projekt kann vermieden werden, indem Sie eine Alternative auswählen, die bereits in Node.js enthalten ist. Obwohl npm besser als Paketmanager bekannt ist, können npm-Skripte verwendet werden, um den Großteil der oben genannten Aufgaben auszuführen.

npm task runner

Werkzeugs: Testen

Beim Testen wird überprüft und überprüft, ob die Anwendung die erwarteten geschäftlichen und technischen Anforderungen erfüllt. Der testgetriebene Entwicklungsansatz hilft auch bei der Entdeckung von Fehlern und sollte daher als integraler Bestandteil des modernen Front-End-Entwicklungsstapels behandelt werden.

Jest

Jest ist ein relativ neues Testframework, das von Facebook verfasst wurde und von der React-Community gut angenommen wird. Es gibt ein weit verbreitetes Missverständnis, dass Jest speziell für die Arbeit mit React entwickelt wurde. Laut der Scherzdokumentation:

Obwohl Jest als reaktionsspezifischer Testläufer angesehen werden kann, handelt es sich tatsächlich um eine universelle Testplattform, die sich an jede JavaScript-Bibliothek oder jedes Framework anpassen lässt. Mit Jest können Sie jeden JavaScript-Code testen.

Der größte Vorteil der Verwendung von Jest gegenüber anderen Testsuiten besteht darin, dass Sie keine oder nur eine minimale Konfiguration benötigen, um mit dem Schreiben von Tests zu beginnen. Das Framework verfügt über eine integrierte Assertionsbibliothek und unterstützt die Verwendung von Scheinfunktionen oder Spionen.

Delightful JavaScript testing using Jest

Jest verfügt über eine Funktion namens Snapshot-Test, mit der Sie sicherstellen können, dass sich die Benutzeroberfläche der Anwendung nicht unerwartet ändert. Die Entwickler von Facebook und anderen Mitwirkenden haben in letzter Zeit viel Arbeit in dieses Projekt gesteckt, daher wäre es keine Überraschung, wenn sich Jest in den kommenden Jahren als das beliebteste Testframework für JavaScript herausstellen würde.

Mocha

Mocha ist ein JavaScript-Testframework, das Browserunterstützung, asynchrone Unterstützung einschließlich Versprechen, Testabdeckungsberichte und eine JavaScript-API zum Ausführen von Tests bietet. Mokka wird häufig mit einer Assertionsbibliothek wie Chai, Should.js, Expect.js oder besser Assert gepaart, da ihm eine eigene Assertionsbibliothek fehlt.

Mocha test runner and testing framework

Jasmine

Jasmine ist ein verhaltensgesteuertes Testframework für JavaScript. Jasmine möchte eine browser-, plattform- und Framework-unabhängige Testsuite sein. Jasmine verfügt über eine eigene Assertionsbibliothek namens Matchers, die eine saubere und einfach zu lesende Syntax bietet. Jasmine hat keinen eingebauten Testläufer, und Sie müssen möglicherweise stattdessen einen generischen Testläufer wie Karma verwenden.

Jasmine test runner and testing framework

Schlussfolgerung

JavaScript, die Sprache des Webs, ist seit den Tagen seiner Einführung im Jahr 1995 relevant geblieben. Dies wird wahrscheinlich so bleiben, solange sich die Browser nicht dafür entscheiden, es für eine andere Sprache zu verwenden. Obwohl es viele andere Sprachen gibt, die bis zu JavaScript kompiliert werden, gibt es keine andere Skriptsprache, die JavaScript in absehbarer Zukunft ersetzen wird. Warum? Weil JavaScript zu populär geworden ist, um ersetzt zu werden.

Die Sprache ist nicht ohne Lernkurven und es gibt viele Frameworks und Bibliotheken, die Sie ebenfalls beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, die Sie studieren oder für Ihre Arbeit verwenden können, lesen Sie, was wir auf dem Envato Market anbieten.

Die JavaScript-Umgebung entwickelt sich definitiv weiter, was aus den aktuellen Trends in der Webentwicklung hervorgeht. Ältere Bibliotheken und Frameworks wurden durch neue Technologien ersetzt. jQuery, einst die beliebteste JavaScript-Bibliothek, verzeichnet einen Rückgang in Bezug auf Attraktivität, Verwendung und Beliebtheit. Die neue Generation von Front-End-Bibliotheken, Frameworks und Werkzeugs gewinnt an Boden und findet allgemeine Akzeptanz.

Die Anpassung an die neuen Technologietrends hat ebenfalls Vorteile. Coding-Jobs, für die React erforderlich ist, haben einige der höchsten Gehälter in der Branche. Laut Stack Overflow (2016) liegt das Durchschnittsgehalt in den USA bei 105.000 US-Dollar. Sie müssen also weiter lernen und mit den neuesten Werkzeugs und Frameworks experimentieren, um das Beste aus JavaScript herauszuholen.

Wenn Sie der Meinung sind, dass ich ein erwähnenswertes JavaScript-Framework, eine Bibliothek oder ein Werkzeug verpasst habe, lassen Sie es mich in den Kommentaren wissen.

Weiterführende Literatur

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.