Top 5 JavaScript-Frameworks und -Bibliotheken, sowie deren Alternativen

In dieser Übersicht stelle ich die populärsten Stellvertreter aus 5 verschiedenen Arten von clientseitigen JavaScript-Frameworks und -Bibliotheken, sowie deren beste Alternativen vor. Alle hier vorgestellten Frameworks und Bibliotheken, einschließlich der zugehörigen Alternativen, stehen unter einer Open-Source-Lizenz, und können somit kostenlos heruntergeladen und verwendet werden.

jQuery (DOM-Manipulationen) #

Screenshot der offiziellen Website von jQuery

Screenshot der offiziellen Website von jQuery

jQuery ist der Klassiker unter den freien JavaScript-Bibliotheken, und sicherlich jedem Webentwickler ein Begriff. Mit jQuery lassen sich in erster Linie Manipulationen am DOM der Website vornehmen, aber auch weiterführende Dinge wie Effekte und Animationen, Interaktions-Ereignisse und AJAX-Abfragen können mit der leichtgewichtigen Bibliothek durchgeführt werden.

Kein anderes Projekt hat im Web eine so hohe Verbreitung wie jQuery, weshalb es hierfür auch besonders viele Plugins und Erweiterungen gibt. Neben jQuery selbst stellen die Entwickler auch die beiden ergänzenden Bibliotheken jQuery UI und jQuery mobile kostenlos zum Download bereit.

Mit jQuery UI lassen sich Interaktion-Elemente wie Drag- & Drop-Boxen, sortierbare Listen, Autovervollständigungs-Eingabefelder, Slider, Tabs, Tooltips, Datumswähler oder Fortschrittsbalken erstellen. Zudem werden einige zusätzliche Effekte zur Verfügung gestellt.

jQuery mobile ist hingegen, wie der Name bereits vermuten lässt, ein Framework für mobile Endgeräte, und verfügt über speziell hierfür optimierte Bedienelemente sowie zusätzliche Interaktions-Ereignisse.

Während jQuery an sich lediglich eine JavaScript-Datei ist, bestehen jQuery UI und jQuery mobile zudem auch aus einer CSS-Datei, die das Aussehen der zur Verfügung gestellten Bedienelemente festlegt. Die genaue Optik kann dabei über ein Theme-System angepasst und individualisiert werden.

AngularJS (clientseitiges Webframework) #

Screenshot der offiziellen AngularJS-Website

Screenshot der offiziellen AngularJS-Website

AngularJS ist ein clientseitiges MVVM-Framework, was sich insbesondere für komplexe Webawendungen eignet, die auf viel Interaktion mit dem Benutzer setzen.

Während man bei herkömmlichen JavaScript-Bibliotheken wie jQuery stets immer am DOM der HTML-Seite arbeitet, verfolgt AngularJS einen anderen Ansatz: Anstatt zuerst ein HTML-Dokument auf dem Server beispielsweise mit PHP oder Node.js zu generieren, und dieses dann nachträglich über die DOM-Schnittstelle zu manipulieren, benötigt AngularJS keinen Server der zuvor das HTML-Dokument der Seite generiert.

Stattdessen übernimmt AngularJS das komplette Rendering selbst, und fragt die dafür benötigten Datensätze bei Bedarf per AJAX- oder WebSocket-Verbindung ab. Die Webanwendung wird also clientseitig gerendert.

In der Praxis läuft das ganze so ab, dass man zunächst eine statische HTML-Datei anlegt, die dann als Grundgerüst der clientseitigen Webanwendung dient. Darin lädt man nun über ein <script>-Tag das AngularJS-Framework, und weißt dem HTML-Template bestimmte Tags und Expressions zu, die sich um die dynamische Generierung der Templates kümmern – eine sogenannte Single-Page-Web-App.

Über Controller, was im Grunde nichts weiter als spezielle JavaScript-Funktionen sind, stellt man dem Template anschließend die benötigten Datensätze bereit. Diese können wie bereits erwähnt beispielsweise per AJAX dynamisch vom Server abgefragt werden. Einige Webanwendungen wie z.B. To-do-Listen könnten die anfallenden Datensätze jedoch auch lokal speichern, und somit auf die Kommunikation mit dem Server über eine API verzichten.

