It’s #FrontendFriday – Unobtrusives JavaScript – Ein kleiner Reminder

04.06.2021

JavaScript ist keine plumpe Programmiersprache mehr, welche keine ernstzunehmende Softwareentwicklung erlaubt. Im Gegenteil, seit der Einreichung von Netscape bei der ECMA haben wir einen einheitlichen Standard, mit dem heutzutage viele größere Projekte umgesetzt werden.

Die Einsatzgebiete erstrecken sich mittlerweile von clientseitigen, über embedded, bis hin zu serverseitigen JavaScript-Webanwendungen. Im Zuge der genannten Webstandards-Bewegung hat sich auch die nicht offizielle Norm des „unaufdringliches JavaScripts“ definiert.

Bevor wir uns den wichtigsten Grundprinzipien des unobtrusiven JavaScript widmen, lasst uns erstmal auf den richtigen Einsatz des modernen Webdesigns näher eingehen. Dieser besteht aus drei Säulen: dem HTML, CSS und JavaScript. Das Ganze wird oftmals auch als Schichtenmodell bezeichnet. Die Basisschicht, das HTML, wird dabei flankiert durch die Präsentation (CSS) sowie das Verhalten (JavaScript). Die Kombination der drei genannten Schichten ermöglicht einem normalen User das bestmögliche Nutzungserlebnis. Doch was ist mit einem sehbehinderten Anwender? Braucht er zwingend eine Präsentationsschicht? Oder was ist, wenn das JavaScript aus Sicherheitsgründen blockiert oder abgeschaltet wird? Stichwort Barrierefreiheit. Aber genau das ist der springende Punkt im Rahmen der „Unobtrusivität“. Es muss verstanden werden, dass die Präsentations- sowie Verhaltens-Schicht zu jeder Zeit wegfallen können. Dementsprechend gibt es weitaus mehr Kombinationsmöglichkeiten, als nur funktionierendes HTML, CSS und JavaScript. Siehe folgend:

 

  • HTML und CSS: Beispielsweise beim aus Sicherheitsgründen abgeschalteten JavaScript.
  • HTML und JavaScript: Für Browser die kein CSS unterstützen.
  • Nur HTML wäre auch denkbar.

 

Unter Betrachtung dieses Aspektes sind eine strikte Trennung von HTML-, CSS sowie JavaScript-Code sowie der Prozess des „Progressive Enhancements“ für die unaufdringliche Programmierphilosophie unabdingbar. Das Letzte steht für eine schrittweise Verbesserung. D.h. es wird mit dem Aufbau des strukturierten Inhalts begonnen und sukzessive das Verhalten sowie die Präsentation hinzugefügt. Immer mit dem Hintergedanken einer strikten Trennung. Hier wird es bereits klar unobtrusives JavaScript ist eine Art zu denken! Konkreter gesagt, eine philosophische Art zu denken und dabei keine Annahmen zu machen. Annahmen wie beispielsweise:

 

  • Der Browser eines jeden unterstützt JavaScript.
  • Alle Browser funktionieren gleich.
  • Jeder Andere wird meinen Code verstehen.

 

Ein Paar grundlegende Regeln des unaufdringlichen JavaScript haben wir bereits kennengelernt:

 

    • Strikte Trennung von HTML-, CSS- und JavaScript-Code.
    • JavaScript und CSS sind weglassbare Erweiterungen. Keine Voraussetzungen.
    • Das Script sollte möglichst robust, verständlich und in sich geschlossen sein. Siehe hier.
    • Schreibe semantisches HTML: Benutze die in HTML5 bereitgestellten, logischen Teile einer Webseite. Suchmaschinen werden es dir Danken.
    • Unaufdringliches JavaScript besagt auch, dass ein Skript in so vielen Browsern wie möglich funktionieren sollte. D.h. es sollte entsprechend auf Fehler reagiert werden. Das ist der wohl am schwierigsten zu meisternde Aspekt der JavaScript-Entwicklung.
    • Verwendung von Best Practices, um Probleme des herkömmlichen JavaScript zu vermeiden.

Jetzt wird der ein oder andere Aufschreien: Moment mal, das ganze ist schön und gut, aber was ist mit reaktiven Webseiten, welche beispielsweise AJAX oder Fetch einsetzen? Der Einwand ist vollkommen berechtigt. In der Praxis kommt es sehr selten vor, dass alle Aspekte des unobtrusiven Denkens umgesetzt werden können. Dessen muss man sich von vornherein bewusst sein. Denn einerseits hängen enorme Implementierungsaufwände dahinter und andererseits sind nicht immer die entsprechenden Anforderungen gegeben. Die Grundkonzepte wie beispielsweise die strikte Trennung oder semantisches HTML müsste jedoch jeder Entwickler verinnerlichen, um saubere JavaScript-Anwendungen zu schreiben.


Quellen:
W3C

Mehr zu Frontend Entwicklung und Web Apps erfahren

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*