// der php hacker

// archiv

Zwei Dinge, die mich immer schon an Webapplikationen genervt haben

Geschrieben am 16. Nov 2010 von Cem Derin

Es gab eine Zeit, da war eine Webapplikation nichts weiter als die etwas hübscher aufbereitete Darstellung von Daten die an gewissen wenigen Punkten sogar dynamisch war. Ich erinnere mich da an meine ersten Tage im Internet zurück. Damals war GMX so ein Dienst, wo man kostenlos eine Email-Adresse bekommen hat. Wow. Eine Email-Adresse. Sowas hatte nicht jeder – lag vielleicht auch daran, dass kaum einer (oder zumindest keiner den ich kannte) wusste, was das eigentlich ist. Über eine Weboberfläche konnte man Emails schreiben und lesen. Unglaublich unkomfortabel und hässlich – jedenfalls aus heutigen Gesichtspunkten.

Seitdem hat sich eine Menge getan. Wir machen einen Zeitsprung in 2010: Viele der Major-Browser bieten „Standalone“-Kits an, mit denen Web-Applikationen wie Desktop-Programme erscheinen. Oberflächen wie Googlemail sind vollwertige Clients und es gibt sogar Bestrebungen, komplette Desktops mit Web-Applikationen zu betreiben. Warum auch nicht. Mit JavaScript, CSS3 und einem gesunden und sauberen Code sollte das doch kein Problem sein, oder?

Nun, ich sehe das ähnlich. Aber zwei Dinge nerven mich seit dem ich meine ersten Zeilen HTML geschrieben habe bis in den heutigen Tag, an dem ich mit dem hacken von PHP, HTML und CSS mein Geld verdiene. Zwei Dinge, die Web-Applikationen grundsätzlich von Desktop-Applikationen unterscheiden. Zwei Dinge, die man weder so richtig HTML, HTTP oder dem Browser anlasten kann – und irgendwie doch beiden.

Beginnen wir mit dem offensichtlicherem, dass der ein oder andere auch schon erlebt haben wird (und zu dem es ein paar Workarounds gibt):

Dateitransfer

Ja. Es gibt ein Input-Typ „file“ mit dem man Dateien hochladen kann. Praktisch. Bis zu dem Zeitpunkt, wo man massenhaft Daten hochladen muss. Oder – wenn wir im Kontext von Web-Apps reden – verarbeiten muss. Bis vor ein paar Jahren hab ich immer gesagt: „HTTP ist für Text, wenn man Daten transferieren will, gibt es FTP“. Warum heute nicht mehr? Nun, weil man das ganze eben nicht mehr so schwarz-weiß sehen kann. HTTP ist schon lange nicht mehr für Text. Es ist für Videos, Bilder, Soundfiles und allerhand anderem Zeug. Dennoch: Es gibt bis heute keine komfortable Möglichkeit, einen Ordner oder eine Menge von Daten einfach hochzuladen. Nativ, wohlgemerkt. Von Flash-Lösungen und Java-Pfuschereien wollen wir nicht reden (mal ganz davon abgesehen, dass keine Lösung problemlos auf allen Plattformen läuft).

Warum nicht? So schwer kann das doch nun wirklich nicht sein? Warum wurde dieses Thema bis heute vernachlässigt? Gute Frage – ich habe keine Antwort gefunden! Ist aber auch gar nicht der Punkt. Der ist nämlich viel mehr: So lange das nicht behoben ist, werden Web-Apps immer „unbequem“ sein.

Undo/Redo Stack

Etwas, was ich erst seit vergleichsweise kurzer Zeit vermisse, ist ein sauberer Undo/Redo Stack. Gerne als JavaScript API. Wer kennt das nicht: Eine tolle Web-Oberfläche für einen Dienst. Man kann Ordner in einer Baumstruktur verschieben, kopieren, löschen. Hups – da ist mir die Maus ausgerutscht. Wo ist der Ordner nun? Ist er gelöscht? Oder doch nur verschoben? Mist. In der Desktop-Umgebung drücke ich „Undo“ und gut ist. In der Web-App? Oh, da muss ich hoffen, dass der Entwickler so etwas eingebaut hat. Das er sich die Mühe gemacht, und so eine Funktionalität nachgerüstet hat. Aber dann stehe ich immer noch vor der Frage: Wie genau mache ich das nun? Geht das immer? So weit will ich aber gar nicht sehen. Ich habe in den wenigsten Web-Oberflächen von tausenden bereits gesehenen Diensten „Undo“-Buttons, -Links oder sonstwie gartete Funktionen gefunden. Leider. Verdammt noch mal: Leider!

Aber auch hier: Es gibt JavaScript-Implementationen, die einen solchen Stack aufbauen können. Das sind aber leider immer nur Insel-Lösungen, die oft auch ziemlich halbherzig umgesetzt sind.

Hilflosigkeit

Eigentlich wollte ich in diesem Artikel solche „Workaround“ besprechen. Ich habe mir einiges angesehen und ausprobiert. Aber ich durfte leider nur feststellen, dass nicht, aber wirklich gar nichts davon wirklich brauchbar war. Am Ende kam für mich der Schluss: Es muss eine native Lösung her. Und das ist für mich das Dilemma: Ich habe nicht die Fähigkeiten, entsprechenden Code zu Browsern hinzuzufügen und das ist so ziemlich das erste mal, dass ich ein Problem Programmiertechnischer Natur habe, dass ich gewiss nicht selbst lösen kann. Ziemlich mies.

