• Jörn Zaefferer mit ‘Developing web applications with jQuery UI’
• Jens Arps mit ‘JS auf mobile devices’

Das Treffen beginnt um 19 Uhr, die Vorträge um 19:30 Uhr und findet in den Räumen von Coworking Cologne statt.

Weitere Links:

• Twitter http://twitter.com/cgnjs
• Google Group http://groups.google.com/group/cgnjs
• Coworking Cologne: http://cowoco.de

Ja … und wir sind der Meinung, es ist sogar essentiell auf diese Weise zu starten.

Dass diese Meinung in der Web2.0 Startups keine große Verbereitung hat, findet man schnell heraus indem man diverse Webservices einmal ohne Javascript besucht.

Doch warum gehen wir diesen, zugegebenermaßen steinigen Weg? Es ist doch so einfach die in Ruby on Rails oder anderen Frameworks verfügbaren Javascript-Helferlein zu verwenden? Nicht zuletzt sind solche Javascript Code-Generatoren ja auch für den Erfolg vieler Frameworks verantwortlich.

Die kurze Antwort:

Wir wollen die Kontrolle über unser Javascript behalten!

Die lange Antwort :

Unauffälliges / Unobstrusive Javascript

Es soll dem User nicht auffallen wenn er die Seite ohne Javascript benutzt. “Wer hat denn schon JS ausgeschaltet?”, ist meist die Gegenfrage. Jede größere Firma, welche halbwegs auf ihre interne Netzsicherheit achtet, wird/sollte JS ausgeschaltet haben. Ein weiterer Vorteil dieser Restriktion ist übrigens, daß die Mitarbeiter sich auf Ihre Arbeit konzentrieren, da das Internetz keinen Spass mehr macht.
Auf mögliche JS basierte Angriffe will ich hier nicht weiter eingehen, Google hilft aber gerne weiter:

http://www.google.de/search?q=Javascript+angriff

Spagetti Code und enge Kopplung vermeiden

Ist die Soße, in diesem Falle JS, erst einmal auf den Nudeln, ist es so gut wie unmöglich sie wieder von den Spagetti zu trennen. Die enge Kopplung von zwei intelligenten Sprachen, bzw. das Generieren von JS mittels PHP, Ruby, Java; macht die folgenden Punkte so gut wie unmöglich:

• JS Fehler finden / Debuggen
• JS Sicherheitslücken finden
• JS Schnelligkeit und Effizienz Testen / Profiling
• Austausch der Soße(JS) je nach Client (IE / mobile Webbrowser / iPhone / ..)
• Wiederverwendung von JS z.B. in einer komplementären Adobe Air Anwendung oder Widgets

Wem diese Punkte nicht reichen, ein weiteres Beispiel:

Bevor CSS in seiner heutigen Anwendung(komplette Trennung von CSS / HTML) populär wurde, schrieben wir es einfach mit in die jeweiligen HTML-Elemente. Kam dann der Kunde und wollte neue Farben, war es ein Heidenspass 150 HTML Dateien anzupassen.

Wie Kontrolle behalten?

Der einzig richtige Weg ist: Lerne Javascript und du wirst es lieben!

Auch ich habe mit den tollen JS Helfer in Rails und cakePHP angefangen, ohne einen blassen Schimmer von der Materie zu haben. Das Ende vom Lied war ein dreckiger Haufen Code und x vertane Stunden mit drei Fragezeichen über meinem Kopf. Das waren übrigens, vor zwei Jahren, die ersten Versuche den SalesKing zu bauen.
Nachdem 3 Versuche und drei Monate Arbeit im Müll gelandet waren, habe ich mich tiefer mit jQuery und Javascript beschäftigt. Es ging nicht von heute auf morgen, doch ein halbes Jahr später hatte ich meine Javascript-Angst überwunden, unter anderem durch das Ormigo Dschungelcamp und Teemow.

Das populärste Javascript-Müll Beispiel ist übrigens seit langem in WordPress, zu finden, die „Artikel schreiben“ Seite enthält 14 Javascripte. Chaos deluxe und keiner weiß warum es noch funktioniert!!!

Unsere Vorgehensweise

Wir sehen in JS den Zucker auf dem Kuchen. Im Gegensatz zu Schokostücken, kommt dieser erst nach dem Backen zum Einsatz.

Der Programmier-Ablauf sieht grob wie folgt aus:

1. Programmieren der Basisfunktionen ohne JS, dafür mit vielen Zwischenseiten.
2. Testen
3. Einbinden der Basis JS Scripte
4. simple ergonomische Verbesserungen z.B. Show/Hide funktion für vormals sichtbare Elemente
5. erweitern des (php/ruby) Code um Schalter zur Erkennung ob es sich um JS-initierte Abfragen handelt (xhr-requests)
6. erweiterte JS Funktionen z.B. direkte Auslieferung von vorherigen Zwischenseiten (z.B. Löschen Dialog) in einer Thickbox. Oder konsumieren vom xml/json Rückgabewerten aus nr. 5.
7. JS Tests / Packing

