Sollte eine Website ohne JavaScript funktionieren?

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Der JS Party Podcast hatte gerade eine lustige Episode, in der sie diese klassische Frage diskutierten, indem sie sich in zwei Zweiergruppen aufteilten. Jede Gruppe erhielt eine „Seite“ dieser Debatte und durfte dann loslegen. Ich glaube nicht, dass jemand, der eine solche Sendung hört, nicht von Gedanken überschwemmt wird! Hier sind meine.

  • Das ist einer dieser heiligen Kriege, die seit Jahren toben. Vielleicht liegt es daran, dass die Leute nach einer Antwort suchen, die für das gesamte Web gilt, und das Web ist zu groß, um eine so breite Antwort zu geben.
  • Die Frage selbst ist einer Betrachtung wert. Warum sprechen wir darüber, unsere Seiten auf diese bestimmte Weise zu behindern? Sollten unsere Websites ohne HTML funktionieren? Sollten unsere Websites ohne Datenbanken funktionieren? Vielleicht konzentrieren wir uns am meisten auf JavaScript, weil JavaScript zum größten Engpass der Web-Performance geworden ist (noch mehr als das Netzwerk!) und wir erleben fehlgeschlagenes JavaScript häufiger als jede andere Art von Web-Ausfall (außer vielleicht, dass ganze Websites nicht geladen werden) (oder Icon-Fonts, verflixt).
  • Ich genoss das ganze Stolpern über die Terminologie von „Web-Apps“ und „Websites“ (Web-Dinge!). Das ist so ein seltsames Ding. Es ist so einfach, sich den Unterschied im Kopf vorzustellen: es ist wie Facebook im Vergleich zu einem Blog! Aber wenn man anfängt, es genau zu definieren, wird es sehr schnell unklar und die Unterscheidung verliert jeden Wert, wenn sie überhaupt einen hatte. Mehr dazu hier.
  • Barrierefreiheit ist sicherlich in allen Gesprächen über das Web involviert, aber sie kann hier wahrscheinlich nicht breit angewendet werden. Es gibt die Vorstellung, dass assistive Technologien kein JavaScript ausführen – eine Seite, die JavaScript zur Nutzung benötigt, ist für diese Benutzer ein Totalausfall. Soweit ich weiß, stimmt das längst nicht mehr. Wir können die Rolle von JavaScript bei Barrierefreiheitsproblemen bis zum Tod diskutieren, aber nur weil eine bestimmte Seite JavaScript benötigt, um zu laufen, macht sie die Seite nicht per se unzugänglich.
  • Es ist einfach genug, JavaScript auszuschalten, im Web zu surfen, kaputte Dinge zu finden und sie wegen dieses offensichtlichen Fehlers zu kritisieren. Der Fehler ist, dass diese Seite oder eine Funktion auf der Seite hätte ohne JavaScript entwickelt werden können. Regel der geringsten Macht. Das ist knifflig. Es ist leicht, sich nicht um eine Person zu kümmern, die absichtlich einen Teil ihres Webbrowsers deaktiviert hat und trotzdem alles funktionieren lassen möchte. Das ist mir ehrlich gesagt egal. Aber der Resilienz-Teil ist interessanter. Wenn Sie einen Teil einer Seite so bauen, dass er ohne JavaScript funktioniert, wird er sowohl vor als auch nach der Ausführung von JavaScript funktionieren, was ziemlich großartig ist.
  • Das Konzept, funktionale Inhalte und Features ohne JavaScript zu erstellen und das Erlebnis mit JavaScript zu verbessern, nennt man progressive enhancement. Ich bin sowohl ein Fan davon als auch vorsichtig, nicht darauf zu bestehen, dass alles auf der Welt immer so gebaut werden muss (siehe erster Aufzählungspunkt). Es gibt Situationen, in denen progressive enhancement sowohl technische Schulden erhöht als auch reduziert. Die einzige allgemeine Regel, die ich hier anwenden würde, ist, dass es sich lohnt, bis die Schulden zu hoch sind.
  • Es gibt einen Zwischenmoment beim progressiven Enhancement. Wenn ein Feature ohne JavaScript funktioniert, bedeutet das, dass Sie wahrscheinlich das Laden dieses JavaScripts zur Leistungssteigerung aufschieben. Aber es muss schließlich heruntergeladen und ausgeführt werden. Was passiert in dieser Zeit? Es gibt Kosten für Leistung und UX. Im besten Fall sind sie vernachlässigbar. Im schlimmsten Fall brechen Sie das Feature in dieser Zwischenzeit ab.
  • Ich finde es interessanter, solche Dinge auf einer Seite-für-Seite- und Feature-für-Feature-Basis zu diskutieren. Application holotypes könnten eine interessante Möglichkeit sein, das zu skalieren. Sie griffen oft auf Slack als Beispiel zurück, was eine perfekte Wahl ist. Wie würden Sie eine Filmrezensions-Seite mit 20 Autoren erstellen? Wie würden Sie eine soziale und medienlastige Seite wie Dribbble aufbauen? Wie baut man Dropdown-Navigation? Was ist mit einer einseitigen Broschüren-Seite, bei der der Kunde Parallax wünscht? Wie wäre es mit einer Fluglinien-App, die auch eine native mobile App benötigt? Und natürlich regt es zum Nachdenken über die Seiten an, an denen man selbst arbeitet. Läuft CodePen mit dem richtigen Technologiesatz? Und CSS-Tricks?
  • Wenn eine Seite „client-side rendered“ (CSR) ist, bedeutet das, dass JavaScript die Daten abruft und das DOM erstellt und all das. Wenn wir darüber sprechen, ob Websites ohne JavaScript „funktionieren“ oder nicht, wird eine client-side gerenderte Seite ohne JavaScript zu 100 % fehlschlagen. Es ist eine Art Gegenteil von „server-side rendered“ (SSR), bei der das Dokument als HTML direkt vom Server kommt. SSR ist für die erste Ladeerfahrung fast mit Sicherheit schneller. CSR ist typischerweise schneller, um sich nach dem Laden auf der Seite zu bewegen (denken Sie an „Single Page App“ oder SPA).
  • Es ist nicht nur SSR vs. CSR – es gibt ein ganzes Spektrum. Es wird immer üblicher, dass Websites versuchen, das Beste aus beiden Welten zu nutzen. Zum Beispiel Next/Nuxt/Gatsby oder Embers fastboot.
  • Service Worker sind JavaScript. Web Worker sind JavaScript. Einige der ausgefallenen Resilienz- und Performance-Features des Webs werden von der gleichen Technologie angetrieben, die die Probleme verursacht, über die wir diskutieren.