Wie gefällt Ihnen der Artikel?
6
Wie gefällt Ihnen der Artikel?
6

Die beliebtesten JavaScript-Frameworks und -Bibliotheken

Bei JavaScript (kurz: JS) handelt es sich eine Skriptsprache, mit der sich dynamische HTML-Inhalte im Webbrowser umsetzen lassen. Die Sprache kann sowohl für die objektorientierte als auch für die prozedurale und funktionale Programmierung genutzt werden. JavaScript enthält zwar vordefinierte Objekte (also Datenelemente mit speziellen Eigenschaften oder Methoden bzw. Funktionen) für den Zugriff auf eine Webseite, doch sind diese teils umständlich in der Anwendung. Inzwischen wurden viele hilfreiche Anweisungen in diversen JavaScript-Bibliotheken (englisch: „JavaScript Libraries“) und -Frameworks zusammengefasst: Werkzeuge, die das Programmieren erleichtern sollen. Wir stellen die besten und bekanntesten vor.

Bibliothek vs. Framework

Zunächst jedoch gilt es, die Begriffe auseinander zu halten. „Bibliothek“ (bzw. Library) und „Framework“ werden des Öfteren synonym verwendet – was genau genommen falsch ist. Auch wenn der Übergang tatsächlich in vielerlei Hinsicht fließend ist, gibt es grundlegende Unterschiede zwischen den beiden.

Bibliothek

Innerhalb der Programmierung handelt es sich bei einer Bibliothek grundsätzlich um eine Programmbibliothek – egal ob Klassen-, Komponenten- oder irgendeine andere Bibliothek. Programmbibliotheken beherbergen immer Unterprogramme, die mit Hilfsfunktionen die Programmierung erleichtern sollen. Im Unterschied zu einem Framework wird deshalb eine Bibliothek stärker auf eine bestimmte Verwendung hin entwickelt und besitzt hierfür aufeinander abgestimmte Funktionen. Beispielsweise dient die JavaScript-Bibliothek D3.js der Datenvisualisierung – mit ihr lassen sich sowohl kleine Tabellen, Diagramme und Statistiken als auch komplexe grafische Darstellungen umsetzen (inklusive Animationen und Interaktionsmöglichkeiten).

Bibliotheken werden stets von einer Software eingebunden, die auf die entsprechenden Funktionen einer Programmbibliothek zugreift, sobald sie eine bestimmte Funktion aus dem Sortiment benötigt. Deshalb können Bibliotheken nur innerhalb eines Programms arbeiten und nicht selbstständig ausgeführt werden.

Framework

Auch ein Framework (englisch für „Rahmenstruktur“, „Ordnungsrahmen“) ist kein autonomes Programm, sondern vielmehr eine spezielle Form einer Klassenbibliothek. Ein Framework stellt die Software-Architektur (also das Grundgerüst) einer Anwendung dar und bestimmt wesentlich den Entwicklungsprozess. Frameworks besitzen bestimmte Entwurfsmuster mit verschiedenen Funktionen (häufig in Form mehrerer Bibliotheken) und dienen der Entwicklung neuer, eigenständiger Anwendungen. Ein Beispiel hierfür ist das Zend-Framework für PHP, das u. a. in der Onlineshop-Software von Magento und dem Webanalytik-Tool Piwik genutzt wird.

Inversion of Control

Ein weiterer Unterschied zwischen einem Framework und einer Bibliothek besteht in ihrer Steuerung. Bei Bibliotheken wird der Code von Programmierern über die Programmierschnittstelle einer Software aufgerufen. Frameworks vollziehen hingegen eine Umkehrung der Steuerung („Inversion of Control“): Der Code wird in festgelegte Strukturen des Frameworks eingebettet und aufgerufen, sobald er benötigt wird. Zusammenfassend kann man sagen, dass Bibliotheken von dem Programm aufgerufen werden, wohingegen ein Framework dem Programm Vorgaben macht.

JavaScript-Bibliotheken und -Frameworks

Der Kern von JavaScript ist eine eher schlichte Programmiersprache, die sich besonders für den Einsatz innerhalb des Browsers anbietet. Probleme bereitet vielen Programmierern jedoch die Schnittstelle zur Website: das DOM (Document Object Model). Genau hier setzen JavaScript-Frameworks und -Bibliotheken an: Sie bieten Entwicklern Arbeitserleichterungen in diesem und anderen Feldern der Programmierung. Die in den nächsten Abschnitten vorgestellten JavaScript-Erweiterungen können allesamt kostenfrei heruntergeladen werden.

Beliebte JavaScript-Bibliotheken

JavaScript-Bibliotheken sind wiederverwendbare Code-Anweisungen, über die gewisse Eigenschaften und Funktionen (etwa für eine Webseite) vergeben werden können. jQuery ist die bekannteste JavaScript-Library und bietet zahlreiche nützliche Funktionen. Aber auch andere Vertreter können hilfreich sein.

jQuery