Da die Daten der Controller automatisch mit dem Template in beide Richtungen synchronisiert werden (Two-Way Data Binding), muss man dies mit AngularJS nicht manuell machen. Sogenannter Boilerplate-Code, wie man ihn aus typischen jQuery-Anwendungen kennt, der lediglich dazu da ist, um die JavaScript-Vaiablen mit dem DOM zu synchronisieren, wird hierbei also nicht benötigt. AngularJS basiert zwar im Hintergrund auf jQuery1, da man als Entwickler jedoch nicht direkt am DOM arbeitet, hat man es nur in seltenen Fällen direkt mit jQuery zu tun.

Darüber hinaus verfügt AngularJS über viele weitere funktionsreiche Komponenten wie einen URL-Router, die es insgesamt zu einem mächtigen Framework machen. Da AngularJS das populärste Webframework seiner Art ist, existieren auch hierfür recht viele Erweiterungen.

Alternativen zu AngularJS: Ember.js, Knockout.js, Backbone.js, Can.js, Meteor (Webbrowser + Node.js) sowie viele weitere kleinere

Masonry (dynamische Raster-Anordnung) #

Screenshot von der offiziellen Masonry-Website

Screenshot von der offiziellen Masonry-Website

Masonry ist eine freie JavaScript-Bibliothek, die Elemente flexibel innerhalb eines Rasters aneinander reiht. Dabei wird auch auf Änderungen der der Fenstergröße reagiert, und die Position der Elemente entsprechend angepasst, sodass sich die einzelnen Elemente wieder an der optimalen Stelle befinden.

Über diverse Optionen kann genau festgelegt werden, wie sich die Elemente innerhalb der Anordnung verhalten. Typische Anwendungsfälle für ein solches Raster-System sind Bilder, Blog-Beiträge oder beliebige ändere Inhalte, die in gleichmäßigen Abständen positioniert werden sollen, und sich dabei optimal an den verfügbaren Platz anpassen sollen.

Ein kurzer Blick auf die Demonstrationen der Bibliothek lohnen sich, um einen grundlegenden Einblick zu bekommen, was mit Masonry alles möglich ist. Alternativ zur nativen Verwendung kann die Bibliothek auch in Kombination mit jQuery verwendet werden.

Alternativen zu Masonry: Gridster.js, Salvattore (per CSS konfigurierbar), Freewall, Shuffle.js, Wookmark jQuery plugin

KineticJS (Canvas-Zeichnung) #

Screenshot von der offiziellen KineticJS-Website

Screenshot der offiziellen KineticJS-Website

KineticJS ist ein Framework, um Grafiken mittels der HTML5-Canvas-Technologie per JavaScript zu zeichnen, animieren, und den Nutzer mit der Zeichenfläche interagieren zu lassen.

Mit KineticJS können unterschiedliche Elemente wie Rechtecke, Kreise, Ellipsen, Sterne, Linien sowie auch benutzerdefinierte Formen, Bilder und Texte mit verschiedenen Optionen erzeugt und darüber hinaus umfassend animiert werden. Außerdem stehen einige vordefinierte Filter zur Verfügung, mit denen man einzelne Elemente oder die gesamte Zeichenfläche manipulieren kann.

Mit Event-Handlern kann auf bestimmte Ereignisse des Nutzers reagiert werden, und so eine Interaktive Anwendung geschaffen werden, bei der jeder einzelne Pixel der Canvas-Fläche beliebig definiert werden kann. Auch Browserspiele lassen sich hiermit problemlos umsetzen.

Eine Besonderheit an KineticJS, die das Framework von ähnlichen 2D-Canvas-Frameworks abgrenzt, ist die Möglichkeit, mehrere Canvas-Flächen übereinander zu stapeln (sogenannte Layer). Da ein einzelner Layer, sofern er nicht bezeichnet ist, von Grund aus durchsichtig ist, können bestimmte Elemente auf bestimmte Layer aufgeteilt werden. Durch geschickte Anwendung dieser Layer lässt sich eine besonders hoher Performance erreichen, da so bei Änderungen an einem Element nur der jeweilige Layer, aber nicht der gesamte Canvas-Stapel neu gezeichnet werden muss.

Update: Der ursprüngliche Entwickler von KineticJS hat die Entwicklung gegen Ende 2014 unerwartet eingestellt. Die Community hat jedoch bereits reagiert, und entwickelt einen KineticJS-Fork unter dem Namen Konva.js (Website) aktiv weiter. Es empfiehlt sich, diesen Fork anstelle des nicht mehr weiter gepflegten originalen KineticJS zu verwenden.

