© saicle/Shutterstock.com
Eine Einführung in die minimalistische JavaScript-Bibliothek Zepto

jQuery auf Diät


Angesichts der immensen Verbreitung der von John Resig entwickelten jQuery-Bibliothek gibt es mittlerweile ernsthafte Diskussionen, ob angehende Webentwickler lieber JavaScript oder jQuery lernen sollen. Dass das eine eine Untermenge des anderen darstellt, wird geflissentlich ignoriert. Aber was ist eigentlich mit Zepto? Manch einer mag die minimalistische JavaScript-Bibliothek mit jQuery-inspirierter Syntax schon vergessen haben. Warum sich ein Blick auf den Evergreen aber durchaus lohnt, erklärt dieser Artikel.

Abseits der für klassische Informatiker immens lustigen Debatten um jQuery und JavaScript muss allerdings festgehalten werden, dass jQuery alles andere als klein ist. In Zeiten von Content Delivery Networks mag dies nicht von besonderer Relevanz sein: Wer eine weit verbreitete Bibliothek von einem beliebten CDN einbindet, kann sich darauf verlassen, dass eine andere Website dafür gesorgt hat, dass die Datei bereits im Browsercache des Nutzers ist. In der Praxis gibt es allerdings immer wieder Situationen, wo es auf die maximale Performance ankommt. Ein Beispiel dafür wären JavaScript-basierte Prozessrechner, bei denen der zur Verfügung stehende Codespeicher nicht uneingeschränkt ist und es ob der schwachbrüstigen CPU auf jedes Kilobyte Code ankommt (Stichwort Startzeit). Zudem gibt es immer wieder Szenarien, in denen Content Delivery Networks nicht erlaubt sind oder in denen man als Entwickler Browser unterstützen muss, die von jQuery im Laufe der Zeit nicht mehr abgedeckt werden.

In diesem Moment schlägt die Stunde einer als Zepto bezeichneten Bibliothek (Kasten: „Des Handcomputerprogrammieres Liebling“). Das Projekt, im Jahr 2010 von Thomas Fuchs erdacht, ist ein Evergreen der JavaScript-Welt und zeigt sich – im Großen und Ganzen – mit jQuery kompatibel. Vor allem aber kommt das Produkt je nach Konfiguration mit 5 oder 10 KB kompiliertem Code aus.

Dieser Artikel bietet eine kurze Vorstellung der Bibliothek. Und dank des sehr kompakten Aufbaus haben wir hier sogar eine realistische Möglichkeit, das Produkt als Ganzes abzudecken.

Des Handcomputerprogrammierers Liebling

Thomas Fuchs hatte Zepto ursprünglich als abgespeckte Alternative für die Arbeit mit PhoneGap vorgesehen. Aus diesem Umstand folgt eine sehr interessante Kompatibilitätsliste. Neben den Klassikern unterstützt die Bibliothek im Großen und Ganzen nämlich auch einige seltenere Betriebssysteme. Einige besonders interessante Kandidaten sind beispielsweise Palms WebOS, ältere Versionen von Android, BlackBerry 10 und sogar alte Versionen von Safari für iOS.

Das Core-Modul von Zepto kommt minifiziert auf nur fünf Kilobyte. Es gibt immer wieder Szenarien, in denen man für die im Artikel weiter unten besprochenen Erweiterungsmodule keinen Bedarf hat und somit wirklich mit einer Dateigröße von fünf Kilobyte auskommen kann.

Eine Frage der Modularisierung

Als der Autor dieser Zeilen vor vielen Jahren an einer drittklassigen österreichischen technischen Hochschule einen Analogrechner aus dem Hause Telefunken zerlegen musste, bewunderte er den stark modularen Aufbau des in der Zerstörung befindlichen Rechenbiests. Es handelte sich um ein System, das wirklich in seine Einzelteile zerlegbar war. Sowohl bei der Reparatur als auch beim Verkauf hilfreich, konnte Telefunken auf diese Weise nicht benötigte Teile weglassen, um das Gesamtsystem preiswerter anbieten zu können.

Im Hause Zepto setzt man auf ein ähnliches Konzept. Die Bibliothek besteht aus einem guten Dutzend Modulen, die in Tabelle 1 kurz zusammengefasst sind.

Modulname

Kurzbeschreibung

In Standarddistribution

zepto

Kernmodul

ja

event

Erweiterungen für eventgetriebene Programmierung

ja

ajax

XMLHttpRequest

ja

form

Methoden zur Serialisierung von Formularen

ja

ie

Unterstützung für Internet Explorer 10

ja

detect

Erkennung von Browser und Hostbetriebssystem

nein

fx

„Animate()“-Methode

nein

fx_methods

Vordefinierte Beispielanimationen für Animate

nein

assets

Bessere Speicherverwaltung für iOS; experimentell

nein

data

„Data()“-Methode

nein

deferred

Möglichkeit zur Nutzung von Promises

nein

callbacks

Erweitert „$.Callbacks“ um die Möglichkeit, im Deferred-Betrieb zu arbeiten

nein

selector

Emuliert ein Subset von jQuerys CSS-Selektoren

nein

touch

Touchscreen-Basisbibliothek

nein

gesture

Gestenerkennung für Pinch-to-Zoom

nein

stack

Methodenverkettung

nein

ios3

Unter iOS 3 nicht implementierte Hilfsfunktionen

nein

Tabelle 1: Die Module von Zepto

An einer eigenen Version von Zepto interessierte Entwickler erreichen dieses hehre Ziel auf zwei Arten: Erstens kann der gesamte Quellcode heruntergeladen werden, um daraufhin unter Nutzung von Node-basierten Werkzeugen eine eigene Version zu kompilieren. Alternativ dazu bietet sich der unter http://github.e-sites.nl/zeptobuilder/ bereitstehende zepto builder an, der nach dem Öffnen in einem beliebigen Webbrowser das in Abbildung 1 gezeigte Benutzerinterface auf den Bildschirm bringt.

hanna_zepto_1.tif_fmt1.jpgAbb. 1. Dank des zepto builders müssen Entwickler nicht mit der Node-Kommandozeile kämpfen

Im Interesse der Einfachheit wollen wir an dieser Stelle trotzdem mit der Standa...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang