Tech 29. Oct. 2012

An jQuery und Modenizr Fetischisten

Also ehrlich. So toll und reizvoll einige der Nutzungsoptionen sein mögen und so modern sich Feature Detection usw. anhören - man sollte die Gesamtarchitektur der Software - und damit meine ich hier im engeren nur der frontendseitige Softwareschicht - nicht außer acht lassen.

Denn diese Technologien taugen eben auch nur etwas, wenn der Einsatzbereich passt.

Wenn Modenizr versucht Features zu finden, dann per Javascript. Und das ist bekanntlich auf einigen Browsern oder Devices langsam. Zum Teil sind auch die Prozessabfolgen anders. Doch genau die Abwärtskompatibilität soll diese Technologie ja ermöglichen. Die Konsequenz ist ganz einfach: man muss auf den Aspekt der Abwärtskompatibilität eben explizit achten und nicht blind auf Modenizr vertrauen. Und dann kann man z.B. auch mal eine No-Script Variante für alte Devices stehen lassen. Das geht dann eigentlich überall gut. Und auch Lücken im Konzept - nein das stimmt nicht, Lücken in der Kompatibilität - gibt es immer noch. Ein tolles Beispiel ist der Kompatibilitätsmodus des IE. Der reagiert dann manchmal anders als erwartet. Und spannend sind auch VM Umgebungen - die stürzen dann auch gerne mal komplett ab - wegen ein bisschen Javascript für runde Ecken. Stimmt, nicht nur runde Ecken, sondern mehr: dort noch ein Schatten, hier noch ein Verlauf, da noch ein Re-Rendering des Overlays, usw.

Auch jQuery Strategien können übertrieben sein. So schön es ist, dass man im Markup auf onclick-Attribute verzichten kann. Die Konsequenz ist, dass per Javascript immer mal wieder das gesamte DOM geparst, analysiert und verändert wird. Und das ist eben rechenintensiv und je nach Einsatz und Menge vs. Device und Browser auch durchaus mal erschreckend langsam. So braucht ein IE8 gerne mal eins/zwei Sekunden um dann die richtige Schriftart darzustellen und Links wieder klickbar zu haben.

Auch ein schönes Beispiel: $.event.add(window, "scroll", function() { ... } Auf schnellen Browsern geht das wunderbar und man kann so z.B. Sticky Header basteln. Geht man auf einen iOS Safari ist der Spaß schnell vorbei. Denn das Javascript wird erst ausgeführt, wenn das Scrollen abgeschlossen wurde. Und das Ergebnis ist kein Usability Enhancement sondern ein grausames Springen.

Auch wenn die Beispiele hier nicht die fundiertesten sind, ist das mal der Auftakt meines Low-Tech Plädoyers.

Frameworks hin, Javascript her - man muss aufpassen, dass man nicht blind lauter “Zeugs” verwendet, was am Ende eben auch nicht nur Vorteile mit sich bringt. Nicht dass ich falsch verstanden werde - ich bin ein großer Befürworter von Scripten im Frontend und Progressive Enhancement über Javascripts.

Aber auch Responsive Design geht OHNE Javascript. Einen String kann man auch auf dem Server kürzen lassen. Das Darstellung eines Suchergebnisses kann per HTML/CSS erfolgen. Eine Suchtreffermenge muss nicht per jQuery berechnet werden, …