Wer schon mehr mit PHP erledigt hat, aber in den letzten Jahren Javascript eher als Pflicht sah (so wie ich), der wird sich im Rahmen des Web 2.0 immer mehr mit der clientseitigen Scriptsprache konfrontiert sehen. AJAX, Datagrid’s, Drag’n'Drop sind nur einige der Punkte, die in modernen Anwendungen immer mehr auch sinnvoll eingesetzt werden und somit direkt beim Schreiben des serverseitigen Codes berücksichtigt werden müssen.

PHP hat uns ja mit all den schönen, einfachen existierenden Funktionen schon verwöhnt. Insofern wird es einige Dinge geben, die man beim Einarbeiten in JavaScript vermissen wird. Beispielsweise die Möglichkeiten beim Umgang mit einem Array.

Beispiel, die PHP Funktion asort, die die Index-Assoziation behält, aber nach Wert sortiert. In PHP ist das kein Problem, nachfolgend mal das Beispiel von der PHP Seite:

<?php
$fruits = array("d" => "Zitrone", "a" => "Orange", "b" => "Banane", "c" => "Apfel");
asort($fruits);
foreach ($fruits as $key => $val) {
    echo "$key = $val\n";
}
?>

Und schon wird alles schön sortiert und in Reihe gebracht. So, wie läuft das jetzt JavaScript? Eine JavaScript-Funktion, die diese PHP-Funktion simuliert (also aus obigem Beispiel nur die Zeile3!) würde so ganze 68 Zeilen lange werden.

Wer in JS schon oft PHP-Funktionen vermisst hat (wie ich eben ), der wird bestimmt mit dem PHP to Javascript Projekt glücklich. Das Projekt stellt eine umfangreiche Bibliothek zur Verfügung, in dem viele PHP Funktionen in JS nachgeschrieben sind. Der Download ist bereits knapp 300 kB groß und ein Schwergewicht, wenn es darum geht diese in eine Website zu implementieren.

Die Projektseite stellt eine gute Funktionsübersicht zur Verfügung inkl. der Abhängigkeiten der einzelnen Funktionen zueinander. Insofern ist es nicht notwendig alle Funktionen zu implementieren, sondern lediglich die benötigten Funktionen inkl. der entsprechenden Abhängigkeiten. Somit schrumpft das Paket auf eine annehmbare Größe. Viel Spaß damit, vielleicht hilfts dem einen oder anderen. PHPJS ist sowohl unter der GPL, als auch unter der MIT Lizenz downloadbar.

Quelle: http://kevin.vanzonneveld.net/techblog/article/phpjs_svn/

Und zwar eine Menge davon. Ganze 70 Scripts gibt’s beim Smashing Magazine zu bewundern. Darunter alte bekannte Scripte, die sich fast in jeder Scriptübersicht wieder finden (Beispiel Fancy Upload, was ich Euch auch hier schon mal präsentiert habe), aber auch einige nennenswerte Neuerscheinungen, z. B. einige sehr schicke DatePicker oder das gut gelungen Upload-Form der ExtJS.

Im Netz gibt es bereits Tonnen von solchen Übersichten. Allerdings fällt momentan auf, dass sich im Endeffekt drei bzw. vier Bibliotheken um die “Krone” streiten. Zum einen sind da JQuery und Mootools, aber auch Prototype und YUI. Wer sich in diesem Zusammenhang beispielsweise mit Joomla beschäftigt, dem fällt auf, dass sich der Kern von Joomla mit MooTools beschäftigt, sich aber einige Erweiterungen an anderen Bibliotheken vergnügen.

Passt der Designer oder eben derjenige, der sich aus den umfangreichen Erweiterungsmöglichkeiten von Joomla die benötigten Module zusammenklickt, an dieser Stelle nicht wirklich auf, kann es durchaus passieren, dass sich verschiedene Scripte in die Wege kommen. Da hier oft nicht die minified Versions in den Erweiterungen verwendet werden, sondern die oft noch großen Entwicklungspakete (wobei ich gar nicht weiß, ob es von Prototype eine minified Version gibt), wird die Seite schnell richtig groß. Im DSL-Zeitalter ist das Laden der Seite nicht mehr das Problem, die Geschwindigkeit mit der allerdings die JS-Engine der Browser den JavaScript-Code verarbeiten aber schon.

Insofern achte ich vermehrt darauf, dass verwendete Erweiterungen (und da war Joomla nur ein Beispiel, das Gleiche gilt für Wordpress, Drupal und viele andere CMS oder Blog-Systeme für die viele Erweiterungen angeboten werden) immer gut zusammenpassen. Manchmal ergeben sich so durchaus aus Sparpotenziale im Code, die man nutzen kann und sollte.

Quelle: 70 New, Useful AJAX And JavaScript Techniques
Quelle: Mootools-Sammlung hier im astBlog

In letzter Zeit haben sich einige Javascript Bibliotheken als ständig präsente Frameworks unter den Webentwicklern etabliert. Selbst große, bekannte Projekte wie Joomla oder Wordpress setzen keine selbstgeschriebenen JS-Frameworks ein, sondern greifen in den Basisfunktionen auf fertige, frei verfügbare Frameworks zurück.

Die bekanntesten Vertreter dieser Gattung dürfen Prototype, JQuery, YUI und MooTools sein. Bei Allen wird eine gewisse Grundfunktionalität zur Verfügung gestellt, die es dann gilt durch eigene Erweiterungen in einem Projekt mit Leben zu füllen.

Im Netz gibt es immer mehr Quellen, die auf Basis dieser Frameworks Scripte für bestimmte Einsatzgebiete zur Verfügung stellen und so den Entwicklern einiges an Arbeit abnehmen, wobei oft nur noch kleinere Anpassungen notwendig sind um die Scripte in eigene Projekte oder Anwendungen zu integrieren.

Nachfolgend mal eine Auswahl meiner Scriptsammlung, die unter dem Mootools Framework funktionieren.

MooFlow

MooFlow ist ein Gallery-Script, das ähnlich Apples iTunes funktioniert. Verschiedene Bilder können geladen werden, die Reflexionen werden automatisch erstellt. Zudem ist eine Zoomfunktion im Lightbox-Stil verfügbar.

Link: http://www.outcut.de/mooflow/overview/
Lizenz: MIT-Style Licence

Phatfusion Image Menu

Das Image Menu von Phatfusion stellt eine Menükomponente im Sliding-Stil zur Verfügung. Das Menü kann schön im Header platziert werden und stellt so einen Blickfang auf einer Website dar.

Link: http://www.phatfusion.net/imagemenu/
Lizenz: MIT Licence

Das PasswordMeter ist ein Programm das bei Eingabe eines Passwortes in ein entsprechendes Feld die Komplexität eines Passwortes in Form eines Balkens wiedergibt. Sowas gibt’s bereits und ist auch keine neue Erfindung.

Das schöne an dem Ding; es ist in JavaScript geschrieben und steht unter der Lizenz GPL. Ihr könnt es also runterladen und in eigenen Web-Anwendungen einbauen.

Wie auf der Seite steht, ist das Script nicht perfekt. Es soll lediglich den Usern einer Seite helfen bei Eingabe bzw. Auswahl eines Passwortes einen Anhaltspunkt auf die Sicherheit zu geben. Das ein Passwort nicht von Personen mit entsprechendem Hintergedanken trotzdem gefunden wird, kann natürlich nicht garantiert werden, auch wenn das PasswortMeter das Passwort als "very strong" einstuft.

Der Download-Link steht übrigens gaaaanz unten auf der Seite.