Ursprünglich wollte ich anstelle des interaktiven Schreibtischs eigentlich das Kochbuch weiterentwickeln, das wir vorletztes Semester eingereicht hatten, und dazu ein PHP-Backend entwickeln. Das Problem war aber, dass ein Besucher mit PHP nicht viel anfangen kann, da man nicht viel davon sieht, und dass ich das Kochbuch nicht öffentlich zur Bearbeitung freigeben möchte.
In einer Sitzung mit Thomas Weibel entstand dann die Idee für den interaktiven Schreibtisch. Anfangs wollte ich - wie beim Kochbuch - auf jegliche Frameworks verzichten. Allerdings stiess ich relativ schnell an meine Grenzen. Bei wirklich jedem neuen Element musste wieder ein ganzer Stamm an Funktionen und Handlern erstellt werden und es entstand ein riesiger Spaghetticode. Aus diesem Grund habe ich mich dann dafür entschieden, interact.js für die Drag-and-Drop-Geschichten zu verwenden. interact nimmt einem zwar nicht extrem viel Arbeit ab (die Elemente verschieben muss man mit den ausgelesenen Werten immer noch selber), aber es bietet den sehr grossen Vorteil, dass sich einmalig registrierte Handler auch auf neue Elemente auswirken. In Verbindung mit jQuery konnte ich dann mehr oder weniger effizient arbeiten.
Eine weitere Herausforderung war es, die Elemente im Schreibtischbereich anzuordnen. Ich wollte alles möglichst benutzerfreundlich gestalten und dazu gehörte auch, dass sich die Elemente überlappen und man mit einem Klick entscheiden kann, welches Element zuvorderst ist. Diese Informationen müssen natürlich auch persistent gespeichert werden. Ausserdem musste die Widgetleiste links, wenn sie eingeblendet war, immer im Vordergrund sein. Das alles musste ich mit der CSS-Eigenschaft z-index realisieren, und bei einer Änderung diese automatisch in die Datenbank schreiben.
Diverse Probleme und Inkonsistenzen ergaben sich durch die AJAX-Funktionalität. Wenn der Benutzer eine Bearbeitung macht, die 2 Requests erfordert (zum Beispiel das Ziehen eines neuen Widgets in den Arbeitsbereich), kommt es ab und zu vor, dass der zweite Request schon durch ist, während der erste noch unterwegs ist.Das führt dann dazu, dass der Server mit dem zweiten Request nichts anfangen kann und gewisse Informationen nicht gespeichert werden. Gerade beim Erstellen neuer Widgets kann man das sehr gut beobachten: Je schneller man sie in den Arbeitsbereich zieht, desto höher ist die Wahrscheinlichkeit, dass das passiert. Wenn man das Problem wirklich ernsthaft lösen möchte, müsste man eine Queue bauen, in der man alle Requests speichert und die dann synchron abgearbeitet werden. Dies hätte jedoch den Umfang des Projekts gesprengt, weil mir die Problematik erst ganz am Schluss beim Testen während einer Zugfahrt aufgefallen ist.
Ein weiteres Problem betrifft die Aktualisierung der News. Diese funktioniert nicht in jedem Browser. Grund dafür ist die Same-Origin-Policy, die das Nachladen von Inhalten aus einer externen URL nicht erlaubt. Es gibt jedoch eine Methode, wie es trotzdem klappt: Der Webstandard heisst CORS (Cross Origin Resource Sharing). Dabei sendet der Server, welcher die Informationen bereitstellt, einen bestimmten Header mit, der deklariert, dass diese Resource auch aus einem frenden Kontext gelesen werden dürfen. 20min und Tagesanzeiger tun das zum Beispiel und können deshalb ausgelesen werden, aber leider wissen auch hier noch nicht alle Browser, dass es diesen Standard gibt. Im Internet Explorer läuft zum Beispiel das Nachladen nicht und es wird einfach ewig das Ladeicon angezeigt. Das Thema CORS ist jedenfalls so umfangreich, dass man allein darüber schon einen ganzen Digezz-Beitrag schreiben könnte.
Alles in allem bin ich mit dem Projekt nur halb zufrieden. Wenn man den richtigen Browser verwendet, funktioniert die Applikation zwar zuverlässig, aber sobald man ein wenig variiert, kann es zu Problemen kommen. Man müsste jetzt noch jeden Browser installieren, die Funktionalität austesten und den Code noch entsprechend erweitern. Aber dazu hat mir die Zeit nicht mehr gereicht.
Etwas ist mir jedoch sehr gut gelungen. Anfangs wollte ich den Schreibtisch so bauen, dass man sich mit Name und E-Mail-Adresse registrieren muss und war schon dabei, das Registrierungsformular zu erstellen. Dann dachte ich aber, dass ich als Besucher sicher nicht den ganzen Aufwand einer Registrierung auf mich nehmen möchte, nur um so einen ollen Schreibtisch auszuprobieren. Daraus ist dann die Idee entstanden, eine ID zufällig generieren zu lassen und diese in den Link miteinzubauen. Das bietet zusätzlich noch den Vorteil, dass man sich auf mehreren Geräten nicht immer anmelden muss. Der Link reicht völlig aus.
Wenn ich das gleiche Projekt nochmals realisieren müsste, würde ich von Anfang an nicht auf interact.js und jQuery verzichten. Speziell die ganzen Drag-and-Drop-Sachen sind ohne Framework extrem aufwendig umzusetzen und führen schnell zu Spaghetticode. Zudem müsste man von Anfang an die AJAX-Calls synchron managen. Gefallen hat mir hingegen, dass ich durch dieses Projekt den neuen CORS-Standard kennenlernen durfte. Vielleicht landet eines Tages auch mal irgendeine API von mir im Netz, die CORS unterstützt ...