Das musste mal gesagt werden.


#001
16. Nov 2010

Der Stack ist schon ein wenig spezieller, bei dem Dateiupload kann ich aber nur zustimmen. Man kommt dann schnell zu Bastellösungen, bei denen dann automatisch ein Dateiuploadelement dazugeneriert, oder gleich kurzerhand eine Hand voll dieser Felder bereitgestellt wird. Hinzu kommt, dass die Felder häufig aussehen wie Fremdkörper, weil sie sich nur begrenzt in ihrem Aussehen anpassen lassen. Das ist aber wohl viel mehr der Sicherheit geschuldet, weil ein Benutzer immer erkennen können muss, wenn lokale Dateien die heimische Festplatte verlassen.


#002
16. Nov 2010

Naja, das mit den Dateien könnte sich ja nun durch HTML5 demnächst lösen. An Gmail sieht man schon wie es dann wirklich schön umgesetzt werden kann! Einfach per Drag&Drop die Dateien in das vorgesehene Feld ziehen. Super!


#003
16. Nov 2010
Cem Derin

Ha, sieh mal einer an. Da hab ich mich wohl doch noch nicht so ausgiebig mit HTML5 beschäftigt, wie ich dachte. In der Tat  – das Problem wäre damit gelöst. Das andere leider nicht ;)


#004
16. Nov 2010
Havyrl

Im Prinzip hast du mit all dem Recht. Jedoch muss bei Desktopsoftware der Undo/Redo Stack auch programmiert werden. Diese gibt es zwar öfter als im Web, aber oft auch einfach nur Grottig umgesetzt, so das es kein unterschied macht ob man diesen oder keinen hat.


#005
16. Nov 2010

Ja, html5 hättest du dir für den Multi File Upload ruhig ansehen können. Google hat da auch direkt ein schönes Beispiel geliefert.
http://www.3site.eu/jstests/upload/

Einfach wie normal auf durchsuchen, und dann wie man es von anderen Programmen kennt, mehrere Datein im Auswahldialog markieren und los gehts.

Funktioniert einwandfrei.

Nun zu deinem Undo/Redo Stack.

Ich denke, du hast da einen wichtigen Punkt ignoriert. Du beschreibst es nämlich so, dass Desktop Apps das von Natur aus können.
Nun, es ist nicht abstreitbar, dass es in dem Bereich einfach überall funktioniert. Aber hast du dir schonmal überlegt, wie das dort gehandhabt wird? Ich habe es mir jetzt auch noch nicht angesehen, aber als Linux nutzer weis ich, dass diese undo/redo Funktion auf Ebene der Kommandozeile nicht existiert. Demzufolge wird es irgendwo zwischen Kommandozeile und Desktop erst entwickelt worden sein.

Es wäre also eventuell Sinnvoll, dort zu suchen, wie es umgesetzt wurde um sich davon inspirieren zu lassen. Womöglich sind aber auch die Lösungen die du dort findest, nicht die sauberen Wunschlösungen die man sich erträumt.


#006
16. Nov 2010
Cem Derin

@Flyingmana, @Havyrl: Da ich durchaus auch Desktop-Applikationen schreibe, weiß ich, dass Undo nicht einfach so aus dem nebulösen Nichts kommt. Es ist aber so, dass moderne Frameworks entsprechende Funktionalität bereitstellen, so dass Undo-/Redo-Funktionalität einfach und leicht implementiert werden kann (bzw. je nach Verständnis des Frameworks und verwendeter Komponenten tatsächlich ein bisschen automatisch bzw. durch Compliance-Practices). Die Möglichkeit bieten Browser nicht (nativ). Besonders schick ist zum Beispiel der Undo-Manager von Apple für Cocoa: http://developer.apple.com/library/ios/#documentation/cocoa/reference/Foundation/Classes/NSUndoManager_Class/Reference/Reference.html


#007
16. Nov 2010
harald

tja, schade, dass kein(?) browser RFC1867 wirklich umsetzt, da ist nämlich ein multifile-upload vorgesehen. wenn ich mich nicht irre kann / konnte der opera das aber schon seit / vor jahren — keine ahnung, wie da der aktuelle stand der dinge ist.


#008
25. Nov 2010
knalli

Für den Stack könnte das neue Event hashchange sicherlich sinnvoll sein, aber: Ein Undo/Redo ist immer kontextsensitiv bzw. muss für jede Aktion auch implementiert sein (auch im Dateibrowser auf dem “Desktop”). Sei es das Tabwechseln (in einer RIA), sei es Objekte verschieben, sei es Texte schreiben (etwa in TinyMCE).

Wegen Uploads (HTML5), zum Beispiel als Demo http://www.weeby.pl/blog/html5uploader/uploader.html

Da gab es noch eine viel schönere Seite, wo die Bilder im Stack sogar direkt angezeigt werden. Finde ich nicht mehr :(

// kommentieren

// senden
theme von mir, software von wordpress, grid von 960 grid system. funktioniert in allen browsern, aber der safari bekommt das mit der schrift am schönsten hin.