Javascript-Frameworks: heute Prototype +

Das Javascript-Framework Prototype stellt für uns ein Schweizer Taschenmesser in der Javascript-Entwicklung dar. Es erweitert Javascript um nützliche Methoden und Features ohne eine Lösung für alles bieten zu wollen. Wenn man Javascript programmiert, fehlen an manchen Stellen Funktionen oder Shortcuts, um schnell zu einer Lösung zu kommen. Ein Framework ist an dieser Stelle hilfreich, da es die Entwicklungszeit verkürzt und Fehler auch auf verschiedenen Browserplattformen vermeidet.

Das wohl bekannteste Element in Prototype ist das $-Zeichen, mit dem auf HTML-Elemente, die mit einer Id versehen sind, sehr einfach zugegriffen werden kann. Gerade wenn DOM-Manipulationen sehr häufig eingesetzt werden, erleichtert dies die Arbeit, wenn der Code nicht zusätzlich durch document.getElementById() aufgebläht wird. Zudem erweitert die $-Funktion das gefundene HTML-Element um zusätzliche Prototype-Funktionen. Dazu zählt zum Beispiel die Methode update(), mit der der Inhalt eines DOM-Elements sauber geändert werden kann und im String enthaltene Scripte ausgeführt werden. Oft ist es bei dem Seiltanz mit Javascript ein Sicherheitsnetz, welches schwer auffindbare Fehler vermeidet. So werden Elemente auf null oder undefined überprüft, was ansonsten je nach Browser zu seltsamem Verhalten führen kann. … mehr

Da wir häufig mit HTML-Formularen im Javascript arbeiten, sind auch in diesem Bereich die Erweiterungen von Prototype sehr willkommen. Über die $-Funktion kann ein mit Id versehenes Form-Element geholt werden. Dieses wird schon vor der Rückgabe mit Formular-spezifischen Methoden angereichert. Somit können über die Methode getInputs alle Eingabeelemente des Formulars ausgelesen werden. Diese Form-Elemente sind wiederum von Prototype angereichert worden, weswegen über getValue und setValue direkt auf die Werte zugegriffen werden kann. Das selbe Ergebnis lässt sich auch ohne Framework erreichen, ist aber wesentlich aufwendiger. Jede Zeile weniger Code enthält auch weniger Fehler. Deswegen kann nur empfohlen werden, sich selber für häufig genutzte Bereiche Helper-Methoden zu erstellen. Wir haben uns einen Helper erstellt, der ein Javascript-Objekt durchläuft und Daten der Attribute entweder in ein Formular schreibt oder in ein Formular ausliest. So können auch größere verschachtelte Objektgeflechte sehr einfach in Formulare übernommen werden. … mehr

Prototype hat auch eine einfache Template-Engine integriert. Damit ist es möglich wiederkehrende Elemente als Schablone zu hinterlegen, diese über Prototype auszulesen, mit Werten zu füllen und in den DOM zu integrieren. So kann die Logik fertig gestellt werden, während ein Webdesigner noch am Markup feilen kann. … mehr

Mächtige Stringoperationen sind immer ein wertvolles Feature einer Programmiersprache. Auch hier erweitert Prototype das Objekt String um weitere Funktionen. So kann zum Beispiel über die Methode escapeHTML das HTML für eine Ausgabe im Frontend aufbereitet werden. Über die Methode stripTags könnten die Tags entfernt werden, bzw. mit stripScripts können Skripte aus einem String entfernt werden. Zudem bietet sich sehr viel syntactical sugar an, wie die Methoden empty, startsWith oder times verlauten lassen. … mehr

Wie bei allen Frameworks ist die Frage, wie sich Nutzen und die Last ausbalancieren. Entwickelt man größere Teile in Javascript, so ist Prototype ein sehr gutes Framework für die Erweiterung der Basics.

Neben Prototype setzen wir YUI (Yahoo User Interface) für Widgets und DWR (Direct Web Remoting) für den Austausch von Objekten zwischen Java und Javascript über Ajax ein. Dazu mehr in folgenden Einträgen.