Hallo zusammen, eigentlich wollte ich Heute ja etwas mehr zu den neuen PHP 5.4 Features schreiben – Doch ich bin letzte Woche leider nicht mehr dazu gekommen die neuen Features selbst zu testen.
Stattdessen möchte ich euch ein vielversprechendes Framework vorstellen, das ich vor ein paar Tagen gefunden habe: zepto.js!

Zepto ist ein Javascript Framework, speziell auf mobile Geräte (Android, Blackberry, iPhone, …) und moderne Browser zugeschnitten. Derzeit ist Zepto noch in der Beta Phase (v0.8) und lässt sich auf github aktiv mit-entwickeln.

Zepto verfolgt ein paar einfache Ziele: Es möchte schlank, schnell und modern sein.

Primär wird es für Smartphones und andere mobile Geräte (z.B. Tablets) entwickelt. Aus diesem Grund soll Zepto so klein wie möglich sein (2kB komprimiert + GZipped), sich aktuellster HTML5 und CSS3 Features (unter anderem CSS animationen) bedienen und sogar „Gesten“ erkennen („tap“, „doubleTap“, „swipe“, „pinch“, …). Zweitrangig liegt der Fokus auf der aktuellen Browser-Generation.

Auf der Homepage von Zepto wird übrigens eine klare Aussage bezüglich dem Internet Explorer gemacht…

Zepto does not support Internet Explorer.

… Zugegeben, bei dem Satz musste ich grinsen 😉

Die Syntax von Zepto ist übrigens beinahe identisch zu der von jQuery – Ein jQuery Skript sollte sich dadurch ohne zu großen Aufwand kopieren und verwenden lassen.

Da Zepto noch im Beta Stadium ist würde ich das flinke Framework vorerst noch mit Vorsicht genießen – Mir ist z.B. im Firefox (Version 10.0.2) folgendes Verhalten beim animieren von Elementen aufgefallen:

<!-- Beispiel HTML -->
<div id="anim1" style="position:absolute;">Demo DIV</div>

/*
 * Diese animation wird nicht ausgeführt.
 * Das Element bekommt sofort den inline-style "left:20px;".
 */
$('#anim1').animate({left:'20px', rotate:'90deg'}, 1000);

Verändern wir den CSS Style jedoch wie folgt, wird die Animation (in unregelmäßigen Abständen) ausgeführt:

<!-- Angepasstes Beispiel HTML -->
<div id="anim1" style="position:absolute; left:0px;">Demo DIV</div>

Im Chrome-Browser funktionieren die animationen übrigens ohne Probleme (das gleiche dürfte für die anderen WebKit Browser gelten) – Nur im Firefox konnte ich diesen Bug (?) nachstellen. Opera habe ich nicht getestet und im IE wird es wohl ohnehin nicht funktionieren 😉 Vielleicht ist es auch gar kein Bug, da in der Dokumentation steht, das Zepto zum animieren CSS Transforms benutzt… Ich habe das Verhalten auf github berichtet und werde hier updaten, sobald ich eine Antwort bekommen habe.

Zepto bleibt jedenfalls ein spannendes Thema und ich freue mich darauf die nächste mobile Webseite mit dessen Hilfe zu entwickeln! Für alle interessierten habe ich hier noch den Link zu Zepto auf Twitter und Zepto auf github.

Frohes Coding zusammen!

Update 23:19 Uhr:

Ich habe grade einen Fehler an meinem Beispiel-Code gefunden:

$(document).ready(function(){
    $('#anim1').animate({left:'20px', rotate:'90deg'}, 1000);
});

Diese zwei zusätzlichen Zeilen lösen im Firefox das Problem, das die Animation nur „manchmal“ abgespielt wird. Allerdings bleibt der Fehler bestehen, dass das Element nicht von links nach rechts animiert wird (sofern im CSS Style kein left:0; definiert wurde).

Update 16.März, 22:28 Uhr:

Auf github hatte ich eine kurze Konversation bezüglich dem Animationsproblem – Hier ist nicht Zepto sondern Firefox Schuld. Um es ganz knapp zu erläutern:
Zepto nutzt reine CSS transitions zum animieren und Firefox erkennt einen ungeschriebenen Style nicht als „0“ Wert an, weshalb es keinen „Startpunkt“ der Animation gibt. Definieren wir das CSS Attribut selbstständig kann Firefox damit arbeiten. Ob letztendlich ein Fallback/Patch in Zepto einfließt kann ich nicht sagen, das ist Entscheidung der Entwickler.

Update 19.März, 21:25 Uhr:

Der Patch wird seinen Weg leider nicht in das Zepto Framework finden, aber es soll eine entsprechende Notiz in der Dokumentation erscheinen.