Wie letzte Woche angekündigt, habe ich mich mal ein wenig nach jQuery-Alternativen umgeschaut! Und ich bin hier und da fündig geworden. Für den Heutigen Eintrag habe ich mir „Snack“ ausgesucht – ein sehr schlankes Framework (ca. 3,4kB GZipped), das mit dem folgenden Spruch wirbt:

Snack is a small and simple JavaScript library. Though ideal for small projects, it’s got enough in it to build complex, cross-browser web apps.

Das Snack Javascript Frameworks

Was so viel bedeutet wie „Snack ist eine kleine und einfache Javascript Bibliothek. Auch wenn sie ideal für kleine Projekte ist, hat sie genug drauf für komplexe, Cross-Browser Web-Apps.“.

Im offiziellen Github-Repo gibt es eine kleine Doku die ein paar Features und Funktionen aufzählt – Dabei bin ich über folgendes gestolpert:

Use any selector engine. Ships with multiple builds (QSA, Qwery, Slick, Sizzle)

Und ehrlich gesagt ist es das erste mal das ich von so einem Feature höre… Interessante Idee!

Was bringt Snack mit?

Das Framework bietet uns Methoden für:
Ajax, JSONP, Event-Handler und -Listener, „publisher„, Hinzufügen und entfernen von CSS Klassen, Daten und Events auf HTML Elemente ablegen und löschen und ein paar Helper wie z.B. „isArray„, „parseJSON„, „each„, „indexOf„, …

Also alles wichtige?

Theoretisch schon – Allerdings setzt Snack die Nutzung von nativen Javascript Methoden voraus, wenn man HTML Elemente bearbeiten oder deren Position im DOM verändern will. Während es noch recht einfach ist, Attribute & Co. zu verändern wird es z.B. mit der positionierung DOM nicht so leicht… Das ist ein ziemlicher Minus-Punkt 🙁

Was ebenso fehlt ist eine Funktion zum animieren von Elementen – hier könnte man zwar CSS Transitions mit Hilfe von CSS Klassen benutzen, doch das würde auch bedeuten das unsere Seite nur in modernen Browsern lauffähig wäre.

Und was sind die Pluspunkte?

Als Pluspunkte hingegen kann man die modulare Selektor-Engine so wie die schlichte Objekt-Vererbung aufzählen!
Ein weiteres schönes Feature: snack.punch(). Diese Funktion erlaubt es uns, eine Funktion an eine andere zu ketten:

var obj = {
  farbe:"rot",
  wechsel_farbe:function (farbe) {
    this.farbe = farbe;
  }
};

var farben_logger = function (farbe) {
  console.log("Die Farbe wurde geändert: " + farbe);
};

console.log(obj.farbe);
// Nun ketten wir "farben_logger" an "wechsel_farbe"...
snack.punch(obj, "wechsel_farbe", farben_logger, true);
obj.wechsel_farbe("grün");
console.log(obj.farbe);

Dieser Code würde folgendes ausgeben:

"rot"
"Die Farbe wurde geändert: grün"
"grün"

Was mir auch sehr gut gefällt ist ein Feature der Event-Listener: Diese lassen sich nämlich zur Laufzeit ein- und ausschalten. Bedeutet also, ich kann problemlos „click“ Events vorübergehend deaktivieren – das könnte nützlich sein, wenn man mit Modalen-Fenstern arbeitet und die Buttons „im Hintergrund“ deaktivieren möchte.

Sehr viel mehr interessante Features kann ich leider gar nicht aufzählen – Es ist eben eine sehr schlichte Bibliothek 😉 Bei einem weiteren Blick in das Github-Repo fällt dann allerdings doch noch eine Kleinigkeit negativ auf: Der letzte commit ist inzwischen über ein Jahr her und ich konnte nicht herausfinden, ob noch aktiv am Projekt entwickelt wird. Wenn jemand genauere Infos hat, kann er sich gerne via Kommentar melden!

Bis dahin möchte ich euch mit „Snack“ alleine lassen – Schaut es euch an und schreibt mir, was ihr davon haltet!

Ich wünsche euch einen angenehmen Feiertag und eine ruhige Rest-Woche – Ich freue mich, wenn ihr auch nächste Woche wieder vorbei schaut! Bis dahin wünsche ich allen Lesern und Leserinnen Happy Coding!