Tag: javascript

Mashi: JavaScript-Toolkit für Timeline-Animationen

Für linear ablaufende Animationen (etwa in Slideshows, Produkt-Präsentationen oder E-Learning-Anwendungen) im Web bietet sich neben Flash der Einsatz von JavaScript an. So können beispielsweise längere Texte in mehrere Bereiche aufgeteilt werden, die per Klick nacheinander angesehen werden können. Auch Geschichten lassen sich durch lineare Abläufe oder Bilderfolgen in HTML erzählen.
Ein aktuelles Toolkit, mit dem sich solche Anwendungen in JavaScript entwickeln lassen, stellt Mashi dar. Dieses Projekt von Uli Preuss und Alp Uçkan soll die Umsetzung von JavaScript-Animationen, die auf Zeitleisten (Timelines) basieren, vereinfachen.

Das Mashi-Toolkit steht als Paket zum Download bereit und kann sofort eingesetzt werden. Die Bibliothek kommt mit einem eigenen Namespace, so dass es auch in Kombination mit anderen Frameworks eingesetzt werden kann. Ein Mashi-Projekt unterliegt einer bestimmten Modul-Architektur, so dass die eigentliche Logik für die Animationen in einer separaten Datei ("app.js") platziert ist. Ein Beispiel:

• app.add(2000, function() {
• app.set({
• html: 'Ich bin ein Mashi-Projekt.',
• style: {
• backgroundColor: '#123456'
• }
• });
• });
•  
• app.add(1000, function() {
• …
• });

Die Einstellung "2000" in Zeile 1 bewirkt also, dass die zweite Funktion in Zeile 10 nach 2 Sekunden durchgeführt wird. So können sehr einfach sequentielle Präsentationen erstellt werden. In der Galerie finden sich erweiterte Beispiele und Infos gibt es in der Dokumentation.

Webentwicklung: Traits in Javascript nutzen

Zur Erweiterung der objektorientierten Programmierung in JavaScript bieten sich verschiedene Bibliotheken und Plugins an — größere Frameworks wie MooTools oder Prototype besitzen von Haus aus schon erweiterte Möglichkeiten wie etwa ein Klassen-System. Um in JavaScript die Vorteile von "Traits" nutzen zu können, kann die kleine Bibliothek "Traits.js" genutzt werden. Bei einem Trait können Funktionen innerhalb eines Objekts gespeichert werden und anderen Funktionen verfügbar gemacht bzw. vererbt werden.

Hier ein einfaches Beispiel, bei dem ein eine Funktion als Komposition an eine andere Funktion übergeben wird.

• function ausserhalb(wert1) {
• return Trait({
• aussenFunktion: function() { return wert1; }
• });
• }
•  
• function funktion1(wert2) {
• return Trait.create(
• Object.prototype,
• Trait.compose(
• ausserhalb("test1"),
• Trait({
• innenFunktion: function() { return wert2; }
• })));
• }
•  
• var objekt1 = funktion1("test2");
• objekt1.aussenFunktion(); // Ausgabe: test1

Komplexere Beispiele für die Anwendung von Traits finden sich bei den Tutorials der Website. Die Trait-Bibliothek nutzt zudem die neue Object-Manipulation API von ECMAScript 5.

JavaScript: Ajax-Inhalt durch Deep-Links darstellen

