Bibliotheken und Plugins

Backbone

Backbone wurde von Jeremy Ashkenas ins Leben gerufen und dient der Entwicklung von Single-Page-Webanwendungen (SPA). Backbone.js strukturiert dabei den Code und die Daten mit Hilfe von Modellen für Schlüssel-Wert- Bindung (key-value binding), Ansichten (views), Sammlungen (collections) und Ereignissen (events). So wird das Synchronisieren zwischen verschiedenen Bereichen der Webanwendung wie HTML Oberfläche, JavaScript Logik und Datenbank automatisiert und enorm vereinfacht. Auch das Code-Chaos, das oft aus zahlreichen jQuery Selektoren und Rückrufen entsteht, wird über den an das MVC-Paradigma angelehnten Ansatz von Backbone.js behoben.

Model

Models sind das Herz jeder JavaScript-Anwendung. Sie beinhalten sowohl interaktive Daten als auch ein großer Teil der Logik für die Umsetzung, Absicherung, Berechnungen, Verhalten und der Zugriffskontrolle. Das Model bietet ein Basis-Set an Funktionalität zur Verwaltung der Änderungen. Durch Models werden Daten als reine JavaScript-Objekte gespeichert.

Collections

Collections beinhalten mehrere Models ähnlich einer Datenbank-Tabelle, wobei sich ein Model in mehreren Collections befinden kann. Mit Hilfe von underscore.js können die Collections gefiltert, sortiert, durchsucht oder verändert werden. In die Collection gehören Funktionen, die mehrere Models betreffen.

View

Views sind die Schnittstellen zur Business-Logik der Models und Collections und dient der Darstellung im Browser. Die “render”-Funktion generiert das HTML und kann auch an Model-Change-Events gebunden werden. So wird das HTML immer dann neu generiert, wenn sich Daten im Model ändern. In den Views wird somit eine interaktive Benutzerschnittstelle definiert.

Router

Router hören auf sich ändernde URLs und führen eine darauf registrierte Funktion aus. Dies kann beispielsweise das Rendern einer View sein.

Siehe auch

Backbone JS Website

Underscore

Underscore.js unterstützt funktionale Programmierkonstrukte für den Umgang mit Objekten, Arrays und Collections und ist sehr stark mit Backbone.js verbunden. So lassen sich Daten aus Collections durch beispielsweise die Funktionen each, sortBy, filter, find usw. schnell bearbeiten, um die Ausgabe nach Belieben anzupassen.

RequireJS

RequireJS modularisiert das JavaScript durch das Zerteilen des Codes in Module und ermöglicht so, einzelne Module von unterschiedlichen Entwicklern zu schreiben, die unabhängig voneinander laufen, weiterentwickelt, getestet oder gar ausgetauscht werden können.

Siehe auch

Require JS Website

Handlebars

Handlebars ist eine clientseitige Templating-Engine, um HTML-Templates mit Werten aus beispielsweise JSON zu befüllen und an der vorgesehenen Stelle anzeigen zu lassen. Templating-Engines werden eingesetzt, um das HTML von der JavaScript- Logik zu separieren und somit eine bessere Wartbarkeit zu erzielen. Bei unserer Web- App holt die View Daten aus dem Model und übergibt das Objekt an Handlebars. Handlebars befüllt das HTML-Template mit den Werten aus dem Model und liefert es als String an die View zurück, wo das Template gerendert und dem Benutzer angezeigt wird.

Siehe auch

Handlebars Website

Swiper

Wir testeten die Bibliothek Hammer.js, welche jQuery benötigt. Die Funktionsvielfalt ist nicht so groß, wie bei Swiper und auch die Performance konnte nicht überzeugen. Dies äußerte sich durch ruckelnde Übergänge und schlechter Reaktionszeiten. Um beim Benutzer das Gefühl einer nativen App zu erzeugen, sind diese beiden Kriterien jedoch hoch anzusiedeln. Swiper von iDangero.us ist ein freier, mobiler und leichtgewichtiger Slider mit hardwareunterstützten Übergängen. Swiper wurde in nativem JavaScript entwickelt und ist dadurch sehr performant. Darüber hinaus bietet Swiper eine umfangreiche API sowie eine Vielzahl an Optionen zum Individualisieren des Sliders. Swiper unterstützt viele Gesten wie beispielsweise drag und slide.

Siehe auch

Swiper Website

Fastclick

Fastclick ist ein einfaches Plugin, um die Verzögerung von 300ms zwischen einem physikalischen Tab und dem abfeuern des „click“-Events auf mobilen Browsern zu unterbinden.

In der Regel warten mobile Browser etwa 300ms nach einem Tab, um zu sehen, ob eventuell ein Zweiter folgt und dadurch ein Doppelklick entsteht. Diese Wartezeit empfinden Benutzer als unangenehm, weil der Eindruck entsteht, dass die App nicht mehr reagiert.

Siehe auch

Fastclick Website