Die umfangreiche Bibliothek jQuery ist die am meisten genutzte JavaScript-Library. Dies liegt unter anderem daran, dass man mit ihr einfach browserübergreifend jQuery-Code schreiben kann und für sie sehr viele Plug-ins existieren. Die quelloffene Bibliothek ist Bestandteil vieler Content-Management-Systeme wie WordPress, Drupal oder Joomla!. jQuery dient als Schnittstelle zum DOM und bietet hierbei diverse Funktionen:

  • Unkomplizierte Auswahl von Website-Elementen (ähnlich zu CSS3-Selektoren)
  • Ausgewählte Website-Elemente ändern (wie Position, Farbe etc.)
  • Event-System: Website-Elemente reagieren auf User-Navigation (Mausklicks, Tastatureingabe etc.)
  • Unkomplizierte Umsetzung von Animationen und Effekten
  • Ajax-Abfragen ermöglichen die nahtlose Interaktion zwischen User-Eingaben und Server-Daten (wie bei der Autocomplete-Funktion)

jQuery UI

Bei jQuery UI handelt es sich um eine freie Erweiterung für jQuery. Sie dient der Gestaltung und Umsetzung einer Benutzeroberfläche (englisch: „User Interface“ oder abgekürzt „UI“) – beispielsweise von Webseiten oder Web-Apps. Der Schwerpunkt liegt auf der einfachen Gestaltung von Effekten und Interaktionen. Zum Funktionsumfang von jQuery UI zählen die Umsetzung von Interaktionsmöglichkeiten (wie Drag-and-Drop, Vergrößerung bzw. Verkleinerung von Webseitenelementen etc.), Animationen und Effekten sowie Widgets (wie Autocomplete, Slider, Datepicker etc.). Über den Grafikeditor ThemeRoller können eigene Themes erstellt, aber auch bereits vorhandene verwendet und angepasst werden – durch den modularen Aufbau werden hierbei auch nur benötigte Komponenten implementiert.

Dojo Toolkit

Das Dojo Toolkit bietet sich vor allem für die Realisierung von Webapplikationen und dynamischen Webinhalten an. Es wartet mit einem vielfältigen Funktionsumfang auf – die wichtigsten Bestandteile des Toolkits sind:

  • Dojo (Hauptprogramm): Rascher und einfacher Umgang mit dem DOM, Ajax, JavaScript-Arrays, Events etc.
  • Dijit: Eine Art Baukasten für grafische Benutzeroberflächen, Widgets, Layouts, Effekte und Animationen (ähnlich wie jQuery UI)

React

React fand erstmals 2011 im Newsfeed von Facebook Verwendung. 2013 wurde es dann auf Open-Source-Basis veröffentlicht. Es handelt sich um eine weitere JavaScript-Library, mit der man Benutzeroberflächen erstellen kann. Das Besondere dabei ist, dass sich Webseiten-Elemente (Views) nicht nur auf dem Client, sondern auch auf dem Server rendern lassen – was ein leistungsstarkes Rendering ermöglicht. Dies ist auf die Verwendung eines virtuellen DOMs zurückzuführen, womit auch das Testen von Webanwendungen einfacher wird.

Beliebte JavaScript-Frameworks

Es gibt erheblich mehr JavaScript-Bibliotheken als -Frameworks. Letztere eignen sich vor allem für komplexe Webanwendungen. Lassen sich Entwickler auf die Konzepte und Vorgaben des jeweiligen Frameworks ein, können sie sehr effektiv damit arbeiten. Zwei sehr umfangreiche und oft verwendete Werkzeuge sind AngularJS und Ember.js.

AngularJS

Das von Google stammende Framework hat mit Abstand die größte Community unter den JavaScript-Frameworks. AngularJS dient der Erstellung von Single-Page-Webanwendungen (Web-Apps, die nur aus einem HTML-Dokument bestehen). Aufgrund des MVVM-Ansatzes (Model View ViewModel) können insbesondere Webapplikationen entwickelt werden, die stark auf die Interaktion mit den Usern ausgelegt sind. Dabei rendert AngularJS die Webanwendung clientseitig. Das Framework basiert auf jQuery Lite – einer abgespeckten Variante der bekannten JavaScript-Bibliothek jQuery.

Ember.js

Auch Ember.js ist ein clientseitiges Framework, das für die Umsetzung von Single-Page-Webanwendungen eingesetzt wird. Im Gegensatz zu AngularJS fußt es aber auf dem MVC-Prinzip (Model View Controller). Ein weiteres Unterscheidungsmerkmal ist, dass die Macher von Ember.js die Community intensiv in die Entwicklungsprozesse des Frameworks miteinbeziehen und bedeutende Änderungen am Framework mit dieser öffentlich diskutieren, bevor sie umgesetzt werden. Ember.js bezeichnet sich selbst als Framework, mit dem man ambitionierte Webapplikationen erstellt – dementsprechend richtet es sich in erster Linie an Entwickler, die bereits Erfahrung mit der Konzeption von Webanwendungen haben.

Nützliche Werkzeuge für viele Bereiche

Frameworks und Bibliotheken können eine erhebliche Erleichterung für die Arbeit mit JavaScript sein. Die oben vorgestellten bilden nur einen kleinen Teil der verfügbaren Tools. Eine gute Quelle für weitere JavaScript-Frameworks, -Libraries und auch -Plug-ins stellt neben GitHub auch die Website www.javascripting.com dar. Hier lassen sich passende JavaScript-Erweiterungen für diverse Zwecke finden.

JavaScript Tools