Der Artikel bei Impressive Webs ist zwar schon etwas älter, aber vielleicht kann er bei dem einen oder anderen Web-Projekt behilflich sein. In dem Beitrag geht es um die Umsetzung von Deep-Links in JavaScript- und Ajax-Anwendungen. Das bedeutet, dass bestimmte Inhaltsbereiche über einen Hash-Link (#-Zeichen) abgerufen und dargestellt werden können. In dem Artikel wird die Programmierung einer solchen Funktionalität in JavaScript beschrieben.

Neben dem eigentlichen JavaScript-Teil ist auch die Umsetzung der eigentlichen Seite interessant: Hier wurde eine PHP-Datei geschrieben, die verschiedene Inhalte per GET-Parameter im Stil von "?view=employee1" darstellt. Durch JavaScript wird anschließend der Teil "?view=" durch das Hash-Zeichen "#" ersetzt, so dass entsprechende Deep-Links entstehen, die bei einem direkten Aufruf den referenzierten Inhalt darstellen. Auf der Demo-Seite kann die Funktionalität angesehen werden.
Das Ganze lässt sich auch sehr einfach mit jQuery umsetzen, falls mit der Bibliothek gearbeitet wird. Hier wird der Ajax-Inhalt in den Container mit der ID "ajaxcontent" geladen:

• $(document).ready(function(){
• function ajaxHashContent(ajaxFile) {
• $("#ajaxcontent").load(ajaxFile);
• }
•  
• ajaxHashContent(location.hash.substr(1) + ".html");
• });

Voraussetzung ist natürlich, dass die Ajax-Dateien die Endung ".html" besitzen und sich im gleichen Verzeichnis befinden.

JavaScript: Vergleich verschiedener Kompressoren

Wenn es darum geht, komprimierten JavaScript-Code im Web auszugeben, bietet sich Minification (oder "Minify") an — dadurch werden unnötige Zeichen (etwa Zeilenumbrüche, Trennzeichen oder Kommentare) vom Quellcode entfernt, ohne dabei die Funktionalität des Skriptes einzuschränken. Zusätzlich werden alle Variablen und Funktionen durch einstellige Bezeichnungen ersetzt (Shrinking) und die Zahl von wiederkehrenden Zeichen wird durch eine Base64-Komprimierung, welche vom Browser dekomprimiert werden kann, reduziert. Wenn zudem eine serverseitige GZip-Komprimierung erfolgt, kann sehr viel Speicherplatz eingespart werden.
Da es verschiedene Kompressoren gibt (JSMin und Packer zählen zu den beliebtesten Projekten), lohnt sich ein Blick auf die Unterschiede der Komprimierung. Hierzu kann der CompressorRater verwendet werden, der verschiedene Kompressoren auf JavaScript-Code anwendet und entsprechende Kompressionsraten grafisch darstellt.

Die Überschrift des CompressorRaters lautet "JavaScript Compressor and Comparison Tool", denn auf der Seite können auch die verschiedenen Resultate des komprimierten JavaScript-Codes angesehen und kopiert werden. Zu den verfügbaren Kompressoren zählen JSMin, Packer, Dojo ShrinkSafe sowie der YUI Compressor. Nützlich sind die aufgeführten Beispiele, zu denen große JavaScript-Frameworks zählen. Hier lohnt sich Minification besonders und somit kann ein Vergleich hilfreich sein.

JS1k: JavaScript-Demos mit 1024 Bytes

Eigentlich wollte ich schon letzte Woche darüber berichten, doch da die Seite noch recht leer war, habe ich noch etwas gewartet. Inzwischen dürfte das Projket JS1k bekannt sein — dabei handelt es sich um einen Demo-Contest, bei dem es darum geht, JavaScript-Animationen bei einer Größe von maximal 1 KB zu realisieren. In den JavaScript-Snippets dürfen keine externen Frameworks verwendet werden. Hacks zur Optimierung und Minification sind hingegen zulässig. Mittlerweile stehen etliche Demos zur Begutachtung bereit.

In den bisherigen Einsendungen finden sich viele grafische Effekte und Spiele. Als Preise winken verschiedene Bücher, Beta-Accounts und Workshops. In der Jury befinden sich bisher Remy Sharp (JS Bin), Thomas Fuchs (Script.aculo.us) und Patrick H. Lauke. Einsendungen sind noch bis zum 10. September möglich.
Das Projekt wird zeigen, ob sich mit JavaScript eine ähnliche Demoszene entwickeln wird, wie es sie schon in anderen Programmiersprachen gibt.

JavaScript: Alternative Methoden für If-Bedinungen

In Skriptsprachen stellt eine If-Bedingung die einfachste Form einer Abfrage dar, mit der sich Variablen und Objekte überprüfen lassen. Auch wenn If- und Switch-Bedingungen eine einfache Möglichkeit zur Überprüfung darstellen, gibt es oft elegantere Wege für die Erstellung von Kontrollstrukturen. Einige Optionen zeigt so auch Angus Croll in einem Blog-Eintrag. Darin erklärt er verschiedene Alternativen und geht dabei auf die Aspekte "Statement-Branching" (Ersatz von if, else, switch, for, while) und "Micro-Branching" (Nutzung von && und ||) ein.

So lassen sich in der Regel längere If-Bedinungen beispielsweise durch die Verwendung des "||"-Operators verkürzen. Weiterhin können Switch-Abfragen durch in Objekte verschachtelte Funktionen ersetzt werden. Der Artikel dürfte für objektorientierte Entwicklung in JavaScript einen Blick wert sein.

jsPerf: JavaScript-Performance testen

Kürzlich hatte ich über einen Artikel berichtet, der sich mit der Erstellung von schnellen Schleifen in JavaScript beschäftigte. Auch im Nokia-Wiki finden sich gute Tipps zur Performance-Optimierung in JavaScript. Wer nun die Geschwindigkeit von bestimmten Snippets ausprobieren und vergleichen möchte, kann hierzu nun jsPerf verwenden. Auf der Seite können "Test Cases" angelegt werden, in denen die gewünschten Code-Snippets eingefügt werden müssen.

Anschließend werden die Snippets von der Website in mehreren Durchgängen ausgeführt — als Resultat erhält man Zahlen, welche die durchgeführten Operationen pro Sekunde (Ops/sec) darstellen. Je mehr Operationen also in der Sekunde ausgeführt werden könne, desto ergiebiger das entsprechende Snippet.
Wer sich inspirieren lassen will, kann sich zuerst auch die bestehenden Tests ansehen, die zum Teil sehr interessante Vergleiche beinhalten.

JavaScript: Framework-Updates und Neuerungen

Neben jQuery wurden auch andere JavaScript-Frameworks mit größeren Updates versorgt, die vor allem Funktionalitäten für mobile Geräte mitbringen. Zudem wurde das Team hinter dem Ext JS-Framework in "Sencha" umbenannt und hat gleich ein komplettes HTML5-Framework für Mobilgeräte ins Repertoire aufgenommen. Die eigentliche Bibliothek besteht weiterhin und hat kürzlich ein Beta-Update erhalten.
Es ist beeindruckend, dass die großen JavaScript-Bibliotheken an der Entwicklung von HTML5 und CSS3 maßgeblich teilnehmen. Web-Anwendungen können so noch besser optimiert werden und sind zudem für die Zukunft gewappnet.

Für folgende Frameworks gab es also kürzlich wichtige Updates:

• The Dojo Tookit 1.5 – Neues Theme, mobile Funktionen (dojox.mobile) und Unterstützung für HTML5- und CSS3-Elemente
• YUI 3.2.0 Preview – Mobile Funktionen (Touch Events), Transitions und Verbesserungen bei den CSS Grids
• Ext JS 3.3 Beta – PivotGrids, Kalender und funktionelle Spalten (ActionColumns)

Beim Prototype-Framework steht Version 1.7 in den Startlöchern und bei Adobes Spry-Bibliothek wurde die Spry UI eingeführt.