Das Team um John Resig hat richtig Gas gegeben und wirklichen Porno-Code produziert! Mein letzter Post bezüglich des jQuery SVN hat sich mal wieder bewahrheitet, denn ich habe heute abend erstmal 2 Stunden Javascript Code gelesen.

Hier gehts zur Update Beschreibung im jQuery Wiki, mit vielen Demos.

Als kleines Schmankerl solltest du schon mal den SVN Trunk auschecken, denn da sieht man schon so einiges von der neuen UserInterface(UI) Library.

I was pretty surprised when i looked at the UWA code and found that they had taken a big gulp of the MooTools javascript library. Now we are getting somewhere i thought instantaneously. I work mainly with jQuery, but also hit prototype / Scriptacoulus, Rico, Dojo and Ext along the road. I´m exited to finally meet the missing babe and take it for a little drive.

I think it was the right decision from Netvibes to implement such an advanced lib in comparison to the raw prototype methods they had in there before. Now one can easily do funky stuff like DOM Element juggling(Drag/Slide/Sort) or DOM Element CRUD, besides just using the native extension of core objects (Array/Object/..).

This will definitely lead to a broader adaption by developers and will also lead to more interactive widgets. One of the first is the facebook Widget Netvibes just showcased.

Oh my… the TwitterKing update will be more than just a bugfix release

For those that just can´t wait here is the link to the dev version of the widget. (Don´t expect too much i just fixed some bugs yesterday)

Seitdem auch jQuery Plugins im SVN vertreten sind, hole ich mir dort meine tägliche Portion Javascript (der Arzt empfiehlt: min 200g/Tag). Für alle JavaScript-Begeisterten deshalb hier nochmal der svn link:

svn co http://jqueryjs.googlecode.com/svn/trunk

Für passionierte JavaScript-Köche, noch ein Serviervorschlag:

Machen Sie Ihren Code schmackhafter und servieren Sie die fettarme jQuery JavaScript Bibliothek in Verbindung mit dem lecker luftigen JAMAL Javascript MVC Framework. Die Zubereitung wird Ihnen demnächst mit dem JamalBuilder vereinfacht.

Keine Ahnung wovon ich schreibe? Dann wird es Zeit das du dir Subversion (Versionsverwaltung) und jQuery (Javascript für Dummi´s) reinziehst.

Doch Scripte wie Scriptacoulus, OpenRico oder die Generierung mittels Framework bergen einen Nachteil: Sie verschmutzen den HTML Code durch ihr inline Markup. Das lässt sich mit CSS vergleichen, welches direkt in das html Element geschrieben werden kann(inline css) oder eben getrennt in der CSS Datei liegt.

 jQuery erlaubt diese Trennung von HTML und JS.  So wie CSS die grafische Formatierung von HTML abtrennt, werden JS Effekte und AJAX  entkoppelt. Der HTML Code bleibt sauber, das JS lässt sich leichter warten und wiederverwenden. Zu alledem birgt jQuery aber noch zwei weitere essentielle Vorteile: Es ist verdammt klein (15kb) und die Syntax der JS Aufrufe ist hammer simpel.

jQuery findet die HTML Elemente über die DOM Struktur, spezielle CSS Klassen und/oder ID´s. Es ist z.B möglich alle Links innerhalb aller p´s und div´s  zu finden und diese fett zu markieren:

$("p,div").find("a").css("fontWeight","bold");

Richtig lustig wird das Ganze natürlich erst mit Effekten. z.B.  Wenn das Element mit ID "show" geklickt wird, öffnet sich ID "content".

——————————————-
$("#show").click(function(){
$("#content").slideDown("slow");
return false;
});
———HTML———
< h2 id="show" >aufklappen</h2>
<div id="content">text</div>
——————————————-

Die Effekte in jQuery selber sind noch etwas reduziert. Es gibt aber Plugins, die den Spass nicht so schnell enden lassen, einer ist jQuery Corner. Wer sich an runden Ecken mit Rico versucht hat, weiss wie sehr das abnervt. Mit jQuery Corner klappt es im Nu:

——————————————
 $("#meine_Box").corner();
———HTML———
<div id="meine_Box"> Ich JS Dummi </div>
——————————————-

Als ich jQuery vor ca. einem halben Jahr fand, dachte ich mir: "Das ist so klein und simple, das kann ja nichts sein.".
Zum Glück machte mich Teemow auf die Vorteile aufmerksam, so dass ich gestern eine kleine jQuery Nacht eingeschoben habe. Ich könnte noch weiter von dem Script schwärmen, doch checkt es einfach selber an.

Das jQuery mit seinem Ansatz auf dem richtigen Weg ist, zeigt auch die Integration in sehr grosse Seiten wie z.B. Technorati.

Für alle die noch nicht soviel über AJAX Wissen, ist der folgende Chart, der die Unterschiede zwischen einer klassischen Web-Anwendung und einer AJAX basierten Web Anwendung zeigt.