Ähnliche Alternativen: EaselJS, Pixi.js (2D WebGL mit Canvas-Fallback), Fabric.js, Paper.js, Chart.js
3D-Alternativen: PlayCanvas, C3DL, Three.js, Babylon.js, Seen.js (HTML5-Canvas & SVG)
SVG-Alternativen: Snap.svg, Raphaël, D3.js, BonsaiJS, SVG.js

CKEditor (visueller HTML-Editor) #

Screenshot von der offiziellen CKEditor-Website

Screenshot von der offiziellen CKEditor-Website

Wie aus dem Namen schon hervorgeht, handelt es sich bei dem CKEditor um einen visuellen HTML-Editor, mit dem der bearbeitete HTML-Text während des Bearbeitens live formatiert wird. Der Anwender bekommt hierbei lediglich die Vorschau des HTML-Textes zu Gesicht, ohne sich mit dem HTML-Code im Hintergrund herumschlagen zu müssen – ein sogenannter WYSIWYG-Editor.

Der CKEditor ist momentan der fortschrittlichste Editor seiner Art, er lässt sich über Plugins und Widgets flexibel anpassen, während die Optik über Skins ebenfalls frei definierbar ist. Er ist in mehr als 60 verschiedenen Sprachen verfügbar, darunter auch in Deutsch.

Mit der JavaScript-Bibliothek kann entweder ein klassischer WYSIWYG-Editor erzeugt werden, bei dem der HTML-Code zwar grundlegend formatiert, aber z.B. keine CSS-Regeln angewendet werden, oder ein sogenannter Inline-Editor, womit sich die Inhalte direkt auf der jeweiligen Seite bearbeiten lassen und diese somit auch während des Bearbeitens per CSS exakt so formatiert werden, wie sie auch später dargestellt werden.

Ähnliche Alternativen: TinyMCE, Mercury Editor, Aloha Editor, NicEdit, sowie viele weitere kleine
Code-Editoren: Ace, CodeMirror
VN:F [1.9.22_1171]
Bewertung: 5.0/5 (1 Bewertung)
Top 5 JavaScript-Frameworks und -Bibliotheken, sowie deren Alternativen, 5.0 out of 5 based on 1 rating
  1. Genauer gesagt ist im Quellcode von AngularJS eine abgespeckte Version von jQuery namens jQuery Lite enthalten, die nur über die wichtigsten Funktionalitäten verfügt, um das Framework möglichst leichtgewichtig zu halten und nicht unnötig aufzublähen. Falls man jQuery jedoch zusätzlich lädt, so erkennt AngularJS das, und verwendet stattdessen diese Version. 

Regelmäßige Beiträge über Node.js

nodecodeAbonniere den kostenlosen NodeCode-Newsletter, und bleibe auf dem laufenden über neue Beiträge zum Thema Node.js. Darunter:

  • Informationen und Neuigkeiten rund um Node.js und zugehörigen Modulen
  • Vorstellung von interessanten Frameworks und Bibliotheken
  • Anleitungen und Tutorials zu Node.js und weiterführenden Technologien
  • Sowie vieles mehr...

schon 2 Kommentare gehe zum kommentieren

  1. Andi Sabortein /

    Ein sehr hilfsreiches Artikel. Vielen Dank dafür.

    Ich habe eine Frage an Ihnen.
    Seit 1. Oktober 2015 habe ich von meinen Chef eine Aufgabe bekommen. Für unseren mittelgroßen Unternehmen soll ich eine neue Java Script Framework & HTML5 UI Library Tool zu finden.
    Zur dieser Zeitpunkt habe ich viel über JavaScript-Frameworks gelesen. Die erste Alternative die ich gestern gefunden hatte ist Webix von der Unternehmen XB Software (http://webix.com/)

    Und hier kommen meine Fragen. Haben Sie schon über Webix gehört? Und wenn ja, wie finden Sie es?

    Mit freundlichhen Grüßen,
    Andi Sabortein

    1. NodeCode / Beitrags-Autor

      Hallo,

      Nein, ich habe bisher noch nichts von Webix gehört, deshalb kann ich auch nichts weiter darüber sagen. Sieht aber auf jeden Fall recht interessant aus.

      Grüße,
      NodeCode

hinterlasse einen Kommentar